diff --git a/ComfyCanvas/__init__.py b/ComfyCanvas/__init__.py
new file mode 100644
index 0000000..860ac50
--- /dev/null
+++ b/ComfyCanvas/__init__.py
@@ -0,0 +1,3 @@
+NODE_CLASS_MAPPINGS = {
+}
+
diff --git a/ComfyCanvas/__pycache__/__init__.cpython-310.pyc b/ComfyCanvas/__pycache__/__init__.cpython-310.pyc
new file mode 100644
index 0000000..3be9d8c
Binary files /dev/null and b/ComfyCanvas/__pycache__/__init__.cpython-310.pyc differ
diff --git a/ComfyCanvas/latent_preview.py b/ComfyCanvas/latent_preview.py
new file mode 100644
index 0000000..0cd9fbb
--- /dev/null
+++ b/ComfyCanvas/latent_preview.py
@@ -0,0 +1,128 @@
+import torch
+from PIL import Image
+import struct
+import numpy as np
+from comfy.cli_args import args, LatentPreviewMethod
+from comfy.taesd.taesd import TAESD
+import comfy.model_management
+import folder_paths
+import comfy.utils
+import logging
+from pathlib import Path
+from urllib import request
+import base64, io, json
+
+MAX_PREVIEW_RESOLUTION = args.preview_size
+
+def preview_to_image(latent_image,newsample=False):
+        latents_ubyte = (((latent_image + 1.0) / 2.0).clamp(0, 1)  # change scale from -1..1 to 0..1
+                            .mul(0xFF)  # to 0..255
+                            ).to(device="cpu", dtype=torch.uint8, non_blocking=comfy.model_management.device_supports_non_blocking(latent_image.device))
+        image = Image.fromarray(newsample)
+        try:
+            buf = io.BytesIO()
+            image.save(buf, format='PNG')
+            byte_im = buf.getvalue()
+            byte_im = base64.b64encode(byte_im).decode('utf-8')
+            byte_im = f"data:image/png;base64,{byte_im}"
+            p = {
+                "data":{
+                            "img":byte_im,
+                            "width":image.size[0],
+                            "height":image.size[1]
+                        }
+            }
+            data = json.dumps(p).encode('utf-8')
+            req =  request.Request("http://localhost:5000/settaesd", data=data)
+            req.add_header("Content-Type", "application/json")
+            request.urlopen(req)
+        except Exception as e: 
+            print(e)
+        return Image.fromarray(latents_ubyte.numpy())
+
+class LatentPreviewer:
+    def decode_latent_to_preview(self, x0):
+        pass
+
+    def decode_latent_to_preview_image(self, preview_format, x0):
+        preview_image = self.decode_latent_to_preview(x0)
+        return ("JPEG", preview_image, MAX_PREVIEW_RESOLUTION)
+
+class TAESDPreviewerImpl(LatentPreviewer):
+    def __init__(self, taesd):
+        self.taesd = taesd
+
+    def decode_latent_to_preview(self, x0):
+        newsample = self.taesd.decode(x0[:1])[0].detach()
+        newsample = torch.clamp((newsample + 1.0) / 2.0, min=0.0, max=1.0)
+        newsample = 255. * np.moveaxis(newsample.cpu().numpy(), 0, 2)
+        newsample = newsample.astype(np.uint8)
+        x_sample = self.taesd.decode(x0[:1])[0].movedim(0, 2)
+        return preview_to_image(x_sample,newsample)
+
+
+class Latent2RGBPreviewer(LatentPreviewer):
+    def __init__(self, latent_rgb_factors, latent_rgb_factors_bias=None):
+        self.latent_rgb_factors = torch.tensor(latent_rgb_factors, device="cpu").transpose(0, 1)
+        self.latent_rgb_factors_bias = None
+        if latent_rgb_factors_bias is not None:
+            self.latent_rgb_factors_bias = torch.tensor(latent_rgb_factors_bias, device="cpu")
+
+    def decode_latent_to_preview(self, x0):
+        self.latent_rgb_factors = self.latent_rgb_factors.to(dtype=x0.dtype, device=x0.device)
+        if self.latent_rgb_factors_bias is not None:
+            self.latent_rgb_factors_bias = self.latent_rgb_factors_bias.to(dtype=x0.dtype, device=x0.device)
+
+        latent_image = torch.nn.functional.linear(x0[0].permute(1, 2, 0), self.latent_rgb_factors, bias=self.latent_rgb_factors_bias)
+        # latent_image = x0[0].permute(1, 2, 0) @ self.latent_rgb_factors
+
+        return preview_to_image(latent_image)
+
+
+def get_previewer(device, latent_format):
+    previewer = None
+    method = args.preview_method
+    if method != LatentPreviewMethod.NoPreviews:
+        # TODO previewer methods
+        taesd_decoder_path = None
+        if latent_format.taesd_decoder_name is not None:
+            taesd_decoder_path = next(
+                (fn for fn in folder_paths.get_filename_list("vae_approx")
+                    if fn.startswith(latent_format.taesd_decoder_name)),
+                ""
+            )
+            taesd_decoder_path = folder_paths.get_full_path("vae_approx", taesd_decoder_path)
+
+        if method == LatentPreviewMethod.Auto:
+            method = LatentPreviewMethod.Latent2RGB
+
+        if method == LatentPreviewMethod.TAESD:
+            if taesd_decoder_path:
+                taesd = TAESD(None, taesd_decoder_path, latent_channels=latent_format.latent_channels).to(device)
+                previewer = TAESDPreviewerImpl(taesd)
+            else:
+                logging.warning("Warning: TAESD previews enabled, but could not find models/vae_approx/{}".format(latent_format.taesd_decoder_name))
+
+        if previewer is None:
+            if latent_format.latent_rgb_factors is not None:
+                previewer = Latent2RGBPreviewer(latent_format.latent_rgb_factors, latent_format.latent_rgb_factors_bias)
+    return previewer
+
+def prepare_callback(model, steps, x0_output_dict=None):
+    preview_format = "JPEG"
+    if preview_format not in ["JPEG", "PNG"]:
+        preview_format = "JPEG"
+
+    previewer = get_previewer(model.load_device, model.model.latent_format)
+
+    pbar = comfy.utils.ProgressBar(steps)
+    def callback(step, x0, x, total_steps):
+        if x0_output_dict is not None:
+            x0_output_dict["x0"] = x0
+
+        preview_bytes = None
+        if previewer:
+            preview_bytes = previewer.decode_latent_to_preview_image(preview_format, x0)
+        pbar.update_absolute(step + 1, total_steps, preview_bytes)
+    return callback
+
diff --git a/ComfyCanvas/main.py b/ComfyCanvas/main.py
new file mode 100644
index 0000000..10e426a
--- /dev/null
+++ b/ComfyCanvas/main.py
@@ -0,0 +1,547 @@
+from flask import Flask, render_template,request, send_from_directory
+from urllib import parse
+from urllib import request as rq
+import webbrowser
+import os,base64,io, time, random
+from PIL import Image, ImageFilter, ImageOps
+try:
+	from signal import SIGKILL
+except:
+	from signal import SIGABRT
+import json, socket
+
+def stopprocess():
+    pid = os.getpid()
+    try:
+        os.kill(int(pid), SIGKILL)
+    except:
+        os.kill(int(pid), SIGABRT)
+    return "none"
+from pathlib import Path
+import numpy as np
+
+
+ip = ""
+s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+s.connect(("8.8.8.8", 80))
+ip = s.getsockname()[0]
+s.close()
+
+tt = ""
+imagesgen = []
+genflag = False
+sharedata = {
+    "savedata":"",
+    "imgs":{}
+}
+
+app = Flask(__name__)
+
+image = ""
+
+bs = 512
+
+@app.route("/")
+def index():
+    return render_template('index.html',byte_im="",w="",h="",bs=bs)
+
+
+@app.route('/favicon.ico')
+def favicon():
+    return send_from_directory(os.path.join(app.root_path, 'static'),
+                               'favicon.ico', mimetype='image/vnd.microsoft.icon')
+
+@app.route("/grabwfsmodels",methods=['GET', 'POST','DELETE'])
+def grabwfsmodels():
+    models = ["Diffusers Models"]
+    path = Path('../../models/diffusers')
+    diffusers = [i for i in sorted(os.listdir(path)) if os.path.isdir(os.path.join(path,i))]
+    models+=diffusers
+    models+=["Checkpoints"]
+    path = Path('../../models/checkpoints')
+    ckpts = [i for i in sorted(os.listdir(path)) if i.endswith((".safetensors", ".ckpt"))]
+    models += ckpts
+    models+=["Unets"]
+    path = Path('../../models/unet')
+    unets = [i for i in sorted(os.listdir(path)) if i.endswith((".safetensors", ".ckpt",".gguf"))]
+    models+=unets
+    path = Path('./workflows')
+    wfs = sorted(os.listdir(path))
+    wfs = [i.replace(".json","") for i in wfs]
+    path = Path('../../models/loras')
+    loras = [i for i in sorted(os.listdir(path)) if i.endswith((".safetensors"))]
+    return{"models":models,"wfs":wfs,"loras":loras}
+
+@app.route("/cancelgen",methods=['GET', 'POST','DELETE'])
+def cancelgen():
+    global genflag
+    genflag = True
+    req =  rq.Request("http://127.0.0.1:8188/interrupt",data={})
+    rq.urlopen(req)
+    return{}
+
+@app.route("/saveimg",methods=['GET', 'POST','DELETE'])
+def saveimg():
+    pixels = request.json["pixels"]
+    if pixels != "":
+        for i in range(0,len(pixels)):
+            for j in range(0,len(pixels[i])):
+                pixels[i][j] = tuple(pixels[i][j])
+                
+        
+        array = np.array(pixels, dtype=np.uint8)
+        image = Image.fromarray(array)
+        sharedata["imgs"]["image"] = json.dumps(np.array(image).tolist())
+        sharedata["imgs"]["mask"] = json.dumps(np.array(image).tolist())
+        sharedata["imgs"]["reference"] = json.dumps(np.array(image).tolist())
+        wf = "saveimg.json"
+        def queue_prompt(prompt_workflow):
+            p = {"prompt": prompt_workflow}
+            data = json.dumps(p).encode('utf-8')
+            req =  rq.Request("http://127.0.0.1:8188/prompt", data=data)
+            rq.urlopen(req)
+        path = Path('./workflows')
+        prompt_workflow = json.load(open(os.path.join(path,wf)))
+        for i in prompt_workflow:
+            if "seed" in prompt_workflow[i]['inputs']:
+                prompt_workflow[i]['inputs']['seed'] = random.randint(0,10000000000)
+        queue_prompt(prompt_workflow)
+    return{}
+
+@app.route("/grabwfparams",methods=['GET', 'POST','DELETE'])
+def grabwfparams():
+    wf = request.json["wf"]
+    wf +=".json"
+    path = Path('./workflows')
+    prompt_workflow = json.load(open(os.path.join(path,wf)))
+    for i in prompt_workflow:
+        if "steps" in prompt_workflow[i]["inputs"]:
+            params = [j for j in prompt_workflow[i]["inputs"] if any(x in str(type(prompt_workflow[i]["inputs"][j])) for x in ["int","float"])]
+    return{"params":params}
+
+
+@app.route("/prepare",methods=['GET', 'POST','DELETE'])
+def prep():
+    return{"exist":"no"}
+
+@app.route("/getnodes",methods=['GET', 'POST','DELETE'])
+def getNodes():
+    wf = request.json["wf"]+".json"
+    path = Path('./workflows')
+    prompt_workflow = json.load(open(os.path.join(path,wf)))
+    return{"prompt_workflow":prompt_workflow}
+
+@app.route("/generate",methods=['GET', 'POST','DELETE'])
+def generate():
+    wf = request.json["wf"]
+    gligparams = request.json["gligparams"]
+    wf+=".json"
+    model = request.json["model"]
+    lora = request.json["lora"]
+    params = request.json["params"]
+    def queue_prompt(prompt_workflow):
+        p = {"prompt": prompt_workflow}
+        data = json.dumps(p).encode('utf-8')
+        req =  rq.Request("http://127.0.0.1:8188/prompt", data=data)
+        rq.urlopen(req)
+    path = Path('./workflows')
+    prompt_workflow = json.load(open(os.path.join(path,wf)))
+    if "gligen" in wf:
+        print(gligparams)
+        nn = int(list(prompt_workflow.keys())[-1])+1
+        for idx,i in enumerate(gligparams):
+            if idx<=len(gligparams)-2:
+                n = nn + int(idx)
+                prompt_workflow[str(n)] = {
+                    "inputs":{},
+                    "class_type":"",
+                    "_meta":{}
+                }
+                prompt_workflow[str(n)]["inputs"]["text"] = i["text"]
+                prompt_workflow[str(n)]["inputs"]["width"] = i["width"]
+                prompt_workflow[str(n)]["inputs"]["height"] = i["height"]
+                prompt_workflow[str(n)]["inputs"]["x"] = i["x"]
+                prompt_workflow[str(n)]["inputs"]["y"] = i["y"]
+                if idx==0:
+                    prompt_workflow[str(n)]["inputs"]["conditioning_to"] = ["6",0]
+                else:
+                    prompt_workflow[str(n)]["inputs"]["conditioning_to"] = [str(n-1),0]
+                prompt_workflow[str(n)]["inputs"]["clip"] = ["4",1]
+                prompt_workflow[str(n)]["inputs"]["gligen_textbox_model"] = ["12",0]
+                prompt_workflow[str(n)]["class_type"] = "GLIGENTextBoxApply"
+                prompt_workflow[str(n)]["_meta"]["title"] = "GLIGENTextBoxApply"
+        prompt_workflow["6"]["inputs"]["text"] = gligparams[-1]["text"]
+        prompt_workflow["3"]["inputs"]["positive"] = [str(nn+int(len(gligparams)-2)),0]
+    if "areacomp" in wf:
+        print(gligparams)
+        nn = int(list(prompt_workflow.keys())[-1])+1
+        n = nn
+        for idx,i in enumerate(gligparams):
+            if idx<=len(gligparams)-2:
+                prompt_workflow[str(n)] = {
+                    "inputs": {
+                    "text": i["text"],
+                    "clip": [
+                        "4",
+                        1
+                    ]
+                    },
+                    "class_type": "CLIPTextEncode",
+                    "_meta": {
+                    "title": "CLIP Text Encode (Prompt)"
+                    }
+                }
+                n+=1
+                prompt_workflow[str(n)] = {
+                    "inputs": {
+                    "width": i["width"],
+                    "height": i["height"],
+                    "x": i["x"],
+                    "y": i["y"],
+                    "strength": 1,
+                    "conditioning": [
+                        str(n-1),
+                        0
+                    ]
+                    },
+                    "class_type": "ConditioningSetArea",
+                    "_meta": {
+                    "title": "Conditioning (Set Area)"
+                    }
+                }
+                n+=1
+                prompt_workflow[str(n)] = {
+                    "inputs": {
+                    "conditioning_1": [
+                        str(n-1),
+                        0
+                    ],
+                    "conditioning_2": [
+                        "6" if idx==0 else str(n-3),
+                        0
+                    ]
+                    },
+                    "class_type": "ConditioningCombine",
+                    "_meta": {
+                    "title": "Conditioning (Combine)"
+                    }
+                }
+        prompt_workflow["6"]["inputs"]["text"] = gligparams[-1]["text"]
+        prompt_workflow["3"]["inputs"]["positive"] = [str(n),0]
+    if "stickerize" not in wf:
+        for i in prompt_workflow:
+            if "seed" in prompt_workflow[i]['inputs']:
+                prompt_workflow[i]['inputs']['seed'] = random.randint(0,10000000000)
+            if "model_name" in prompt_workflow[i]['inputs'] and prompt_workflow[i]['class_type'] !='UpscaleModelLoader':
+                prompt_workflow[i]['inputs']['model_name'] = model
+            if "ckpt_name" in prompt_workflow[i]['inputs']:
+                prompt_workflow[i]['inputs']['ckpt_name'] = model
+            if "steps" in prompt_workflow[i]['inputs']:
+                for j in params:
+                    prompt_workflow[i]['inputs'][j] = params[j]
+    else:
+        for i in prompt_workflow:
+            if "seed" in prompt_workflow[i]['inputs']:
+                prompt_workflow[i]['inputs']['seed'] = random.randint(0,10000000000)
+    changedparams = request.json["changedparams"]
+    print(changedparams)
+    for i in changedparams.keys():
+        for j in changedparams[i].keys():
+            prompt_workflow[i]['inputs'][j] = changedparams[i][j]
+    queue_prompt(prompt_workflow)
+    return{}
+
+
+@app.route("/settaesd",methods=['GET', 'POST','DELETE'])
+def settaesd():
+    global tt
+    tt = request.json["data"]
+    return {}
+
+@app.route("/getGenStatus",methods=['GET', 'POST','DELETE'])
+def getGenStatus():
+    global genflag, imagesgen
+    genflag = request.json["data"]
+    image = Image.open(request.json["data"]["genimg"])
+    buf = io.BytesIO()
+    image.save(buf, format='PNG')
+    byte_im = buf.getvalue()
+    byte_im = base64.b64encode(byte_im).decode('utf-8')
+    byte_im = f"data:image/png;base64,{byte_im}"
+    if len(imagesgen)<5:
+        imagesgen.append(byte_im)
+    else:
+        imagesgen.pop(0)
+        imagesgen.append(byte_im)
+    return {}
+
+@app.route("/getImagesPaths",methods=['GET', 'POST','DELETE'])
+def getImagesPaths():
+    global imagesgen
+    return {"imagesgen":imagesgen}
+
+@app.route("/getSharedData",methods=['GET', 'POST','DELETE'])
+def getSharedData():
+    global sharedata
+    return sharedata
+
+
+@app.route("/savedata",methods=['GET', 'POST','DELETE'])
+def savedata():
+    global image, tt, genflag
+    img2img = "inpaint"
+    taesd = request.json["taesd"]
+    savedata = request.json["savedata"]
+    if taesd == "false":
+        ff = int(savedata["ff"])
+        selectorsize = request.json["selectorsize"]
+        pixels = savedata["pxlsarray"]
+        if pixels != "":
+            for i in range(0,len(pixels)):
+                for j in range(0,len(pixels[i])):
+                    pixels[i][j] = tuple(pixels[i][j])
+                    
+            
+            array = np.array(pixels, dtype=np.uint8)
+            image = Image.fromarray(array)
+        sharedata["imgs"]["out"] = json.dumps(np.array(image).tolist())
+        left = int(float(savedata["crpdims"]["left"]))
+        top = int(float(savedata["crpdims"]["top"]))
+        right = int(float(savedata["crpdims"]["right"]))
+        bottom = int(float(savedata["crpdims"]["bottom"]))
+        croped = image.crop((left,top,right,bottom))
+        try:
+            left = int(float(savedata["crpdimsref"]["left"]))
+            top = int(float(savedata["crpdimsref"]["top"]))
+            right = int(float(savedata["crpdimsref"]["right"]))
+            bottom = int(float(savedata["crpdimsref"]["bottom"]))
+            if left==0 and right==0 and top ==0 and bottom==0:
+                ref = image
+            else:
+                ref = image.crop((left,top,right,bottom))
+        except:
+            ref = image
+        sharedata["imgs"]["reference"] = json.dumps(np.array(ref).tolist())
+        croped2 = croped.copy()
+        px = croped2.load()
+        for i in range(0,croped2.size[0]):
+            for j in range(0,croped2.size[1]):
+                try:
+                    if px[i,j][3] <250:
+                        px[i,j] = (255,255,255,255)
+                    else:
+                        px[i,j] = (0,0,0,255)
+                except:
+                    px[i,j] = (0,0,0)
+        selectorsize = int(selectorsize)
+        bg = Image.new("RGB",(selectorsize,selectorsize),(0,0,0))
+        bg2 = Image.new("RGB",(selectorsize,selectorsize),(255,255,255))
+        add = (int(float(savedata["additionaldims"]["left"])),int(float(savedata["additionaldims"]["top"])),int(float(selectorsize-savedata["additionaldims"]["right"])),int(float(selectorsize-savedata["additionaldims"]["bottom"])))
+        bg.paste(croped,(add))
+        bg2.paste(croped2,(add))
+
+
+
+        ###########################
+        toparr = []
+        leftarr = []
+        rightarr = []
+        bottomarr = []
+
+        topleftarr = []
+        toprightarr = []
+        bottomleftarr = []
+        bottomrightarr = []
+        whitepix = 0
+        px = bg2.load()
+        for i in range(0,bg2.size[0]):
+            for j in range(0,bg2.size[1]):
+                if px[i,j][0] == 255:
+                    whitepix+=1
+                try:
+                    if px[i,j][0] == 255 and 0<i<bg.size[0]-1 and 0<j<bg.size[1]-1:
+                        if px[i,j+1][0] <255:
+                            rightarr.append([i,j])
+                        if px[i,j-1][0] <255:
+                            leftarr.append([i,j])
+
+                        if px[i+1,j][0] <255:
+                            bottomarr.append([i,j])
+
+                        if px[i-1,j][0] <255:
+                            toparr.append([i,j])
+
+                        if px[i-1,j-1][0] <255:
+                            topleftarr.append([i,j])
+                        if px[i-1,j+1][0] <255:
+                            toprightarr.append([i,j])
+
+                        if px[i+1,j+1][0] <255:
+                            bottomrightarr.append([i,j])
+
+                        if px[i+1,j-1][0] <255:
+                            bottomleftarr.append([i,j])
+
+                except:
+                    continue
+
+        
+        for i in range(0,len(toparr)):
+            for k in range(0,ff):
+                try:
+                    px[toparr[i][0]-k,toparr[i][1]] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(leftarr)):
+            for k in range(0,ff):
+                try:
+                    px[leftarr[i][0],leftarr[i][1]-k] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(rightarr)):
+            for k in range(0,ff):
+                try:
+                    px[rightarr[i][0],rightarr[i][1]+k] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(bottomarr)):
+            for k in range(0,ff):
+                try:
+                    px[bottomarr[i][0]+k,bottomarr[i][1]] = (255,255,255)
+                except:
+                    continue
+        
+
+
+        for i in range(0,len(topleftarr)):
+            for k in range(0,ff):
+                try:
+                    px[topleftarr[i][0]-k,topleftarr[i][1]-k] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(toprightarr)):
+            for k in range(0,ff):
+                try:
+                    px[toprightarr[i][0]-k,toprightarr[i][1]+k] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(bottomleftarr)):
+            for k in range(0,ff):
+                try:
+                    px[bottomleftarr[i][0]+k,bottomleftarr[i][1]-k] = (255,255,255)
+                except:
+                    continue
+
+        for i in range(0,len(bottomrightarr)):
+            for k in range(0,ff):
+                try:
+                    px[bottomrightarr[i][0]+k,bottomrightarr[i][1]+k] = (255,255,255)
+                except:
+                    continue
+            
+                
+                
+
+
+
+
+        ########################
+
+
+
+        sharedata["imgs"]["image"] = json.dumps(np.array(bg).tolist())
+        if whitepix == 0:
+            border = Image.new("RGB",(bg2.size[0],bg2.size[1]),(0,0,0)) 
+            bg2 = ImageOps.invert(bg2)
+            bg2 = bg2.resize((bg2.size[0]-ff*2,bg2.size[1]-ff*2))
+            border.paste(bg2,(ff,ff))
+            bg2 = border
+            img2img = "img2img"
+        bg2 = bg2.filter(ImageFilter.BoxBlur(ff-int(ff/2)))
+        if request.json["savedata"]["mskarray"]=="":
+            sharedata["imgs"]["mask"] = json.dumps(np.array(bg2).tolist())
+        else:
+            pixels = savedata["mskarray"]
+            if pixels != "":
+                for i in range(0,len(pixels)):
+                    for j in range(0,len(pixels[i])):
+                        pixels[i][j] = tuple(pixels[i][j])
+                        
+                
+                array = np.array(pixels, dtype=np.uint8)
+                maskimage = Image.fromarray(array)
+                sharedata["imgs"]["out"] = json.dumps(np.array(image).tolist())
+                left = int(float(savedata["crpdims"]["left"]))
+                top = int(float(savedata["crpdims"]["top"]))
+                right = int(float(savedata["crpdims"]["right"]))
+                bottom = int(float(savedata["crpdims"]["bottom"]))
+                cropedmsk = maskimage.crop((left,top,right,bottom))
+                cropedmsk = cropedmsk.filter(ImageFilter.BoxBlur(ff-int(ff/2)))
+                sharedata["imgs"]["mask"] = json.dumps(np.array(cropedmsk).tolist())
+        width = int(float(savedata["additionaldims"]["left"])) + int(float(savedata["additionaldims"]["right"]))
+        height = int(float(savedata["additionaldims"]["top"])) + int(float(savedata["additionaldims"]["bottom"]))
+        
+        data = {
+            "savedata":savedata
+        }
+        json_object = json.dumps(data, indent=4)
+        sharedata["savedata"] = savedata
+        taesds = "no"
+    else:
+        img2img = request.json["img2img"]
+        if img2img=="":
+            img2img = "inpaint"
+    flag = False
+    realflag = flag
+    if genflag:
+        try:
+            image = Image.open(genflag["genimg"])
+        except: 
+            pass
+        tt = ""
+        genflag = False
+        flag = True
+    if flag:
+        taesds = "no"
+        realflag = flag
+        flag = False
+        try:
+            width = image.size[0]
+            height = image.size[1]
+            buf = io.BytesIO()
+            image.save(buf, format='PNG')
+            byte_im = buf.getvalue()
+            byte_im = base64.b64encode(byte_im).decode('utf-8')
+            byte_im = f"data:image/png;base64,{byte_im}"
+        except:
+            byte_im = ""
+            width = ""
+            height = ""
+
+    else:
+        try:
+            width = tt["width"]
+            height = tt["height"]
+            byte_im = tt["img"]
+            taesds = "no"
+        except:
+            taesds = "yes"
+    try:
+        return {"img":byte_im,"width":width,"height":height,"data":savedata,"flag":str(realflag),"taesd":taesds,"img2img":img2img}
+    except:
+        byte_im = ""
+        width = ""
+        height = ""
+        return {"img":byte_im,"width":width,"height":height,"data":savedata,"flag":str(realflag),"taesd":taesds,"img2img":img2img}
+
+
+
+if __name__ == "__main__":
+    webbrowser.open("http://localhost:5000")
+    app.run(debug=False)
+    
diff --git a/ComfyCanvas/setup.py b/ComfyCanvas/setup.py
new file mode 100644
index 0000000..caa8e86
--- /dev/null
+++ b/ComfyCanvas/setup.py
@@ -0,0 +1,3 @@
+import shutil
+
+shutil.copyfile('latent_preview.py', '../../latent_preview.py')
diff --git a/ComfyCanvas/static/app.js b/ComfyCanvas/static/app.js
new file mode 100644
index 0000000..59efabd
--- /dev/null
+++ b/ComfyCanvas/static/app.js
@@ -0,0 +1,3019 @@
+var loneFlag = false;
+var generating = false;
+var grid = false;
+var gridsize = 128;
+var gridpoints = [];
+var textflag = false;
+var textadded = {};
+var textnum = 0;
+var gligenflag = false;
+var gligenbaseimage = "";
+var gligenparams = {};
+var gligennum = 0;
+var drawerflag = false;
+var mousex = 0;
+var boxleft = "";
+var boxtop = "";
+var imgflip = false;
+var fsimgs = {};
+var selmod = "";
+var sellora = "";
+var selparam = "";
+var selwf = "";
+var genflag = false;
+var canvasflag = true;
+var taesd = "false";
+var img2img = "";
+var backup = {
+    "img":"",
+    "left":"",
+    "top":"",
+    "width":"",
+    "height":""
+}
+var params = {};
+var mousey = 0;
+var lockflag = false;
+var prevmousex = 0;
+var prevmousey = 0;
+var clickflag = false;
+var moveimgenableflag = false;
+var selectorsize = 512;
+var crplft = 0;
+var crptp = 0;
+var crprght = 0;
+var crpbtm = 0;
+var eraseflag = false;
+var drawenableflag = false;
+var eraseenableflag = false;
+var maskenableflag = false;
+var drawflag = false;
+var maskflag = false;
+var ll = false;
+var lr = false;
+var lt = false;
+var lb = false;
+var setref = false;
+var comporder = [];
+var imagetomove = "";
+var cropflag = false;
+var cropcount = 0;
+var compareflag = false;
+var savedata = {
+    "crpdimsref": {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    },
+    "crpdims": {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    },
+    "additionaldims": {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    },
+    "boxsz":512,
+    "ff":10,
+    "pxlsarray":"",
+    "mskarray":""
+
+
+};
+
+var imagedims = {
+    "width":128,
+    "height":128
+};
+
+var changedparams = {};
+
+function undoimg(){
+    document.getElementById("sourceimg").width = backup["width"];
+    document.getElementById("sourceimg").height = backup["height"];
+    document.getElementById("source").width = backup["width"];
+    document.getElementById("source").height = backup["height"];
+    document.getElementById("source").style.left = backup["left"];
+    document.getElementById("source").style.top = backup["top"];
+    document.getElementById("sourceimg").src = backup["img"];
+    img = new Image();
+    img.onload = function() {            
+        var canvas = document.getElementById("source");
+        var ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);        
+        imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+        data = imgData.data;
+        pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            var pixel = [];
+            pixel.push(data[i]);
+            pixel.push(data[i+1]);
+            pixel.push(data[i+2]);
+            pixel.push(data[i+3]);
+            pxls.push(pixel);
+        }
+        var pxlsarray = [[]];
+        for(i = 0;i<pxls.length;i++){
+            pxlsarray[pxlsarray.length-1].push(pxls[i]);
+            if(i<pxls.length-2){
+                if((i+1)%canvas.width==0 && i>canvas.width-10){
+                    pxlsarray.push([]);
+                }
+            }
+            
+        }
+        savedata["pxlsarray"] = pxlsarray;
+    }
+    img.src = backup["img"];
+    fsimgs["main"] = backup["img"];
+    savedata["crpdims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+    savedata["additionaldims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+    document.getElementById("oldimg").src = document.getElementById("sourceimg").src;
+    document.getElementById("sourceimg").onload = function(){
+        document.getElementById("oldimg").width = document.getElementById("source").width;
+        document.getElementById("oldimg").height = document.getElementById("source").height;
+    }
+
+}
+
+function paramset(){
+   changedparams = {};
+}
+
+window.onload = function(){
+    document.getElementById("stack").style.visibility = "hidden";
+    document.getElementById("erasersize").value = 10;
+    document.getElementById("ff").value = 20;
+    document.getElementById("selectorsize").value = 512;
+    document.getElementById("selector").style.width = "512px";  
+    document.getElementById("selector").style.height = "512px";  
+    prepare();
+
+    //copied from https://jsfiddle.net/4N6D9/1/
+    document.getElementById("openimg").onchange =function(e) {
+        var file, img;   
+        if ((file = this.files[0])) {
+            img = new Image();
+            img.onload = function() {
+                document.getElementById("sourceimg").width = this.width;
+                document.getElementById("sourceimg").height = this.height;
+                document.getElementById("source").width = this.width;
+                document.getElementById("source").height = this.height;
+                var canvas = document.getElementById("source");
+                var ctx = canvas.getContext("2d");
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                var img = document.getElementById("sourceimg");
+                ctx.drawImage(img, 0, 0);
+                imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                data = imgData.data;
+                pxls = [];
+                for (let i = 0; i < data.length; i += 4) {
+                    var pixel = [];
+                    pixel.push(data[i]);
+                    pixel.push(data[i+1]);
+                    pixel.push(data[i+2]);
+                    pixel.push(data[i+3]);
+                    pxls.push(pixel);
+                }
+                var pxlsarray = [[]];
+                for(i = 0;i<pxls.length;i++){
+                    pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                    if(i<pxls.length-2){
+                        if((i+1)%canvas.width==0 && i>canvas.width-10){
+                            pxlsarray.push([]);
+                        }
+                    }
+                    
+                }
+                savedata["pxlsarray"] = pxlsarray;
+                backup["img"] = document.getElementById("sourceimg").src;
+            };
+            img.src = URL.createObjectURL(file);
+            document.getElementById("sourceimg").src = URL.createObjectURL(file);
+            document.getElementById("oldimg").src = URL.createObjectURL(file);
+            document.getElementById("uploadcontainer").style.visibility = "hidden";
+            document.getElementById("grid").style.visibility = "visible";
+            
+    
+    
+        }
+        fsimgs["main"] = document.getElementById("sourceimg").src;
+        
+    
+    }
+
+    document.getElementById("openimgadd").onchange =function(e) {
+        document.getElementById("settings").style.visibility = "hidden";
+        document.getElementById("undo").style.visibility = "hidden";
+        var file, img;
+        if ((file = this.files[0])) {
+            comporder = [];
+            document.getElementById("selector").style.visibility = "hidden";
+            var num = (document.getElementById("canvascontainer").children.length /2)+1;
+            num = String(num);
+            document.getElementById("settings2").style.visibility = "visible";
+            document.getElementById("openimgadd").style.visibility = "hidden";
+            if(!document.getElementById("openimgadd2")){
+                var newel = document.createElement("input");
+                newel.id = "openimgadd2";
+                newel.type = "file";
+                newel.onchange =function(e) {
+                    var file, img;
+                    if ((file = this.files[0])) {
+                        comporder = [];
+                        document.getElementById("selector").style.visibility = "hidden";
+                        var num = (document.getElementById("canvascontainer").children.length /2)+1;
+                        num = String(num);
+                        document.getElementById("settings2").style.visibility = "visible";
+                        var newel = document.createElement("div");
+                        newel.id = "moveimg"+num;
+                        newel.addEventListener("click",moveimgenable);
+                        newel.className = "moveimgclass txt";
+                        newel.style.left = 5+(num-1)*10+"%";
+                        var newelpar = document.createElement("p");            
+                        newelpar.innerHTML = "Move Image "+num;
+                        newelpar.className = "txt";
+                        newel.append(newelpar);
+                        document.getElementById("settings2").append(newel);
+                        newel = document.createElement("img");
+                        newel.id = "sourceimg"+num;
+                        newel.style.display = "none";
+                        document.getElementById("canvascontainer").append(newel);
+                        newel = document.createElement("canvas");
+                        newel.id = "source"+num;
+                        newel.className = "canvas";
+                        newel.style.position = "fixed";
+                        newel.style.left = parseInt(document.getElementById("source").style.left) + document.getElementById("source").width + "px";
+                        newel.style.top = document.getElementById("source").style.top;
+                        document.getElementById("canvascontainer").append(newel);
+                        img = new Image();
+                        img.src = URL.createObjectURL(file);
+                        img.onload = function() {
+                            document.getElementById("sourceimg"+num).width = this.width;
+                            document.getElementById("sourceimg"+num).height = this.height;
+                            document.getElementById("source"+num).width = this.width;
+                            document.getElementById("source"+num).height = this.height;
+                            var canvas = document.getElementById("source"+num);
+                            var ctx = canvas.getContext("2d");
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            var img = document.getElementById("sourceimg"+num);
+                            ctx.drawImage(img, 0, 0);
+                            imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                            data = imgData.data;
+                            pxls = [];
+                            for (let i = 0; i < data.length; i += 4) {
+                                var pixel = [];
+                                pixel.push(data[i]);
+                                pixel.push(data[i+1]);
+                                pixel.push(data[i+2]);
+                                pixel.push(data[i+3]);
+                                pxls.push(pixel);
+                            }
+                            var pxlsarray = [[]];
+                            for(i = 0;i<pxls.length;i++){
+                                pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                                if(i<pxls.length-2){
+                                    if((i+1)%canvas.width==0 && i>canvas.width-10){
+                                        pxlsarray.push([]);
+                                    }
+                                }
+                                
+                            }
+                        };
+                        document.getElementById("sourceimg"+num).src = URL.createObjectURL(file);
+                        fsimgs[num] = document.getElementById("sourceimg"+num).src;
+                    }
+                    
+                }
+                document.getElementById("settings2").append(newel);
+            }
+            document.getElementById("openimgadd2").style.visibility = "visible";
+            var newel = document.createElement("div");
+            newel.id = "moveimg"+num;
+            newel.addEventListener("click",moveimgenable);
+            newel.className = "moveimgclass txt";
+            newel.style.left = 5+(num-1)*10+"%";
+            var newelpar = document.createElement("p");            
+            newelpar.innerHTML = "Move Image "+num;
+            newelpar.className = "txt";
+            newel.append(newelpar);
+            document.getElementById("settings2").append(newel);
+            newel = document.createElement("img");
+            newel.id = "sourceimg"+num;
+            newel.style.display = "none";
+            document.getElementById("canvascontainer").append(newel);
+            newel = document.createElement("canvas");
+            newel.id = "source"+num;
+            newel.className = "canvas";
+            newel.style.position = "fixed";
+            newel.style.left = parseInt(document.getElementById("source").style.left) + document.getElementById("source").width + "px";
+            newel.style.top = document.getElementById("source").style.top;
+            document.getElementById("canvascontainer").append(newel);
+            img = new Image();
+            img.onload = function() {
+                document.getElementById("sourceimg"+num).width = this.width;
+                document.getElementById("sourceimg"+num).height = this.height;
+                document.getElementById("source"+num).width = this.width;
+                document.getElementById("source"+num).height = this.height;
+                var canvas = document.getElementById("source"+num);
+                var ctx = canvas.getContext("2d");
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                var img = document.getElementById("sourceimg"+num);
+                ctx.drawImage(img, 0, 0);
+                imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                data = imgData.data;
+                pxls = [];
+                for (let i = 0; i < data.length; i += 4) {
+                    var pixel = [];
+                    pixel.push(data[i]);
+                    pixel.push(data[i+1]);
+                    pixel.push(data[i+2]);
+                    pixel.push(data[i+3]);
+                    pxls.push(pixel);
+                }
+                var pxlsarray = [[]];
+                for(i = 0;i<pxls.length;i++){
+                    pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                    if(i<pxls.length-2){
+                        if((i+1)%canvas.width==0 && i>canvas.width-10){
+                            pxlsarray.push([]);
+                        }
+                    }
+                    
+                }
+            };
+            img.src = URL.createObjectURL(file);
+            document.getElementById("sourceimg"+num).src = URL.createObjectURL(file);
+            fsimgs[num] = document.getElementById("sourceimg"+num).src;
+        }
+        
+    }
+    grabwfsmodels();
+
+    
+    document.getElementById("compare").style.left = document.getElementById("source").style.left;
+    document.getElementById("compare").style.width = parseInt(document.getElementById("oldimg").width)-parseInt(document.getElementById("oldimg").width)/2 + "px";
+    document.getElementById("compare").style.height = document.getElementById("oldimg").style.height;
+    document.getElementById("sourceimg").onload = function(){
+        document.getElementById("oldimg").width = document.getElementById("sourceimg").width;
+        document.getElementById("oldimg").height = document.getElementById("sourceimg").height;
+    }
+    document.getElementById("source").style.top = "5px";
+    document.getElementById("source").style.left = "5px";
+
+
+}
+
+function prepare(){
+    fetch('http://localhost:5000/prepare'
+    ).then(function (response) {
+        responseClone = response.clone();
+        return response.json();
+    })
+    .then(data => {
+        if(data["exist"]!="yes"){
+            document.getElementById("sourceimg").src = "";
+            document.getElementById("uploadcontainer").style.height = "100%";
+            document.getElementById("uploadcontainer").style.visibility = "visible";
+            document.getElementById("uploadcontainer").style.opacity = 1;
+        }
+        else{
+            document.getElementById("uploadcontainer").style.visibility = "hidden";
+            resetimg();
+        }
+    });
+}
+
+function setreftoggle(){
+    setref = !setref;
+    if(setref){
+        document.getElementById("hint").style.visibility = "visible";
+        document.getElementById("selector").style.border = "2px solid red";
+        document.getElementById("setref").style.backgroundColor = "rgb(20,20,20)";
+        document.getElementById("saveexit").style.visibility = "hidden";
+        document.getElementById("settings").style.visibility = "hidden";
+        document.getElementById("undo").style.visibility = "hidden";
+        ll = true;
+        lr = true;
+        lt = true;
+        lb = true;
+        document.getElementById("saveexit").style.visibility = "hidden";
+        document.getElementById("hinttext").innerHTML = "Horizontal: ";
+        document.getElementById("hintinp").value = selectorsize;
+        document.getElementById("lockleft").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockright").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("locktop").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockbottom").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockbox").style.backgroundColor = "rgb(20, 20, 20)";
+
+    }
+    else{
+        document.getElementById("selector").style.border = "2px solid green";
+        document.getElementById("setref").style.backgroundColor = "rgb(80, 80, 80)";
+        ll = false;
+        lr = false;
+        lt = false;
+        lb = false;
+        document.getElementById("lockbox").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+}
+function resetimg(){
+    var canvas = document.getElementById("source");
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var img = document.getElementById("sourceimg");
+    ctx.drawImage(img, 0, 0);
+    savedata["additionaldims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    }
+}
+
+function ffupdate(){
+    savedata["ff"] = document.getElementById("ff").value;
+}
+function draw(){
+    var c = document.getElementById("source");
+    var ctx = c.getContext("2d");  
+    var erasersize = 30
+    try{
+        erasersize = parseInt(document.getElementById("erasersize").value);
+    }
+    catch(err){
+        console.log(err);
+    }        
+    if(eraseenableflag){
+        
+        var imgData = ctx.getImageData(Math.floor(mousex)-parseInt(document.getElementById('source').getBoundingClientRect()["left"]), Math.floor(mousey)-parseInt(document.getElementById('source').getBoundingClientRect()["top"]), erasersize,erasersize);
+        var data = imgData.data;
+        var pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            data[i] = avg; 
+            data[i + 1] = avg; 
+            data[i + 2] = avg; 
+            data[i + 3] = 0; 
+        }
+        ctx.putImageData(imgData, (Math.floor(mousex)-parseInt(document.getElementById('source').getBoundingClientRect()["left"]))-(erasersize/2), (Math.floor(mousey)-parseInt(document.getElementById('source').getBoundingClientRect()["top"]))-(erasersize/2));
+    }
+    else if(drawenableflag){
+        ctx.fillStyle = document.getElementById("clr").value+parseInt(document.getElementById("inprange").value).toString(16);
+        ctx.fillRect((Math.floor(mousex)-parseInt(document.getElementById('source').getBoundingClientRect()["left"]))-(erasersize/2), (Math.floor(mousey)-parseInt(document.getElementById('source').getBoundingClientRect()["top"]))-(erasersize/2),erasersize/2,erasersize/2);
+    }
+    else if(maskenableflag){
+        var cmask = document.getElementById("canvasmask");
+        var ctxmask = cmask.getContext("2d");
+        ctxmask.fillStyle = "white";
+        ctxmask.fillRect((Math.floor(mousex)-parseInt(document.getElementById('source').getBoundingClientRect()["left"]))-(erasersize/2), (Math.floor(mousey)-parseInt(document.getElementById('source').getBoundingClientRect()["top"]))-(erasersize/2),erasersize/2,erasersize/2);
+    }
+    else{
+        var selec = document.getElementById("selector");
+        selec.style.left = Math.floor(mousex)+"px";
+        selec.style.top = Math.floor(mousey)+"px";
+        /* imgData = ctx.getImageData(0, 0, c.width,c.height);
+        data = imgData.data;
+        pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            var pixel = [];
+            pixel.push(data[i]);
+            pixel.push(data[i+1]);
+            pixel.push(data[i+2]);
+            pixel.push(data[i+3]);
+            pxls.push(pixel);
+        }
+        var pxlsarray = [[]];
+        for(i = 0;i<pxls.length;i++){
+            pxlsarray[pxlsarray.length-1].push(pxls[i]);
+            if(i<pxls.length-2){
+                if((i+1)%c.width==0 && i>c.width-10){
+                    pxlsarray.push([]);
+                }
+            }
+            
+        }
+        savedata["pxlsarray"] = pxlsarray;
+
+        var cmask = document.getElementById("canvasmask");
+        var ctxmask = cmask.getContext("2d");
+        imgData = ctxmask.getImageData(0, 0, cmask.width,cmask.height);
+        data = imgData.data;
+        pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            var pixel = [];
+            pixel.push(data[i]);
+            pixel.push(data[i+1]);
+            pixel.push(data[i+2]);
+            pixel.push(data[i+3]);
+            pxls.push(pixel);
+        }
+        var mskarray = [[]];
+        for(i = 0;i<pxls.length;i++){
+            mskarray[mskarray.length-1].push(pxls[i]);
+            if(i<pxls.length-2){
+                if((i+1)%cmask.width==0 && i>cmask.width-10){
+                    mskarray.push([]);
+                }
+            }
+            
+        }
+        savedata["mskarray"] = mskarray; */
+    }
+}
+
+function saveArrays(){
+    var c = document.getElementById("source");
+    var ctx = c.getContext("2d");  
+    imgData = ctx.getImageData(0, 0, c.width,c.height);
+    data = imgData.data;
+    pxls = [];
+    for (let i = 0; i < data.length; i += 4) {
+        var pixel = [];
+        pixel.push(data[i]);
+        pixel.push(data[i+1]);
+        pixel.push(data[i+2]);
+        pixel.push(data[i+3]);
+        pxls.push(pixel);
+    }
+    var pxlsarray = [[]];
+    for(i = 0;i<pxls.length;i++){
+        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+        if(i<pxls.length-2){
+            if((i+1)%c.width==0 && i>c.width-10){
+                pxlsarray.push([]);
+            }
+        }
+        
+    }
+    savedata["pxlsarray"] = pxlsarray;
+    
+    if(maskflag){
+        var cmask = document.getElementById("canvasmask");
+        var ctxmask = cmask.getContext("2d");
+        imgData = ctxmask.getImageData(0, 0, cmask.width,cmask.height);
+        data = imgData.data;
+        pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            var pixel = [];
+            pixel.push(data[i]);
+            pixel.push(data[i+1]);
+            pixel.push(data[i+2]);
+            pixel.push(data[i+3]);
+            pxls.push(pixel);
+        }
+        var mskarray = [[]];
+        for(i = 0;i<pxls.length;i++){
+            mskarray[mskarray.length-1].push(pxls[i]);
+            if(i<pxls.length-2){
+                if((i+1)%cmask.width==0 && i>cmask.width-10){
+                    mskarray.push([]);
+                }
+            }
+            
+        }
+        savedata["mskarray"] = mskarray;
+    }
+}
+
+function drawenable(){
+    if(drawflag){
+        drawenableflag = !drawenableflag;
+    }
+    else if(eraseflag){
+        eraseenableflag = !eraseenableflag;
+    }
+    else if(maskflag){
+        maskenableflag= !maskenableflag;
+    }
+}
+
+
+
+
+function changesize(e){
+    if(drawflag || eraseflag || maskflag){
+        if(e.deltaY < 0){
+            document.getElementById("erasersize").value = parseInt(document.getElementById("erasersize").value) + 1;
+        }
+        else{
+            if(parseInt(document.getElementById("erasersize").value)-1>0){
+                document.getElementById("erasersize").value = parseInt(document.getElementById("erasersize").value) - 1;
+            }
+        }
+    }
+    else if(!moveimgenableflag){
+        if(cropflag || setref || textflag || gligenflag){
+            if(cropcount==0){
+                if(e.deltaY < 0 && parseInt(document.getElementById("selectorsize").value)+10<= parseInt(document.getElementById("source").width)){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) + 10;
+                    selectorsize = document.getElementById("selectorsize").value;
+                    savedata["boxsz"] = selectorsize;
+                    document.getElementById("selector").style.width = selectorsize+"px";                   
+                }
+                else if(e.deltaY < 0 && parseInt(document.getElementById("selectorsize").value)+10> parseInt(document.getElementById("source").width)){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("source").width);
+                    selectorsize = document.getElementById("selectorsize").value;
+                    savedata["boxsz"] = selectorsize;
+                    document.getElementById("selector").style.width = selectorsize+"px";   
+                }
+                else{
+                    if(parseInt(document.getElementById("selectorsize").value)-1>0){
+                        document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) - 10;
+                        selectorsize = document.getElementById("selectorsize").value;
+                        savedata["boxsz"] = selectorsize;
+                        document.getElementById("selector").style.width = selectorsize+"px";  
+                    }
+                }
+                document.getElementById("hinttext").innerHTML = "Horizontal: ";
+                document.getElementById("hintinp").value = selectorsize;
+            }
+            else if(cropcount==1){
+                if(e.deltaY < 0 && parseInt(document.getElementById("selectorsize").value)+10<= parseInt(document.getElementById("source").height)){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) + 10;
+                    selectorsize = document.getElementById("selectorsize").value;
+                    savedata["boxsz"] = selectorsize;
+                    document.getElementById("selector").style.height = selectorsize+"px";                   
+                }
+                else if(e.deltaY < 0 && parseInt(document.getElementById("selectorsize").value)+10> parseInt(document.getElementById("source").height)){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("source").height);
+                    selectorsize = document.getElementById("selectorsize").value;
+                    savedata["boxsz"] = selectorsize;
+                    document.getElementById("selector").style.height = selectorsize+"px"; 
+                }
+                else{
+                    if(parseInt(document.getElementById("selectorsize").value)-10>0){
+                        document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) - 10;
+                        selectorsize = document.getElementById("selectorsize").value;
+                        savedata["boxsz"] = selectorsize;
+                        document.getElementById("selector").style.height = selectorsize+"px";  
+                    }
+                }
+                document.getElementById("hinttext").innerHTML = "Vertical: ";
+                document.getElementById("hintinp").value = selectorsize;
+            }
+        }
+        else{
+            if(e.deltaY < 0){
+                if(!lockflag){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) + 64;
+                    changeselectorsize(event);
+                }
+                else if(lockflag && parseInt(document.getElementById("selectorsize").value)+64<= parseInt(document.getElementById("source").width) && parseInt(document.getElementById("selectorsize").value)+64<= parseInt(document.getElementById("source").height)){
+                    document.getElementById("selector").style.left = parseFloat(document.getElementById("source").style.left) + Math.floor(selectorsize/2)+"px";
+                    document.getElementById("selector").style.top = parseFloat(document.getElementById("source").style.top) + Math.floor(selectorsize/2)+"px";
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) + 64;
+                    changeselectorsize(event);
+                    
+                } 
+            }
+            else{
+                if(parseInt(document.getElementById("selectorsize").value)-64>0){
+                    document.getElementById("selectorsize").value = parseInt(document.getElementById("selectorsize").value) - 64;
+                    changeselectorsize(event);
+                }
+            }
+        }
+    }
+    else if(moveimgenableflag){
+        var canvas = document.getElementById("source"+imagetomove);
+        var ctx = canvas.getContext("2d");
+        if(e.deltaY < 0){      
+            if(parseFloat(document.getElementById("source"+imagetomove).width)>parseFloat(document.getElementById("source"+imagetomove).height)){
+                let r =  parseFloat(document.getElementById("source"+imagetomove).width)/parseFloat(document.getElementById("source"+imagetomove).height);
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) + 10;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) + 10/r;
+            }
+            else if(parseFloat(document.getElementById("source"+imagetomove).width)<parseFloat(document.getElementById("source"+imagetomove).height)){ 
+                let r =  parseFloat(document.getElementById("source"+imagetomove).height)/parseFloat(document.getElementById("source"+imagetomove).width);
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) + 10/r;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) + 10;
+            }
+            else{
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) + 10;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) + 10;
+            }
+            
+        }  
+        else if(e.deltaY > 0){
+            if(parseFloat(document.getElementById("source"+imagetomove).width)>parseFloat(document.getElementById("source"+imagetomove).height)){
+                let r =  parseFloat(document.getElementById("source"+imagetomove).width)/parseFloat(document.getElementById("source"+imagetomove).height);
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) - 10;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) - 10/r;
+            }
+            else if(parseFloat(document.getElementById("source"+imagetomove).width)<parseFloat(document.getElementById("source"+imagetomove).height)){
+                let r =  parseFloat(document.getElementById("source"+imagetomove).height)/parseFloat(document.getElementById("source"+imagetomove).width);
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) - 10/r;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) - 10;
+            }
+            else{
+                document.getElementById("source"+imagetomove).width = parseFloat(document.getElementById("source"+imagetomove).width) - 10;
+                document.getElementById("source"+imagetomove).height = parseFloat(document.getElementById("source"+imagetomove).height) - 10;
+            }
+            
+        
+        }    
+        if(e.deltaX < 0){      
+            if(imgflip==false){
+                ctx.translate(canvas.width, 0);
+                imgflip = true;
+                ctx.scale(-1, 1);
+        
+            }
+            else{
+                imgflip = false;
+                
+            }         
+            
+        
+        }  
+        else if(e.deltaX > 0){      
+            if(imgflip==false){
+                ctx.translate(0, canvas.height);
+                imgflip = true;
+                ctx.scale(1, -1);
+        
+            }            
+            else{
+                imgflip = false;
+                
+            }         
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var img = new Image;
+        if(imagetomove==""){
+            img.src = fsimgs["main"];
+        }
+        else{
+            img.src = fsimgs[imagetomove];
+        }
+        
+        img.onload = function(){
+            ctx.drawImage(img, 0, 0, img.width,img.height,0, 0, canvas.width, canvas.height);
+            document.getElementById("sourceimg"+imagetomove).src = canvas.toDataURL();
+            document.getElementById("oldimg").width = canvas.width;
+            document.getElementById("oldimg").height = canvas.height;
+            document.getElementById("oldimg").src = canvas.toDataURL();
+
+        }
+           
+    
+    }
+}
+
+function erasemodeon(){
+    if(eraseflag){
+        saveArrays();
+        document.getElementById("sourceimg").src = document.getElementById("source").toDataURL();
+        fsimgs["main"] = document.getElementById("sourceimg").src;
+        document.getElementById("selector").style.visibility = "visible";
+        document.getElementById("moveimglistner").style.visibility = "visible";
+        document.getElementById("eraseon").style.backgroundColor = "rgb(80, 80, 80)";
+        eraseflag = !eraseflag
+    }
+    else{
+        if(drawflag==false && moveimgenableflag==false && maskflag==false){
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("moveimglistner").style.visibility = "hidden";
+            document.getElementById("eraseon").style.backgroundColor = "rgb(20, 20, 20)";
+            eraseflag = !eraseflag
+        }
+    }
+}
+
+function drawmodeon(){
+    if(drawflag){
+        saveArrays();
+        document.getElementById("sourceimg").src = document.getElementById("source").toDataURL();
+        fsimgs["main"] = document.getElementById("sourceimg").src;
+        document.getElementById("selector").style.visibility = "visible";
+        document.getElementById("moveimglistner").style.visibility = "visible";
+        document.getElementById("drawon").style.backgroundColor = "rgb(80, 80, 80)";
+        drawflag = !drawflag
+    }
+    else{
+        if(eraseflag==false && moveimgenableflag==false && maskflag==false){
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("moveimglistner").style.visibility = "hidden";
+            document.getElementById("drawon").style.backgroundColor = "rgb(20, 20, 20)";
+            drawflag = !drawflag
+        }
+    }
+}
+
+function maskmodeon(){
+    if(maskflag){
+        saveArrays();
+        document.getElementById("canvasmask").remove();
+        document.getElementById("sourceimg").src = document.getElementById("source").toDataURL();
+        fsimgs["main"] = document.getElementById("sourceimg").src;
+        document.getElementById("selector").style.visibility = "visible";
+        document.getElementById("moveimglistner").style.visibility = "visible";
+        document.getElementById("maskon").style.backgroundColor = "rgb(80, 80, 80)";
+        maskflag = !maskflag
+    }
+    else{
+        if(eraseflag==false && moveimgenableflag==false && drawflag==false){
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("moveimglistner").style.visibility = "hidden";
+            document.getElementById("maskon").style.backgroundColor = "rgb(20, 20, 20)";
+            var cmask = document.createElement("canvas");
+            cmask.id = "canvasmask";
+            cmask.style.position = "fixed";
+            cmask.style.left = document.getElementById("source").style.left;
+            cmask.style.top = document.getElementById("source").style.top;
+            cmask.style.zIndex = "1000";
+            cmask.onclick = function(){
+                console.log(maskenableflag);
+                drawenable();
+            }
+            cmask.onmousemove = function(){
+                draw();
+            }
+            cmask.width = document.getElementById("source").width;
+            cmask.height = document.getElementById("source").height;
+            document.getElementById("canvascontainer").append(cmask);
+            maskflag = !maskflag
+        }
+    }
+}
+
+function saveimg(){
+    var canvas = document.getElementById("source");
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var img = document.getElementById("sourceimg");
+    ctx.drawImage(img, 0, 0);
+    imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+    data = imgData.data;
+    pxls = [];
+    for (let i = 0; i < data.length; i += 4) {
+        var pixel = [];
+        pixel.push(data[i]);
+        pixel.push(data[i+1]);
+        pixel.push(data[i+2]);
+        pixel.push(data[i+3]);
+        pxls.push(pixel);
+    }
+    var pxlsarray = [[]];
+    for(i = 0;i<pxls.length;i++){
+        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+        if(i<pxls.length-2){
+            if((i+1)%canvas.width==0 && i>canvas.width-10){
+                pxlsarray.push([]);
+            }
+        }
+        
+    }
+    savedata["pxlsarray"] = pxlsarray;
+    fetch('http://localhost:5000/saveimg',{
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({"pixels":savedata["pxlsarray"]})
+    })
+    .then(function (response){
+        return response.json();
+    })
+    .then(data=>{
+    });
+}
+
+function grabwfsmodels(id = "", paramsdata={},j="", addtype=""){
+    fetch('http://localhost:5000/grabwfsmodels')
+    .then(function (response){
+        return response.json();
+    })
+    .then(data=>{
+        if(id==""){
+            for(let i =0;i<data["wfs"].length;i++){
+                var el = document.createElement("a");
+                el.innerHTML =  data["wfs"][i];
+                el.onclick = function(evt){
+                    selwf = evt.target.innerHTML;
+                    document.getElementById("wfbutton").innerHTML = evt.target.innerHTML;
+                    paramset();
+                }
+                document.getElementById("wfscont").append(el);
+            }
+        }
+        if(id=="" || addtype=="model"){
+            for(let i =0;i<data["models"].length;i++){
+                var el = document.createElement("a");
+                el.innerHTML =  data["models"][i];
+                if(["Unets","Diffusers Models","Checkpoints"].includes(data["models"][i])){
+                    el.style.background = "rgb(50,50,50)";
+                    el.style.color = "white";
+                }
+                else{
+                    el.onclick = function(evt){
+                        selmod = evt.target.innerHTML;
+                        document.getElementById("modelbutton"+id).innerHTML = evt.target.innerHTML;
+                        if(id!=""){
+                            if(changedparams[id]==undefined){
+                                changedparams[id] = {};
+                            }
+                            changedparams[id][Object.keys(paramsdata["prompt_workflow"][id]["inputs"])[j]] = evt.target.innerHTML;
+                        }
+                    }
+                }
+                document.getElementById("modelscont"+id).append(el);
+            }
+        }
+        if(id!="" && addtype=="lora"){
+            for(let i =0;i<data["loras"].length;i++){
+                var el = document.createElement("a");
+                el.innerHTML =  data["loras"][i];
+                el.onclick = function(evt){
+                    sellora = evt.target.innerHTML;
+                    document.getElementById("lorabutton"+id).innerHTML = evt.target.innerHTML;                    
+                    if(changedparams[id]==undefined){
+                        changedparams[id] = {};
+                    }
+                    changedparams[id][Object.keys(paramsdata["prompt_workflow"][id]["inputs"])[j]] = evt.target.innerHTML;                    
+                }
+                document.getElementById("lorascont"+id).append(el);
+            }
+        }
+    });
+}
+
+
+function generate(){
+    let gligenparamsarray = [];
+    for(let i =0;i< Object.keys(gligenparams).length;i++){
+        gligenparamsarray.push(gligenparams[Object.keys(gligenparams)[i]]);
+    }
+    fetch('http://localhost:5000/generate', {
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({"wf":selwf,"model":selmod,"params":params,"gligparams":gligenparamsarray,"lora":sellora,"changedparams":changedparams})
+    })
+    .then(function (response){
+        return response.json();
+    })
+    .then(data=>{
+    });
+}
+
+function cancelgen(){
+    fetch('http://localhost:5000/cancelgen')
+    .then(function (response){
+        return response.json();
+    })
+    .then(data=>{
+        document.getElementById("blockactions").style.visibility = "hidden";
+    });
+}
+function saved(savedata){
+    var responseClone;   
+    var canvas = document.getElementById("source");
+    var ctx = canvas.getContext("2d");
+    imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+    data = imgData.data;
+    pxls = [];
+    for (let i = 0; i < data.length; i += 4) {
+        var pixel = [];
+        pixel.push(data[i]);
+        pixel.push(data[i+1]);
+        pixel.push(data[i+2]);
+        pixel.push(data[i+3]);
+        pxls.push(pixel);
+    }
+    var pxlsarray = [[]];
+    for(i = 0;i<pxls.length;i++){
+        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+        if(i<pxls.length-2){
+            if((i+1)%canvas.width==0 && i>canvas.width-10){
+                pxlsarray.push([]);
+            }
+        }
+        
+    }
+    savedata["pxlsarray"] = pxlsarray;
+    fetch('http://localhost:5000/savedata', {
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({"savedata":savedata,"selectorsize":selectorsize,"taesd":taesd,"img2img":img2img})
+    })
+    .then(function (response) {
+        responseClone = response.clone(); 
+        return response.json();
+    })
+    .then(data => {
+        if(!generating){
+            document.getElementById("settings").style.visibility = "hidden";
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("saveexit").style.visibility = "hidden";
+            document.getElementById("undo").style.visibility = "hidden";
+            document.getElementById("moveimglistner").style.visibility = "hidden";
+            document.getElementById("cancel").style.visibility = "visible";
+            generating = true;
+            document.getElementById("aura").style.visibility = "visible";
+            document.getElementById("aura").style.opacity = "1";
+            auraAnimate(300);
+        }
+        img2img = data["img2img"];
+        if(genflag==false && loneFlag==false){
+            generate();
+            genflag = true;
+            document.getElementById("blockactions").style.visibility = "visible";
+        }
+        if(data["taesd"]=="no"){
+            if(data["flag"]=="False"){
+                if(document.getElementById("taesdcanvas")){
+                    var canvas = document.getElementById("taesdcanvas");
+                }
+                else{
+                    var canvas = document.createElement("canvas");
+                    canvas.id = "taesdcanvas";
+                    canvas.width = data["width"];
+                    canvas.height = data["height"];
+                    canvas.style.left = boxleft;
+                    canvas.style.top = boxtop;
+                    if(data["img2img"]=="img2img"){
+                        img2img = "img2img";
+                        canvas.style.zIndex = "4";
+                    }
+                    document.getElementById("canvascontainer").append(canvas);
+                }
+                img = new Image();
+                img.onload = function() {
+                    canvas = document.getElementById("taesdcanvas");
+                    var ctx = canvas.getContext("2d");
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(img, 0, 0);
+                }
+                img.src = data["img"];
+
+                
+            }
+            else{
+                if(canvasflag){
+                    backup["width"] = document.getElementById("source").width;
+                    backup["height"] = document.getElementById("source").height;
+                    backup["left"] = document.getElementById("source").style.left;
+                    backup["top"] = document.getElementById("source").style.top;
+                    backup["img"] = document.getElementById("sourceimg").src;
+    
+                    document.getElementById("sourceimg").width = data["width"];
+                    document.getElementById("sourceimg").height =data["height"];
+                    document.getElementById("source").width = data["width"];
+                    document.getElementById("source").height = data["height"];
+                }
+                canvasflag = false;
+    
+    
+    
+                document.getElementById("sourceimg").src = data["img"];
+                img = new Image();
+                img.onload = function() {            
+                    var canvas = document.getElementById("source");
+                    var ctx = canvas.getContext("2d");
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    var img = document.getElementById("sourceimg");
+                    ctx.drawImage(img, 0, 0);
+                    imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                    data = imgData.data;
+                    pxls = [];
+                    for (let i = 0; i < data.length; i += 4) {
+                        var pixel = [];
+                        pixel.push(data[i]);
+                        pixel.push(data[i+1]);
+                        pixel.push(data[i+2]);
+                        pixel.push(data[i+3]);
+                        pxls.push(pixel);
+                    }
+                    var pxlsarray = [[]];
+                    for(i = 0;i<pxls.length;i++){
+                        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                        if(i<pxls.length-2){
+                            if((i+1)%canvas.width==0 && i>canvas.width-10){
+                                pxlsarray.push([]);
+                            }
+                        }
+                        
+                    }
+                    savedata["pxlsarray"] = pxlsarray;
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(img, 0, 0);
+                    fsimgs["main"] = canvas.toDataURL();
+                }
+                img.src = data["img"];
+
+            }
+            
+        }
+        
+        if(data["flag"]=="False"){
+            taesd = "true";
+            setTimeout(() => {
+                saved(savedata);
+            }, 100);
+        }
+        else{
+            document.getElementById("aura").style.opacity = "0";
+            document.getElementById("aura").style.visibility = "hidden";
+            generating = false;
+            document.getElementById("settings").style.visibility = "visible";
+            document.getElementById("selector").style.visibility = "visible";
+            document.getElementById("undo").style.visibility = "visible";
+            document.getElementById("moveimglistner").style.visibility = "visible";
+            document.getElementById("cancel").style.visibility = "hidden";
+            taesd = "false";
+            canvasflag = true;
+            genflag = false;
+            boxleft = "";
+            boxtop = "";
+            params = {};
+            if(parseInt(data["data"]["additionaldims"]["left"])!=0){
+                document.getElementById("source").style.left = parseFloat(document.getElementById("source").style.left) - parseInt(data["data"]["additionaldims"]["left"]) +"px";
+                document.getElementById("compare").style.left = parseFloat(document.getElementById("source").style.left) - parseInt(data["data"]["additionaldims"]["left"]) +"px";
+            }
+            else{
+                document.getElementById("compare").style.left = parseFloat(document.getElementById("source").style.left)+"px";
+            }
+            if(parseInt(data["data"]["additionaldims"]["top"])!=0){
+                document.getElementById("source").style.top = parseFloat(document.getElementById("source").style.top) - parseInt(data["data"]["additionaldims"]["top"]) +"px";
+                document.getElementById("compare").style.top = parseFloat(document.getElementById("source").style.top) - parseInt(data["data"]["additionaldims"]["top"]) +"px"
+            }
+            else{
+                document.getElementById("compare").style.top = parseFloat(document.getElementById("source").style.top)+"px";
+            }
+            try{
+                if(document.getElementById("taesdcanvas")!=undefined || document.getElementById("taesdcanvas")){
+                    document.getElementById("taesdcanvas").remove();
+                }
+            }
+            catch(error){
+                console.log(error);
+            }
+            savedata["crpdims"] = {
+                "left":0,
+                "top": 0,
+                "right":0,
+                "bottom":0
+            };
+            
+            savedata["additionaldims"] = {
+                "left":0,
+                "top": 0,
+                "right":0,
+                "bottom":0
+            };           
+            document.getElementById("paramsbutton").innerHTML = "Change Parameter";
+            document.getElementById("paramvalue").value = "";
+            document.getElementById("blockactions").style.visibility = "hidden";
+
+        }
+        
+
+
+    }, function (rejectionReason) { 
+        responseClone.text() 
+        .then(function (bodyText) {
+            console.log('Received the following instead of valid JSON:', bodyText);
+        });
+    });
+    
+}
+function mousecoordinates(event){
+    prevmousex = mousex;
+    prevmousey =mousey;
+    mousex = event.clientX;
+    mousey = event.clientY;
+    
+    
+}
+
+function setLone(){
+    loneFlag = !loneFlag;
+    if(!loneFlag){
+        document.getElementById("lone").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+    else{
+        document.getElementById("lone").style.backgroundColor = "rgb(20,20,20)";
+    }
+}
+
+function selector(){
+    var selec = document.getElementById("selector");
+    selec.style.left = Math.floor(mousex)+"px";
+    selec.style.top = Math.floor(mousey)+"px";
+    if(lockflag==false){
+        if((parseFloat(document.getElementById("selector").style.left)-(selectorsize/2))<0){
+            selec.style.left = Math.floor(selectorsize/2)+"px";
+        }
+        if((parseFloat(document.getElementById('selector').getBoundingClientRect()["right"])-(selectorsize/2))>parseInt(screen.availWidth)){
+            selec.style.left = parseInt(screen.availWidth)-selectorsize+"px";
+        }
+        if((parseFloat(document.getElementById("selector").style.top)-(selectorsize/2))<0){
+            selec.style.top = Math.floor(selectorsize/2)+"px";
+        }
+        if((parseFloat(document.getElementById('selector').getBoundingClientRect()["bottom"])-(selectorsize/2))>parseInt(screen.availHeight)){
+            selec.style.bottom = parseInt(screen.availHeight)-selectorsize+"px";
+        }
+    }
+    
+    if(cropflag || setref || textflag || gligenflag){
+        if(ll){
+            if((parseFloat(document.getElementById("selector").style.left)-parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("width"))/2))<parseFloat(document.getElementById("source").style.left)){
+                selec.style.left = parseFloat(document.getElementById("source").style.left) + parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("width"))/2)+"px";
+            }
+        }
+        if(lr){
+            if((parseFloat(document.getElementById('selector').getBoundingClientRect()["right"]))>parseFloat(document.getElementById('source').getBoundingClientRect()["right"])){
+                selec.style.left = parseFloat(document.getElementById("source").style.left)+parseFloat(document.getElementById("source").width) - parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("width"))/2)+"px";
+            }
+        }
+        if(lt){
+            if((parseFloat(document.getElementById("selector").style.top)-parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("height"))/2))<parseFloat(document.getElementById("source").style.top)){
+                selec.style.top = parseFloat(document.getElementById("source").style.top) + parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("height"))/2)+"px";
+            }
+        }
+        if(lb){
+            if((parseFloat(document.getElementById('selector').getBoundingClientRect()["bottom"]))>parseFloat(document.getElementById('source').getBoundingClientRect()["bottom"])){
+                selec.style.top = parseFloat(document.getElementById("source").style.top)+parseFloat(document.getElementById("source").height) - parseInt(parseInt(window.getComputedStyle(selec).getPropertyValue("height"))/2)+"px";
+            }
+        }
+    }
+    else{
+        if(!grid){
+            if(ll){
+                if((parseFloat(document.getElementById("selector").style.left)-(selectorsize/2))<parseFloat(document.getElementById("source").style.left)){
+                    selec.style.left = parseFloat(document.getElementById("source").style.left) + Math.floor(selectorsize/2)+1+"px";
+                }
+            }
+            if(lr){
+                if((parseFloat(document.getElementById('selector').getBoundingClientRect()["right"]))>parseFloat(document.getElementById('source').getBoundingClientRect()["right"])){
+                    selec.style.left = parseFloat(document.getElementById("source").style.left)+parseFloat(document.getElementById("source").width) - Math.floor(selectorsize/2) +"px";
+                }
+            }
+            if(lt){
+                if((parseFloat(document.getElementById("selector").style.top)-(selectorsize/2))<parseFloat(document.getElementById("source").style.top)){
+                    selec.style.top = parseFloat(document.getElementById("source").style.top) + Math.floor(selectorsize/2)+"px";
+                }
+            }
+            if(lb){
+                if((parseFloat(document.getElementById('selector').getBoundingClientRect()["bottom"]))>parseFloat(document.getElementById('source').getBoundingClientRect()["bottom"])){
+                    selec.style.top = parseFloat(document.getElementById("source").style.top)+parseFloat(document.getElementById("source").height) - Math.floor(selectorsize/2)+"px";
+                }
+            }
+        }
+        else{
+            let closestx = 10000;
+            let closesty = 10000;
+            let pointx = 0;
+            let pointy = 0;
+            for(let i=0;i<gridpoints.length;i++){
+                if(Math.abs(gridpoints[i][0]-mousex)<closestx){
+                    closestx=Math.abs(gridpoints[i][0]-mousex);
+                    pointx = gridpoints[i][0];
+                }
+            }
+            for(let i=0;i<gridpoints.length;i++){
+                if(Math.abs(gridpoints[i][1]-mousey)<closesty){
+                    closesty=Math.abs(gridpoints[i][1]-mousey);
+                    pointy = gridpoints[i][1];
+                }
+            }
+            selec.style.left = pointx+"px";
+            selec.style.top = pointy+"px";
+        }
+    }
+     
+    
+    
+}
+
+
+function imgmover(){
+    if(!compareflag && !grid){    
+        var selec = document.getElementById("source"+imagetomove);
+        if(mousex>prevmousex){
+            selec.style.left = parseInt(selec.getBoundingClientRect()["left"])+10+"px";
+        }
+        else if(mousex<prevmousex){
+            selec.style.left = parseInt(selec.getBoundingClientRect()["left"])-10+"px";
+        }
+        if(mousey>prevmousey){
+            selec.style.top = parseInt(selec.getBoundingClientRect()["top"])+10+"px";
+        }
+        else if(mousey<prevmousey){
+            selec.style.top = parseInt(selec.getBoundingClientRect()["top"])-10+"px";
+        } 
+        let addleft = 0;
+        let addtop = 0; 
+        try{
+            if(parseInt(data["data"]["additionaldims"]["left"])!=0){
+                addleft = parseInt(data["data"]["additionaldims"]["left"]) +"px";
+            }
+            if(parseInt(data["data"]["additionaldims"]["top"])!=0){
+                addtop =  parseInt(data["data"]["additionaldims"]["top"]) +"px";
+            }
+        } 
+        catch(error){
+
+        }
+        document.getElementById("compare").style.left = parseInt(selec.style.left)-addleft+"px";
+        document.getElementById("compare").style.top = parseInt(selec.style.top)-addtop+"px";
+        document.getElementById("hint").style.left = parseInt(selec.style.left) +"px";
+        document.getElementById("hint").style.top = parseInt(selec.style.top) - 100 +"px";
+        document.getElementById("textinput").style.left = parseInt(selec.style.left) +"px";
+        document.getElementById("textinput").style.top = parseInt(selec.style.top) - 200 +"px";
+        document.getElementById("gligencont").style.left = parseInt(selec.getBoundingClientRect()["right"]) + 120 +"px";
+        document.getElementById("gligencont").style.top = parseInt(selec.style.top) +"px";
+    } 
+    else if(!compareflag && grid){
+        var selec = document.getElementById("source"+imagetomove);
+        let closestx = 10000;
+        let closesty = 10000;
+        let pointx = 0;
+        let pointy = 0;
+        for(let i=0;i<gridpoints.length;i++){
+            if(Math.abs(gridpoints[i][0]-mousex)<closestx){
+                closestx=Math.abs(gridpoints[i][0]-mousex);
+                pointx = gridpoints[i][0];
+            }
+        }
+        for(let i=0;i<gridpoints.length;i++){
+            if(Math.abs(gridpoints[i][1]-mousey)<closesty){
+                closesty=Math.abs(gridpoints[i][1]-mousey);
+                pointy = gridpoints[i][1];
+            }
+        }
+        selec.style.left = pointx+"px";
+        selec.style.top = pointy+"px";
+        let addleft = 0;
+        let addtop = 0; 
+        try{
+            if(parseInt(data["data"]["additionaldims"]["left"])!=0){
+                addleft = parseInt(data["data"]["additionaldims"]["left"]) +"px";
+            }
+            if(parseInt(data["data"]["additionaldims"]["top"])!=0){
+                addtop =  parseInt(data["data"]["additionaldims"]["top"]) +"px";
+            }
+        } 
+        catch(error){
+
+        }
+        document.getElementById("compare").style.left = parseInt(selec.style.left)-addleft+"px";
+        document.getElementById("compare").style.top = parseInt(selec.style.top)-addtop+"px";
+        document.getElementById("hint").style.left = parseInt(selec.style.left) +"px";
+        document.getElementById("hint").style.top = parseInt(selec.style.top) - 100 +"px";
+        document.getElementById("textinput").style.left = parseInt(selec.style.left) +"px";
+        document.getElementById("textinput").style.top = parseInt(selec.style.top) - 200 +"px";
+        document.getElementById("gligencont").style.left = parseInt(selec.getBoundingClientRect()["right"]) + 120 +"px";
+        document.getElementById("gligencont").style.top = parseInt(selec.style.top) +"px";
+    }
+    else{
+        if(mousex>prevmousex){
+            if(parseInt(document.getElementById("compare").style.width) + 10<=parseInt(document.getElementById("oldimg").width)){
+                document.getElementById("compare").style.width = parseInt(document.getElementById("compare").style.width) + 10 +"px";
+            }
+            else{
+                document.getElementById("compare").style.width = parseInt(document.getElementById("oldimg").width) +"px";
+            }
+        }
+        else if(mousex<prevmousex){
+            if(parseInt(document.getElementById("compare").style.width) - 10>=0){
+                document.getElementById("compare").style.width = parseInt(document.getElementById("compare").style.width) - 10 +"px";
+            }
+            else{
+                document.getElementById("compare").style.width = "0px";
+            }
+        }
+    }
+}
+function snapshot(){
+    imagedims["width"] = parseInt(document.getElementById('source').width);
+    imagedims["height"] = parseInt(document.getElementById('source').height);
+    if(cropflag || setref || textflag || gligenflag){
+        let oldleft = savedata["crpdims"]["left"];
+        let oldright = savedata["crpdims"]["right"];
+        let oldtop = savedata["crpdims"]["top"];
+        let oldbottom = savedata["crpdims"]["bottom"];
+        savedata["crpdims"]["left"] = (parseFloat(document.getElementById("selector").style.left)-(parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("width"))/2)))-document.getElementById('source').getBoundingClientRect()["left"];
+        savedata["crpdims"]["right"] = (parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("width"))/1)) + ((parseFloat(document.getElementById("selector").style.left)-(parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("width"))/2)))-parseFloat(document.getElementById('source').getBoundingClientRect()["left"]));
+        savedata["crpdims"]["top"] = (parseFloat(document.getElementById("selector").style.top)-(parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("height"))/2)))-document.getElementById('source').getBoundingClientRect()["top"];
+        savedata["crpdims"]["bottom"] = (((parseFloat(document.getElementById("selector").style.top)-(parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("height"))/2)))-document.getElementById('source').getBoundingClientRect()["top"])+(parseInt(parseInt(window.getComputedStyle(document.getElementById("selector")).getPropertyValue("height"))/1)));
+        if(cropcount==1){
+            if(setref){
+                document.getElementById("settings").style.visibility = "visible";
+                document.getElementById("undo").style.visibility = "visible";
+                document.getElementById("hint").style.visibility = "hidden";
+                cropcount = 0;
+                document.getElementById("lockbox").style.background = "rgb(80, 80, 80)";
+                lockflag = false;
+                ll = false;
+                lr = false;
+                lt = false;
+                lb = false;
+                savedata["crpdimsref"] = {
+                    "left":savedata["crpdims"]["left"],
+                    "top": savedata["crpdims"]["top"],
+                    "right":savedata["crpdims"]["right"],
+                    "bottom":savedata["crpdims"]["bottom"]
+                };
+                setref = false;
+                document.getElementById("setref").style.backgroundColor = "rgb(80, 80, 80)";
+                document.getElementById("selector").style.border = "2px solid green";
+                changeselectorsize(event);
+            }
+            else if(textflag){  
+                cropcount = 0;    
+                let d = {
+                    "x":savedata["crpdims"]["left"],
+                    "y": savedata["crpdims"]["top"],
+                    "width":savedata["crpdims"]["right"]-savedata["crpdims"]["left"],
+                    "height":savedata["crpdims"]["bottom"]-savedata["crpdims"]["top"],
+                    "text":document.getElementById("textinp").value
+                };
+                document.getElementById("hinttext").innerHTML = "Horizontal: ";
+                document.getElementById("hintinp").value = selectorsize;
+                let el = document.createElement("div");
+                el.id = "gligen_"+(textnum);
+                textadded[el.id]=d;
+                textnum++;
+                el.className = "gligcond";
+                el.innerHTML = document.getElementById("textinp").value;
+                let canvas = document.getElementById("gligencanvas");
+                let ctx = canvas.getContext("2d");
+                let sz =  savedata["crpdims"]["bottom"] - savedata["crpdims"]["top"];
+                sz = Math.floor((savedata["crpdims"]["right"] - savedata["crpdims"]["left"]));
+                ctx.font = sz+"px Arial";
+                ctx.font = "italic small-caps 50px 12px arial";
+                ctx.fillStyle = document.getElementById("clr").value+parseInt(document.getElementById("inprange").value).toString(16);
+                ctx.textBaseline = "middle";
+                ctx.fillText(document.getElementById("textinp").value,savedata["crpdims"]["left"],Math.floor((savedata["crpdims"]["top"]))+d["height"]/2);
+                el.addEventListener("click", function(e){
+                    document.getElementById("gligencanvas").remove();
+                    canvas = document.createElement("canvas");
+                    canvas.width = document.getElementById("source").width;
+                    canvas.height = document.getElementById("source").height;
+                    canvas.style.left = document.getElementById("source").style.left;
+                    canvas.style.top = document.getElementById("source").style.top;
+                    canvas.style.zIndex = "1";
+                    canvas.style.position = "fixed";
+                    canvas.id = "gligencanvas";
+                    document.getElementById("canvascontainer").append(canvas);
+                    let ctx = canvas.getContext("2d");
+                    ctx.drawImage(document.getElementById("source"), 0, 0);
+                    delete textadded[e.target.id];
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(document.getElementById("source"), 0, 0);
+                    for(let i = 0;i<Object.keys(textadded).length;i++){
+                        ctx.font = sz+"px Arial";
+                        ctx.font = "italic small-caps 50px 12px arial";
+                        ctx.fillStyle = document.getElementById("clr").value+parseInt(document.getElementById("inprange").value).toString(16);
+                        ctx.textBaseline = "middle";
+                        ctx.fillText(textadded[Object.keys(textadded)[i]]["text"],textadded[Object.keys(textadded)[i]]["x"], textadded[Object.keys(textadded)[i]]["y"]+textadded[Object.keys(textadded)[i]]["height"]/2);                 
+                    }
+                    this.remove();
+                });
+                document.getElementById("gligencont").append(el);
+            }
+            else if(gligenflag){
+                cropcount = 0;
+                let d = {
+                    "x":savedata["crpdims"]["left"],
+                    "y": savedata["crpdims"]["top"],
+                    "width":savedata["crpdims"]["right"]-savedata["crpdims"]["left"],
+                    "height":savedata["crpdims"]["bottom"]-savedata["crpdims"]["top"],
+                    "text":document.getElementById("textinp").value
+                };
+                document.getElementById("hinttext").innerHTML = "Horizontal: ";
+                document.getElementById("hintinp").value = selectorsize;
+                let el = document.createElement("div");
+                el.id = "gligen_"+(gligennum);
+                gligenparams[el.id]=d;
+                gligennum++;
+                el.className = "gligcond";
+                el.innerHTML = document.getElementById("textinp").value;
+                let canvas = document.getElementById("gligencanvas");
+                let ctx = canvas.getContext("2d");
+                ctx.beginPath();
+                ctx.rect(savedata["crpdims"]["left"], savedata["crpdims"]["top"], savedata["crpdims"]["right"]-savedata["crpdims"]["left"], savedata["crpdims"]["bottom"]-savedata["crpdims"]["top"]);
+                ctx.strokeStyle = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
+                ctx.lineWidth = 3;
+                ctx.stroke();
+                ctx.font = "25px Arial";
+                ctx.fillStyle = "red";
+                ctx.fillText(document.getElementById("textinp").value,savedata["crpdims"]["left"], savedata["crpdims"]["top"]+20);
+                el.addEventListener("click", function(e){
+                    document.getElementById("gligencanvas").remove();
+                    canvas = document.createElement("canvas");
+                    canvas.width = document.getElementById("source").width;
+                    canvas.height = document.getElementById("source").height;
+                    canvas.style.left = document.getElementById("source").style.left;
+                    canvas.style.top = document.getElementById("source").style.top;
+                    canvas.style.zIndex = "1";
+                    canvas.style.position = "fixed";
+                    canvas.id = "gligencanvas";
+                    document.getElementById("canvascontainer").append(canvas);
+                    let ctx = canvas.getContext("2d");
+                    ctx.drawImage(document.getElementById("source"), 0, 0);
+                    delete gligenparams[e.target.id];
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(document.getElementById("source"), 0, 0);
+                    for(let i = 0;i<Object.keys(gligenparams).length;i++){
+                        ctx.rect(gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"], gligenparams[Object.keys(gligenparams)[i]]["width"], gligenparams[Object.keys(gligenparams)[i]]["height"]);
+                        ctx.strokeStyle = "red";
+                        ctx.lineWidth = 5;
+                        ctx.stroke();
+                        ctx.font = "25px Arial";
+                        ctx.fillStyle = "red";
+                        ctx.fillText(gligenparams[Object.keys(gligenparams)[i]]["text"],gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"]+20);                     
+                    }
+                    this.remove();
+                });
+                document.getElementById("gligencont").append(el);
+                document.getElementById("gligenmain").value += ", "+document.getElementById("textinp").value;
+            }
+            else{
+                var canvas = document.getElementById("source");
+                var ctx = canvas.getContext("2d");
+                let tempcanvas = document.createElement("canvas");
+                tempcanvas.width = canvas.width;
+                tempcanvas.height = canvas.height;
+                document.getElementById("canvascontainer").append(tempcanvas);
+                let tempctx = tempcanvas.getContext("2d");
+                tempctx.drawImage(canvas, 0, 0);
+                let cw = tempcanvas.width;
+                let cl = 0;
+                let ch = tempcanvas.height;
+                let ct = 0;
+                canvas.width = savedata["crpdims"]["right"]-savedata["crpdims"]["left"];
+                canvas.height = savedata["crpdims"]["bottom"]-savedata["crpdims"]["top"];
+                ctx.drawImage(tempcanvas, savedata["crpdims"]["left"], savedata["crpdims"]["top"], savedata["crpdims"]["right"]-savedata["crpdims"]["left"], savedata["crpdims"]["bottom"]-savedata["crpdims"]["top"], 0, 0, canvas.width, canvas.height); 
+                cropcount = 0;
+                cropflag = false;
+                lockflag = false;
+                ll = false;
+                lr = false;
+                lt = false;
+                lb = false;
+                changeselectorsize(event);
+                tempcanvas.remove();
+                document.getElementById("settings").style.visibility = "visible";
+                document.getElementById("undo").style.visibility = "visible";
+                document.getElementById("sourceimg").src = canvas.toDataURL();
+                document.getElementById("selector").style.border = "2px solid green";
+                fsimgs["main"] = document.getElementById("sourceimg").src
+                document.getElementById("oldimg").src = document.getElementById("sourceimg").src;
+                document.getElementById("sourceimg").onload = function(){
+                    document.getElementById("oldimg").width = document.getElementById("source").width;
+                    document.getElementById("oldimg").height = document.getElementById("source").height;
+                }
+                document.getElementById("hint").style.visibility = "hidden";
+                return 0;
+            }
+        }
+        else{
+            cropcount = 1;
+            document.getElementById("hinttext").innerHTML = "Vertical: ";
+            document.getElementById("hintinp").value = selectorsize;
+        }
+    }
+    if(!setref && !gligenflag){
+        savedata["crpdims"] = {
+            "left":0,
+            "top": 0,
+            "right":0,
+            "bottom":0
+        };
+        if(!cropflag && !gligenflag && !textflag){
+            document.getElementById("saveexit").style.visibility = "visible";
+        }
+        if((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))<document.getElementById('source').getBoundingClientRect()["left"]){
+            if(document.getElementById('selector').getBoundingClientRect()["right"]<document.getElementById('source').getBoundingClientRect()["right"]){
+                savedata["additionaldims"]["left"] = document.getElementById('source').getBoundingClientRect()["left"]-(parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2));
+                savedata["crpdims"]["left"] = 0;
+                savedata["crpdims"]["right"] = parseFloat(selectorsize) - (parseFloat(document.getElementById('source').getBoundingClientRect()["left"])-(parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2)));
+            }
+            else{
+                savedata["crpdims"]["right"] = imagedims["width"];
+                savedata["additionaldims"]["left"] = document.getElementById('source').getBoundingClientRect()["left"]-(parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2));
+                let lft = (parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"];
+                savedata["additionaldims"]["right"] = parseFloat(selectorsize) - (imagedims["width"]-lft);
+            }
+        }
+        else if((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))>=document.getElementById('source').getBoundingClientRect()["left"]){
+            if(((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"])+parseFloat(selectorsize)>imagedims["width"]){
+                let lft = (parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"];
+                savedata["additionaldims"]["right"] = parseFloat(selectorsize) - (imagedims["width"]-lft);
+                savedata["additionaldims"]["left"] = 0;
+                savedata["crpdims"]["left"] = lft;
+                savedata["crpdims"]["right"] = imagedims["width"];
+            }
+            else{
+        
+                savedata["crpdims"]["left"] = (parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"];
+                savedata["crpdims"]["right"] = parseFloat(selectorsize) + ((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-parseFloat(document.getElementById('source').getBoundingClientRect()["left"]));
+            }
+        }
+        
+        
+        if((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))<document.getElementById('source').getBoundingClientRect()["top"]){
+            if(document.getElementById('selector').getBoundingClientRect()["bottom"]<document.getElementById('source').getBoundingClientRect()["bottom"]){
+                savedata["additionaldims"]["top"] = document.getElementById('source').getBoundingClientRect()["top"]-(parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2));
+                savedata["crpdims"]["top"] = 0;
+                savedata["crpdims"]["bottom"] = parseFloat(selectorsize) - (document.getElementById('source').getBoundingClientRect()["top"]-(parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2)));
+            }
+            else{
+                savedata["crpdims"]["bottom"] = imagedims["height"];
+                savedata["additionaldims"]["top"] = document.getElementById('source').getBoundingClientRect()["top"]-(parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2));
+                let lft = (parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"];
+                savedata["additionaldims"]["bottom"] = parseFloat(selectorsize) - (imagedims["height"]-lft);
+            }
+        }
+        else if((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))>=document.getElementById('source').getBoundingClientRect()["top"]){
+            if(((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"])+parseFloat(selectorsize)>imagedims["height"]){
+                let tp = (parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"];
+                savedata["additionaldims"]["bottom"] = parseFloat(selectorsize) - (imagedims["height"]-tp);
+                savedata["additionaldims"]["top"] = 0;
+                savedata["crpdims"]["top"] = tp;
+                savedata["crpdims"]["bottom"] = imagedims["height"];
+            }
+            else{
+                savedata["crpdims"]["top"] = (parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"];
+                savedata["crpdims"]["bottom"] = (((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"])+parseFloat(selectorsize));
+            }
+        }
+        boxleft = parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2)+"px";
+        boxtop = parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2) + "px";
+    }
+    else{
+        savedata["crpdimsref"] = {
+            "left":0,
+            "top": 0,
+            "right":0,
+            "bottom":0
+        };
+        if((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))<document.getElementById('source').getBoundingClientRect()["left"]){
+            if(document.getElementById('selector').getBoundingClientRect()["right"]<document.getElementById('source').getBoundingClientRect()["right"]){
+                savedata["crpdimsref"]["left"] = 0;
+                savedata["crpdimsref"]["right"] = parseFloat(selectorsize) - (parseFloat(document.getElementById('source').getBoundingClientRect()["left"])-(parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2)));
+                
+            }
+            else{
+                savedata["crpdimsref"]["right"] = imagedims["width"];
+                
+            }
+        }
+        else if((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))>=document.getElementById('source').getBoundingClientRect()["left"]){
+            if(((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"])+parseFloat(selectorsize)>imagedims["width"]){
+                let lft = (parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"];
+                savedata["crpdimsref"]["left"] = lft;
+                savedata["crpdimsref"]["right"] = imagedims["width"];
+                
+            }
+            else{
+        
+                savedata["crpdimsref"]["left"] = (parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["left"];
+                savedata["crpdimsref"]["right"] = parseFloat(selectorsize) + ((parseFloat(document.getElementById("selector").style.left)-(parseFloat(selectorsize)/2))-parseFloat(document.getElementById('source').getBoundingClientRect()["left"]));
+                
+            }
+        }
+        
+        if((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))<document.getElementById('source').getBoundingClientRect()["top"]){
+            if(document.getElementById('selector').getBoundingClientRect()["bottom"]<document.getElementById('source').getBoundingClientRect()["bottom"]){
+                savedata["crpdimsref"]["top"] = 0;
+                savedata["crpdimsref"]["bottom"] = parseFloat(selectorsize) - (document.getElementById('source').getBoundingClientRect()["top"]-(parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2)));
+            }
+            else{
+                savedata["crpdimsref"]["bottom"] = imagedims["height"];
+                
+            }
+        }
+        else if((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))>=document.getElementById('source').getBoundingClientRect()["top"]){
+            if(((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"])+parseFloat(selectorsize)>imagedims["height"]){
+                let tp = (parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"];
+                
+                savedata["crpdimsref"]["top"] = tp;
+                savedata["crpdimsref"]["bottom"] = imagedims["height"];
+            }
+            else{
+                savedata["crpdimsref"]["top"] = (parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"];
+                savedata["crpdimsref"]["bottom"] = (((parseFloat(document.getElementById("selector").style.top)-(parseFloat(selectorsize)/2))-document.getElementById('source').getBoundingClientRect()["top"])+parseFloat(selectorsize));
+            }
+        }
+    }
+    
+}
+
+function lockleft(){
+    if(ll){
+        document.getElementById("lockleft").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+    else{
+        document.getElementById("lockleft").style.backgroundColor = "rgb(20,20,20)";
+    }
+    if(!lockflag){
+        ll = !ll;
+    }
+}
+function lockright(){
+    if(lr){
+        document.getElementById("lockright").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+    else{
+        document.getElementById("lockright").style.backgroundColor = "rgb(20,20,20)";
+    }
+    if(!lockflag){
+        lr = !lr;
+    }
+    
+}
+function locktop(){
+    if(lt){
+        document.getElementById("locktop").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+    else{
+        document.getElementById("locktop").style.backgroundColor = "rgb(20,20,20)";
+    }
+    if(!lockflag){
+        lt = !lt;
+    }
+    
+}
+function lockbottom(){
+    if(lb){
+        document.getElementById("lockbottom").style.backgroundColor = "rgb(80, 80, 80)";
+    }
+    else{
+        document.getElementById("lockbottom").style.backgroundColor = "rgb(20,20,20)";
+    }
+    if(!lockflag){
+        lb = !lb;
+    }
+
+    
+}
+function lockbox(){
+    if(!lockflag){
+        ll = true;
+        lr = true;
+        lt = true;
+        lb = true;
+        document.getElementById("lockleft").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockright").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("locktop").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockbottom").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("lockbox").style.backgroundColor = "rgb(20, 20, 20)";
+    }
+    else{
+        document.getElementById("lockbox").style.backgroundColor = "rgb(80, 80, 80)";
+        ll = false;
+        lr = false;
+        lt = false;
+        lb = false;
+    }
+    lockflag = !lockflag;
+}
+
+function grabselector(){
+    if(lockflag==false){
+        document.getElementById("selector").style.left = Math.floor(mousex)+"px";
+        document.getElementById("selector").style.top = Math.floor(mousey)+"px";
+    }
+    
+
+}
+
+function moveimgenablefirst(){
+    if(moveimgenableflag){
+        document.getElementById("selector").style.visibility = "visible";        
+        document.getElementById("moveimg").style.backgroundColor = "rgb(80, 80, 80)";         
+        moveimgenableflag = !moveimgenableflag
+        imagetomove = "";
+    }
+    else{
+        if(drawflag==false && eraseflag==false && !compareflag && maskflag==false){
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("moveimg").style.backgroundColor = "rgb(20,20,20)";   
+            moveimgenableflag = !moveimgenableflag;
+            imagetomove = "";
+        }
+    }
+}
+function moveimgenable(t){
+    if(moveimgenableflag){
+        try{
+            document.getElementById(t.currentTarget.id).style.backgroundColor = "rgb(80, 80, 80)"; 
+        }
+        catch(error){
+            document.getElementById("moveimg1").style.backgroundColor = "rgb(80, 80, 80)";
+        }      
+        moveimgenableflag = !moveimgenableflag
+        imagetomove = "";
+    }
+    else{
+        if(drawflag==false && eraseflag==false && maskflag==false){ 
+            try{
+                document.getElementById(t.currentTarget.id).style.backgroundColor = "rgb(20,20,20)";
+                document.getElementById("canvascontainer").appendChild(document.getElementById("source"+t.currentTarget.id.match(/\d+/)[0]));
+            }          
+            catch(error){
+                document.getElementById("moveimg1").style.backgroundColor = "rgb(20,20,20)";
+                document.getElementById("canvascontainer").appendChild(document.getElementById("source"));
+            }
+            
+            moveimgenableflag = !moveimgenableflag;
+            try{
+                imagetomove = String(t.currentTarget.id.match(/\d+/)[0]);
+                comporder.push(t.currentTarget.id.match(/\d+/)[0]);
+            }
+            catch(error){
+                imagetomove = "";
+                comporder.push("");
+            }
+        }
+    }
+}
+
+function compimage(){
+    backup["width"] = document.getElementById("source").width;
+    backup["height"] = document.getElementById("source").height;
+    backup["left"] = document.getElementById("source").style.left;
+    backup["top"] = document.getElementById("source").style.top;
+    backup["img"] = document.getElementById("sourceimg").src;
+    var order = [""];
+    var coordinates = [[parseInt(document.getElementById('source').getBoundingClientRect()["left"]),parseInt(document.getElementById('source').getBoundingClientRect()["top"])]];
+    var num = document.getElementById("settings2").children.length - 3;
+    document.getElementById("openimgadd2").style.visibility = "hidden";
+    document.getElementById("openimgadd").style.visibility = "visible";
+    var newel = document.createElement("input");
+    newel.id = "openimgadd";
+    newel.type = "file";
+    newel.onchange =function(e) {
+        document.getElementById("settings").style.visibility = "hidden";
+        document.getElementById("undo").style.visibility = "hidden";
+        var file, img;
+        if ((file = this.files[0])) {
+            comporder = [];
+            document.getElementById("selector").style.visibility = "hidden";
+            var num = (document.getElementById("canvascontainer").children.length /2)+1;
+            num = String(num);
+            document.getElementById("settings2").style.visibility = "visible";
+            var newel = document.createElement("div");
+            newel.id = "moveimg"+num;
+            newel.addEventListener("click",moveimgenable);
+            newel.className = "moveimgclass txt";
+            newel.style.left = 5+(num-1)*10+"%";
+            var newelpar = document.createElement("p");            
+            newelpar.innerHTML = "Move Image "+num;
+            newelpar.className = "txt";
+            newel.append(newelpar);
+            document.getElementById("settings2").append(newel);
+            newel = document.createElement("img");
+            newel.id = "sourceimg"+num;
+            newel.style.display = "none";
+            document.getElementById("canvascontainer").append(newel);
+            newel = document.createElement("canvas");
+            newel.id = "source"+num;
+            newel.style.position = "fixed";
+            newel.style.left = parseInt(document.getElementById("source").style.left) + document.getElementById("source").width + "px";
+            newel.style.top = document.getElementById("source").style.top;
+            document.getElementById("canvascontainer").append(newel);
+            img = new Image();
+            img.onload = function() {
+                document.getElementById("sourceimg"+num).width = this.width;
+                document.getElementById("sourceimg"+num).height = this.height;
+                document.getElementById("source"+num).width = this.width;
+                document.getElementById("source"+num).height = this.height;
+                var canvas = document.getElementById("source"+num);
+                var ctx = canvas.getContext("2d");
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                var img = document.getElementById("sourceimg"+num);
+                ctx.drawImage(img, 0, 0);
+                imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                data = imgData.data;
+                pxls = [];
+                for (let i = 0; i < data.length; i += 4) {
+                    var pixel = [];
+                    pixel.push(data[i]);
+                    pixel.push(data[i+1]);
+                    pixel.push(data[i+2]);
+                    pixel.push(data[i+3]);
+                    pxls.push(pixel);
+                }
+                var pxlsarray = [[]];
+                for(i = 0;i<pxls.length;i++){
+                    pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                    if(i<pxls.length-2){
+                        if((i+1)%canvas.width==0 && i>canvas.width-10){
+                            pxlsarray.push([]);
+                        }
+                    }
+                    
+                }
+            };
+            img.src = URL.createObjectURL(file);
+            document.getElementById("sourceimg"+num).src = URL.createObjectURL(file);
+        }
+        document.getElementById("source"+num).className = "canvas";
+        fsimgs[num] = document.getElementById("sourceimg"+num).src;
+        document.getElementById("compare").style.left = document.getElementById("source").style.left;
+        document.getElementById("compare").style.width = parseInt(document.getElementById("oldimg").width)-parseInt(document.getElementById("oldimg").width)/2 + "px";
+        document.getElementById("compare").style.height = document.getElementById("oldimg").style.height;
+        document.getElementById("sourceimg").onload = function(){
+            document.getElementById("oldimg").width = document.getElementById("sourceimg").width;
+            document.getElementById("oldimg").height = document.getElementById("sourceimg").height;
+        }
+        
+    }
+    for(let i=1;i<num;i++){
+        order.push(String(i+1));
+    }
+    if(comporder.length>0){
+        comporder.reverse();
+        order.reverse();
+        for(let i=0;i<order.length;i++){
+            comporder.push(order[i]);
+        }
+        order = [];
+        for(let i=0;i<comporder.length;i++){
+            if(!order.includes(comporder[i])){
+                order.push(comporder[i]);
+            }
+        }
+        
+    }
+
+
+    
+
+
+
+    var leftest = parseInt(document.getElementById('source').getBoundingClientRect()["left"]);
+    var topest = parseInt(document.getElementById('source').getBoundingClientRect()["top"]);
+    var rightest = parseInt(document.getElementById('source').getBoundingClientRect()["right"]);
+    var bottomest = parseInt(document.getElementById('source').getBoundingClientRect()["bottom"]);
+    for(let i =2;i<num+1;i++){
+        coordinates.push([parseInt(document.getElementById('source'+i).getBoundingClientRect()["left"]),parseInt(document.getElementById('source'+i).getBoundingClientRect()["top"])])
+        if(parseInt(document.getElementById('source'+i).getBoundingClientRect()["left"])<leftest){
+            leftest = parseInt(document.getElementById('source'+i).getBoundingClientRect()["left"])
+        }
+        if(parseInt(document.getElementById('source'+i).getBoundingClientRect()["top"])<topest){
+            topest = parseInt(document.getElementById('source'+i).getBoundingClientRect()["top"])
+        }
+        if(parseInt(document.getElementById('source'+i).getBoundingClientRect()["right"])>rightest){
+            rightest = parseInt(document.getElementById('source'+i).getBoundingClientRect()["right"])
+        }
+        if(parseInt(document.getElementById('source'+i).getBoundingClientRect()["bottom"])>bottomest){
+            bottomest = parseInt(document.getElementById('source'+i).getBoundingClientRect()["bottom"])
+        }
+    }
+    var canvas = document.getElementById("source");
+    var ctx = canvas.getContext("2d");
+    canvas.width = rightest-leftest;
+    canvas.height = bottomest-topest;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    order.reverse();
+    for(let i = 0;i<order.length;i++){
+        if(order[i]==""){
+            var img = document.getElementById("sourceimg");
+            ctx.drawImage(img, coordinates[0][0]-leftest, coordinates[0][1]-topest);
+        }
+        else{
+            img = document.getElementById("sourceimg"+order[i]);
+            ctx.drawImage(img, coordinates[parseInt(order[i])-1][0]-leftest, coordinates[parseInt(order[i])-1][1]-topest);
+            document.getElementById("sourceimg"+order[i]).remove();
+            document.getElementById("source"+order[i]).remove();
+            document.getElementById("moveimg"+order[i]).remove();
+        }
+    }
+    document.getElementById("sourceimg").src = canvas.toDataURL();
+    imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+    data = imgData.data;
+    pxls = [];
+    for (let i = 0; i < data.length; i += 4) {
+        var pixel = [];
+        pixel.push(data[i]);
+        pixel.push(data[i+1]);
+        pixel.push(data[i+2]);
+        pixel.push(data[i+3]);
+        pxls.push(pixel);
+    }
+    var pxlsarray = [[]];
+    for(i = 0;i<pxls.length;i++){
+        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+        if(i<pxls.length-2){
+            if((i+1)%canvas.width==0 && i>canvas.width-10){
+                pxlsarray.push([]);
+            }
+        }
+        
+    }
+    savedata["pxlsarray"] = pxlsarray;
+    document.getElementById("settings2").style.visibility="hidden";
+    document.getElementById("selector").style.visibility = "visible";
+    document.getElementById("sourceimg").src = canvas.toDataURL();
+    document.getElementById("oldimg").src = document.getElementById("sourceimg").src;
+    document.getElementById("sourceimg").onload = function(){
+        document.getElementById("oldimg").width = document.getElementById("source").width;
+        document.getElementById("oldimg").height = document.getElementById("source").height;
+    }
+    imagetomove = "";
+    fsimgs = {};
+    fsimgs["main"] = document.getElementById("sourceimg").src;
+    let childs = document.getElementById("settings").children;
+    let numoia = 0;
+    for (let x = 0;x<childs.length;x++){
+        if(childs[x].id=="openimgadd"){
+            numoia++;
+        }
+    }
+    numoia-=1;
+    for (let x = 0;x<childs.length;x++){
+        if(childs[x].id=="openimgadd"){
+            if(numoia>0){
+                childs[x].remove();
+            }
+        }
+    }
+    document.getElementById("settings").style.visibility = "visible";
+    document.getElementById("undo").style.visibility = "visible";
+
+}
+function moveimg(){    
+    if(clickflag && (moveimgenableflag || compareflag)){
+        document.getElementById("moveimglistner").removeEventListener("mousemove", imgmover);
+        clickflag = !clickflag
+    }
+    else{   
+        document.getElementById("moveimglistner").addEventListener("mousemove", imgmover);
+        clickflag = !clickflag
+    }
+}
+function changeselectorsize(evt){
+    if(evt.target.id=="hintinp"){
+        var elem = evt.target;
+        selectorsize = elem.value;
+        savedata["boxsz"] = selectorsize;
+        if(cropcount==1){
+            document.getElementById("selector").style.height = selectorsize+"px";
+        }
+        else{
+            document.getElementById("selector").style.width = selectorsize+"px";
+        }
+               
+    }
+    else{
+        var elem = document.getElementById("selectorsize");
+        selectorsize = elem.value;
+        savedata["boxsz"] = selectorsize;
+        document.getElementById("selector").style.width = selectorsize+"px";
+        document.getElementById("selector").style.height = selectorsize+"px";
+    }
+}
+
+function savejson(){
+    document.getElementById("oldimg").src = document.getElementById("sourceimg").src;
+    document.getElementById("sourceimg").onload = function(){
+        document.getElementById("oldimg").width = document.getElementById("source").width;
+        document.getElementById("oldimg").height = document.getElementById("source").height;
+    }
+    var canvas = document.getElementById("source");
+    var ctx = canvas.getContext("2d");
+    let tempcanvas = document.createElement("canvas");
+    tempcanvas.width = canvas.width+savedata["additionaldims"]["left"]+savedata["additionaldims"]["right"];
+    tempcanvas.height = canvas.height+savedata["additionaldims"]["top"]+savedata["additionaldims"]["bottom"];
+    document.getElementById("canvascontainer").append(tempcanvas);
+    let tempctx = tempcanvas.getContext("2d");
+    tempctx.drawImage(canvas, savedata["additionaldims"]["left"], savedata["additionaldims"]["top"]);    
+    document.getElementById("oldimg").src = tempcanvas.toDataURL();
+    tempcanvas.remove();
+    saved(savedata);
+    
+}
+
+function reset(){
+    var selec = document.getElementById("selector");
+    selec.style.left = mousex+"px";
+    selec.style.top = mousey+"px";
+}
+
+function cropimg(){
+    backup["width"] = document.getElementById("source").width;
+    backup["height"] = document.getElementById("source").height;
+    backup["left"] = document.getElementById("source").style.left;
+    backup["top"] = document.getElementById("source").style.top;
+    backup["img"] = document.getElementById("sourceimg").src;
+    cropflag = true;
+    document.getElementById("hint").style.visibility = "visible";
+    document.getElementById("selector").style.border = "2px solid orange";
+    document.getElementById("settings").style.visibility = "hidden";
+    document.getElementById("undo").style.visibility = "hidden";
+    savedata["crpdims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+    ll = true;
+    lr = true;
+    lt = true;
+    lb = true;
+    lockflag = true;
+    document.getElementById("saveexit").style.visibility = "hidden";
+    document.getElementById("hinttext").innerHTML = "Horizontal: ";
+    document.getElementById("hintinp").value = selectorsize;
+
+}
+
+function addText(){
+    document.getElementById("gligenmain").style.visibility = "hidden";
+    let canvas = document.createElement("canvas");
+    canvas.width = document.getElementById("source").width;
+    canvas.height = document.getElementById("source").height;
+    canvas.style.left = document.getElementById("source").style.left;
+    canvas.style.top = document.getElementById("source").style.top;
+    canvas.style.zIndex = "1";
+    canvas.style.position = "fixed";
+    canvas.id = "gligencanvas";
+    document.getElementById("canvascontainer").append(canvas);
+    let ctx = canvas.getContext("2d");
+    ctx.drawImage(document.getElementById("source"), 0, 0);
+    textflag = true;
+    document.getElementById("gligencont").style.visibility = "visible";
+    document.getElementById("textinput").style.visibility = "visible";
+    document.getElementById("hint").style.visibility = "visible";
+    document.getElementById("selector").style.border = "2px solid blue";
+    document.getElementById("settings").style.visibility = "hidden";
+    document.getElementById("undo").style.visibility = "hidden";
+    savedata["crpdims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+    ll = true;
+    lr = true;
+    lt = true;
+    lb = true;
+    lockflag = true;
+    document.getElementById("saveexit").style.visibility = "hidden";
+    document.getElementById("hinttext").innerHTML = "Horizontal: ";
+    document.getElementById("hintinp").value = selectorsize;
+    document.getElementById("source").style.opacity = "0";
+
+}
+
+
+function compare(){
+    if(!moveimgenableflag){
+        compareflag = !compareflag;
+        if(!compareflag){
+            document.getElementById("compare").style.visibility = "hidden";
+            document.getElementById("selector").style.visibility = "visible";        
+            document.getElementById("compbtn").style.backgroundColor = "rgb(80, 80, 80)";
+        }
+        else{
+            document.getElementById("compare").style.visibility = "visible";
+            document.getElementById("selector").style.visibility = "hidden";
+            document.getElementById("compbtn").style.backgroundColor = "rgb(20,20,20)";  
+        }
+    }
+}
+
+function resetref(){
+    savedata["crpdimsref"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+}
+
+function fit(){
+    var canvas = document.getElementById("source"+imagetomove);
+    var ctx = canvas.getContext("2d");
+    if(parseFloat(document.getElementById("source"+imagetomove).width)>parseFloat(document.getElementById("source"+imagetomove).height)){
+        let r =  parseFloat(document.getElementById("source"+imagetomove).width)/parseFloat(document.getElementById("source"+imagetomove).height);
+        document.getElementById("source"+imagetomove).width = 512;
+        document.getElementById("source"+imagetomove).height = 512/r;
+    }
+    else if(parseFloat(document.getElementById("source"+imagetomove).width)<parseFloat(document.getElementById("source"+imagetomove).height)){
+        let r =  parseFloat(document.getElementById("source"+imagetomove).height)/parseFloat(document.getElementById("source"+imagetomove).width);
+        document.getElementById("source"+imagetomove).width = 512/r;
+        document.getElementById("source"+imagetomove).height = 512;
+    }
+    else{
+        document.getElementById("source"+imagetomove).width = 512;
+        document.getElementById("source"+imagetomove).height = 512;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var img = new Image;
+    img.src = fsimgs["main"];  
+    img.onload = function(){
+        ctx.drawImage(img, 0, 0, img.width,img.height,0, 0, canvas.width, canvas.height);
+        document.getElementById("sourceimg"+imagetomove).src = canvas.toDataURL();
+        document.getElementById("oldimg").width = canvas.width;
+        document.getElementById("oldimg").height = canvas.height;
+        document.getElementById("oldimg").src = canvas.toDataURL();
+
+    }
+}
+
+function uploadnewimage(){
+    document.getElementById("uploadcontainer").style.visibility = "visible";
+    var file, img;   
+    if ((file = this.files[0])) {
+        img = new Image();
+        img.onload = function() {
+            document.getElementById("sourceimg").width = this.width;
+            document.getElementById("sourceimg").height = this.height;
+            document.getElementById("source").width = this.width;
+            document.getElementById("source").height = this.height;
+            var canvas = document.getElementById("source");
+            var ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            var img = document.getElementById("sourceimg");
+            ctx.drawImage(img, 0, 0);
+            imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+            data = imgData.data;
+            pxls = [];
+            for (let i = 0; i < data.length; i += 4) {
+                var pixel = [];
+                pixel.push(data[i]);
+                pixel.push(data[i+1]);
+                pixel.push(data[i+2]);
+                pixel.push(data[i+3]);
+                pxls.push(pixel);
+            }
+            var pxlsarray = [[]];
+            for(i = 0;i<pxls.length;i++){
+                pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                if(i<pxls.length-2){
+                    if((i+1)%canvas.width==0 && i>canvas.width-10){
+                        pxlsarray.push([]);
+                    }
+                }
+                
+            }
+            savedata["pxlsarray"] = pxlsarray;
+            backup["img"] = document.getElementById("sourceimg").src;
+        };
+        img.src = URL.createObjectURL(file);
+        document.getElementById("sourceimg").src = URL.createObjectURL(file);
+        document.getElementById("oldimg").src = URL.createObjectURL(file);
+        document.getElementById("uploadcontainer").style.visibility = "hidden";
+        
+
+
+    }
+    fsimgs["main"] = document.getElementById("sourceimg").src;
+}
+
+
+function expandDrawer(){
+    drawerflag = !drawerflag;
+    if(drawerflag){
+        fetch('http://localhost:5000/getImagesPaths'
+        ).then(function (response) {
+            responseClone = response.clone();
+            return response.json();
+        })
+        .then(data => {
+            let images = data["imagesgen"];   
+            for(let i =images.length;i>0;i--){
+                document.getElementById("img"+(i)).src = images[i-1];
+            }
+            
+        });
+        document.getElementById("drawer").style.left = "75%";
+    }
+    else{
+        document.getElementById("drawer").style.left = "99%";
+    }
+}
+
+function openDrawerImage(evt){
+    
+    document.getElementById("settings").style.visibility = "hidden";
+    document.getElementById("undo").style.visibility = "hidden";
+    var file, img;
+    comporder = [];
+    document.getElementById("selector").style.visibility = "hidden";
+    var num = (document.getElementById("canvascontainer").children.length /2)+1;
+    num = String(num);
+    document.getElementById("settings2").style.visibility = "visible";
+    document.getElementById("openimgadd").style.visibility = "hidden";
+    if(!document.getElementById("openimgadd2")){
+        var newel = document.createElement("input");
+        newel.id = "openimgadd2";
+        newel.type = "file";
+        newel.onchange =function(e) {
+            var file, img;
+            if ((file = this.files[0])) {
+                comporder = [];
+                document.getElementById("selector").style.visibility = "hidden";
+                var num = (document.getElementById("canvascontainer").children.length /2)+1;
+                num = String(num);
+                document.getElementById("settings2").style.visibility = "visible";
+                var newel = document.createElement("div");
+                newel.id = "moveimg"+num;
+                newel.addEventListener("click",moveimgenable);
+                newel.className = "moveimgclass txt";
+                newel.style.left = 5+(num-1)*10+"%";
+                var newelpar = document.createElement("p");            
+                newelpar.innerHTML = "Move Image "+num;
+                newelpar.className = "txt";
+                newel.append(newelpar);
+                document.getElementById("settings2").append(newel);
+                newel = document.createElement("img");
+                newel.id = "sourceimg"+num;
+                newel.style.display = "none";
+                document.getElementById("canvascontainer").append(newel);
+                newel = document.createElement("canvas");
+                newel.id = "source"+num;
+                newel.className = "canvas";
+                newel.style.position = "fixed";
+                newel.style.left = parseInt(document.getElementById("source").style.left) + document.getElementById("source").width + "px";
+                newel.style.top = document.getElementById("source").style.top;
+                document.getElementById("canvascontainer").append(newel);
+                img = new Image();
+                img.src = URL.createObjectURL(file);
+                img.onload = function() {
+                    document.getElementById("sourceimg"+num).width = this.width;
+                    document.getElementById("sourceimg"+num).height = this.height;
+                    document.getElementById("source"+num).width = this.width;
+                    document.getElementById("source"+num).height = this.height;
+                    var canvas = document.getElementById("source"+num);
+                    var ctx = canvas.getContext("2d");
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    var img = document.getElementById("sourceimg"+num);
+                    ctx.drawImage(img, 0, 0);
+                    imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+                    data = imgData.data;
+                    pxls = [];
+                    for (let i = 0; i < data.length; i += 4) {
+                        var pixel = [];
+                        pixel.push(data[i]);
+                        pixel.push(data[i+1]);
+                        pixel.push(data[i+2]);
+                        pixel.push(data[i+3]);
+                        pxls.push(pixel);
+                    }
+                    var pxlsarray = [[]];
+                    for(i = 0;i<pxls.length;i++){
+                        pxlsarray[pxlsarray.length-1].push(pxls[i]);
+                        if(i<pxls.length-2){
+                            if((i+1)%canvas.width==0 && i>canvas.width-10){
+                                pxlsarray.push([]);
+                            }
+                        }
+                        
+                    }
+                };
+                document.getElementById("sourceimg"+num).src = URL.createObjectURL(file);
+                fsimgs[num] = document.getElementById("sourceimg"+num).src;
+            }
+            
+        }
+        document.getElementById("settings2").append(newel);
+    }
+    document.getElementById("openimgadd2").style.visibility = "visible";
+    var newel = document.createElement("div");
+    newel.id = "moveimg"+num;
+    newel.addEventListener("click",moveimgenable);
+    newel.className = "moveimgclass txt";
+    newel.style.left = 5+(num-1)*10+"%";
+    var newelpar = document.createElement("p");            
+    newelpar.innerHTML = "Move Image "+num;
+    newelpar.className = "txt";
+    newel.append(newelpar);
+    document.getElementById("settings2").append(newel);
+    newel = document.createElement("img");
+    newel.id = "sourceimg"+num;
+    newel.style.display = "none";
+    document.getElementById("canvascontainer").append(newel);
+    newel = document.createElement("canvas");
+    newel.id = "source"+num;
+    newel.className = "canvas";
+    newel.style.position = "fixed";
+    newel.style.left = parseInt(document.getElementById("source").style.left) + document.getElementById("source").width + "px";
+    newel.style.top = document.getElementById("source").style.top;
+    document.getElementById("canvascontainer").append(newel);
+    img = new Image();
+    img.onload = function() {
+        document.getElementById("sourceimg"+num).width = this.width;
+        document.getElementById("sourceimg"+num).height = this.height;
+        document.getElementById("source"+num).width = this.width;
+        document.getElementById("source"+num).height = this.height;
+        var canvas = document.getElementById("source"+num);
+        var ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var img = document.getElementById("sourceimg"+num);
+        ctx.drawImage(img, 0, 0);
+        imgData = ctx.getImageData(0, 0, canvas.width,canvas.height);
+        data = imgData.data;
+        pxls = [];
+        for (let i = 0; i < data.length; i += 4) {
+            var pixel = [];
+            pixel.push(data[i]);
+            pixel.push(data[i+1]);
+            pixel.push(data[i+2]);
+            pixel.push(data[i+3]);
+            pxls.push(pixel);
+        }
+        var pxlsarray = [[]];
+        for(i = 0;i<pxls.length;i++){
+            pxlsarray[pxlsarray.length-1].push(pxls[i]);
+            if(i<pxls.length-2){
+                if((i+1)%canvas.width==0 && i>canvas.width-10){
+                    pxlsarray.push([]);
+                }
+            }
+            
+        }
+    };
+    img.src = evt.target.src;
+    document.getElementById("sourceimg"+num).src = evt.target.src;
+    fsimgs[num] = document.getElementById("sourceimg"+num).src;
+}
+
+function setGligen(){
+    document.getElementById("gligenmain").style.visibility = "visible";
+    if(Object.keys(gligenparams).length>0){
+        delete gligenparams["main"];
+    }
+    let canvas = document.createElement("canvas");
+    canvas.width = document.getElementById("source").width;
+    canvas.height = document.getElementById("source").height;
+    canvas.style.left = document.getElementById("source").style.left;
+    canvas.style.top = document.getElementById("source").style.top;
+    canvas.style.zIndex = "1";
+    canvas.style.position = "fixed";
+    canvas.id = "gligencanvas";
+    document.getElementById("canvascontainer").append(canvas);
+    let ctx = canvas.getContext("2d");
+    ctx.drawImage(document.getElementById("source"), 0, 0);
+    for(let i = 0;i<Object.keys(gligenparams).length;i++){
+        let el = document.createElement("div");
+        el.id = Object.keys(gligenparams)[i];
+        el.className = "gligcond";
+        el.innerHTML = gligenparams[Object.keys(gligenparams)[i]]["text"];
+        el.addEventListener("click", function(e){
+            document.getElementById("gligencanvas").remove();
+            canvas = document.createElement("canvas");
+            canvas.width = document.getElementById("source").width;
+            canvas.height = document.getElementById("source").height;
+            canvas.style.left = document.getElementById("source").style.left;
+            canvas.style.top = document.getElementById("source").style.top;
+            canvas.style.zIndex = "1";
+            canvas.style.position = "fixed";
+            canvas.id = "gligencanvas";
+            document.getElementById("canvascontainer").append(canvas);
+            let ctx = canvas.getContext("2d");
+            ctx.drawImage(document.getElementById("source"), 0, 0);
+            delete gligenparams[e.target.id];
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(document.getElementById("source"), 0, 0);
+            for(let i = 0;i<Object.keys(gligenparams).length;i++){
+                ctx.rect(gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"], gligenparams[Object.keys(gligenparams)[i]]["width"], gligenparams[Object.keys(gligenparams)[i]]["height"]);
+                ctx.strokeStyle = "red";
+                ctx.lineWidth = 5;
+                ctx.stroke();
+                ctx.font = "25px Arial";
+                ctx.fillStyle = "red";
+                ctx.fillText(gligenparams[Object.keys(gligenparams)[i]]["text"],gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"]+20);                     
+            }
+            this.remove();
+        });
+        document.getElementById("gligencont").append(el);
+        ctx.rect(gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"], gligenparams[Object.keys(gligenparams)[i]]["width"], gligenparams[Object.keys(gligenparams)[i]]["height"]);
+        ctx.strokeStyle = "red";
+        ctx.lineWidth = 5;
+        ctx.stroke();
+        ctx.font = "15px Arial";
+        ctx.fillStyle = "red";
+        ctx.fillText(gligenparams[Object.keys(gligenparams)[i]]["text"],gligenparams[Object.keys(gligenparams)[i]]["x"], gligenparams[Object.keys(gligenparams)[i]]["y"]+20);
+    }
+    gligenflag = true;
+    gligenbaseimage = document.getElementById("source");
+    document.getElementById("gligencont").style.visibility = "visible";
+    document.getElementById("textinput").style.visibility = "visible";
+    document.getElementById("hint").style.visibility = "visible";
+    document.getElementById("selector").style.border = "2px solid orange";
+    document.getElementById("settings").style.visibility = "hidden";
+    document.getElementById("undo").style.visibility = "hidden";
+    savedata["crpdims"] = {
+        "left":0,
+        "top": 0,
+        "right":0,
+        "bottom":0
+    };
+    ll = true;
+    lr = true;
+    lt = true;
+    lb = true;
+    lockflag = true;
+    document.getElementById("saveexit").style.visibility = "hidden";
+    document.getElementById("hinttext").innerHTML = "Horizontal: ";
+    document.getElementById("hintinp").value = selectorsize;
+    document.getElementById("source").style.opacity = "0";
+}
+
+function confirmGligen(){
+    document.getElementById("gligenmain").style.visibility = "hidden";
+    document.getElementById("source").style.opacity = "1";
+    if(gligenflag){
+        document.getElementById("gligencanvas").remove();
+        for(let i = 0;i<Object.keys(gligenparams).length;i++){
+            if(Object.keys(gligenparams)[i].includes("gligen")){
+                document.getElementById(Object.keys(gligenparams)[i]).remove();
+            }
+        }
+        d = {
+            "text":document.getElementById("gligenmain").value
+        }
+        gligenparams["main"]=d;        
+        document.getElementById("gligencont").style.visibility = "hidden";
+        gligenflag = false;
+        gligenbaseimage = "";
+        document.getElementById("selector").style.border = "2px solid green";
+        document.getElementById("textinput").style.visibility = "hidden";
+        document.getElementById("settings").style.visibility = "visible";
+        document.getElementById("hint").style.visibility = "hidden";
+        selectorsize = 512;
+        savedata["boxsz"] = selectorsize;
+        document.getElementById("lockbox").style.background =  "rgb(20,20,20)";
+        document.getElementById("selector").style.width = selectorsize+"px";
+        document.getElementById("selector").style.height = selectorsize+"px";
+        document.getElementById("selector").style.left = document.getElementById("source").style.left;
+        document.getElementById("selector").style.top = document.getElementById("source").style.top;
+    }
+    else{
+        for(let i = 0;i<Object.keys(textadded).length;i++){
+            document.getElementById(Object.keys(textadded)[i]).remove();
+        };
+        textadded = {};
+        textnum = 0;
+        let canvas = document.getElementById("source");
+        let ctx = canvas.getContext("2d");
+        ctx.drawImage(document.getElementById("gligencanvas"), 0, 0);
+        document.getElementById("source").style.opacity = "1";
+        document.getElementById("gligencanvas").remove();
+        document.getElementById("gligencont").style.visibility = "hidden";
+        document.getElementById("settings").style.visibility = "visible";
+        document.getElementById("undo").style.visibility = "visible";
+        document.getElementById("hint").style.visibility = "hidden";
+        cropcount = 0;
+        document.getElementById("lockbox").style.background = "rgb(80, 80, 80)";
+        lockflag = false;
+        ll = false;
+        lr = false;
+        lt = false;
+        lb = false;
+        textflag = false;
+        document.getElementById("addtext").style.backgroundColor = "rgb(80, 80, 80)";
+        document.getElementById("selector").style.border = "2px solid green";
+        document.getElementById("textinput").style.visibility = "hidden";
+        changeselectorsize(event);
+    }
+}
+
+function emptyCanvas(){
+    backup["width"] = document.getElementById("source").width;
+    backup["height"] = document.getElementById("source").height;
+    backup["left"] = document.getElementById("source").style.left;
+    backup["top"] = document.getElementById("source").style.top;
+    backup["img"] = document.getElementById("sourceimg").src;
+    let canvas = document.getElementById("source");
+    let ctx = canvas.getContext("2d");
+    ctx.rect(0,0,canvas.width,canvas.height);
+    ctx.fillStyle = document.getElementById("clr").value+parseInt(document.getElementById("inprange").value).toString(16);
+    ctx.fill();
+    document.getElementById("undo").style.visibility = "visible";
+    document.getElementById("sourceimg").src = canvas.toDataURL();
+    fsimgs["main"] = document.getElementById("sourceimg").src
+}
+
+function printLetter(evt){
+    if(document.getElementById("uploadcontainer").style.visibility=="hidden" && document.getElementById("stack").style.visibility=="hidden" && !gligenflag && !textflag){
+        switch(evt.code){
+            case "KeyM":
+                if(!gligenflag && !cropflag && !textflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    moveimgenablefirst();
+                }
+                break;
+            case "KeyS":
+                if(!gligenflag && !cropflag && !textflag && !drawflag && !eraseflag && !maskflag){
+                    setreftoggle();
+                }
+                break;
+            case "KeyR":
+                resetref();
+                break;
+            case "KeyC":
+                if(!gligenflag && !textflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    cropimg();
+                }
+                break;
+            case "KeyO":
+                if(!gligenflag && !cropflag && !textflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    compare();
+                }
+                break;
+            case "KeyE":
+                if(!gligenflag && !cropflag && !textflag && !drawflag && !setref && !maskflag){
+                    erasemodeon();
+                }
+                break;
+            case "KeyK":
+                if(!gligenflag && !cropflag && !textflag && !drawflag && !setref && !eraseflag){
+                    maskmodeon();
+                }
+                break;
+            case "KeyD":
+                if(!gligenflag && !cropflag && !textflag  && !eraseflag && !setref && !maskflag){
+                    drawmodeon();
+                }
+                break;
+            case "KeyF":
+                fit();
+                break;
+            case "KeyN":
+                uploadnewimage();
+                break;
+            case "KeyT":
+                if(!gligenflag && !cropflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    addText();
+                }
+                break;
+            case "KeyG":
+                if(!cropflag && !textflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    gridDraw();
+                }
+                break;
+            case "KeyL":
+                if(!cropflag && !textflag && !drawflag && !eraseflag && !setref && !maskflag){
+                    setGligen();
+                }
+                break;
+            case "KeyB":
+                emptyCanvas();
+                break;
+            case "KeyU":
+                if(document.getElementById("saveexit").style.visibility=="visible"){
+                    undoimg();
+                }
+                break;
+            case "ArrowUp":
+                locktop();
+                break;
+            case "ArrowDown":
+                lockbottom();
+                break;
+            case "ArrowLeft":
+                lockleft();
+                break;
+            case "ArrowRight":
+                lockright();
+                break;
+            case "Enter":
+                if(document.getElementById("saveexit").style.visibility=="visible"){
+                    savejson();
+                }
+                break;
+            case "ShiftRight":
+                lockbox();
+                break;
+            case "Space":
+                resetimg();
+                break;
+            case "KeyI":
+                saveimg();
+                break;
+            case "KeyH":
+                if(document.getElementById("settings").style.visibility=="hidden"){
+                    document.getElementById("settings").style.visibility="visible";
+                    document.getElementById("undo").style.visibility="visible";
+                    document.getElementById("saveexit").style.visibility="visible";
+                }
+                else{
+                    document.getElementById("settings").style.visibility="hidden";
+                    document.getElementById("undo").style.visibility="hidden";
+                    document.getElementById("saveexit").style.visibility="hidden";
+                }
+                break;
+        }
+    }  
+
+    else if(document.getElementById("uploadcontainer").style.visibility=="hidden" && gligenflag && document.activeElement.id!="gligenmain"){
+        if(evt.code == "Space"){
+            document.getElementById("textinp").value+=" ";
+        }
+        else if(evt.code.includes("Key")){
+            document.getElementById("textinp").value+=evt.code.slice(-1).toLowerCase();
+        }
+        else if(evt.code == "Backspace"){
+            document.getElementById("textinp").value = document.getElementById("textinp").value.substring(0,document.getElementById("textinp").value.length-1);
+        }
+        else if(evt.code == "Delete"){
+            document.getElementById("textinp").value = "";
+        }
+        
+    }
+}
+
+function stackNodes(){
+    fetch('http://localhost:5000/getnodes', {
+        method: 'POST',
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({"wf":selwf})
+    })
+    .then(function (response){
+        return response.json();
+    })
+    .then(data=>{
+        let cont = document.getElementById("stack");
+        while (cont.firstChild) {
+            cont.removeChild(cont.lastChild);
+        }
+        let newel = document.createElement("div");
+        newel.className = "stackbar";
+        newel.onclick = function(){returnToCanvas();}
+        newel.innerHTML = "...";
+        cont.append(newel);
+        let nodelinks = {};
+        let v = Object.keys(data["prompt_workflow"]);
+        for(let i=0; i<v.length;i++){
+            nodelinks[v[i]] = {};
+            nodelinks[v[i]]["ins"] = [];
+            nodelinks[v[i]]["outs"] = [];
+        }
+        for(let i=0; i<v.length;i++){
+            let x = Object.keys(data["prompt_workflow"][v[i]]["inputs"]);
+            for(let j=0; j<x.length;j++){
+                if(Array.isArray(data["prompt_workflow"][v[i]]["inputs"][x[j]])){
+                    nodelinks[data["prompt_workflow"][v[i]]["inputs"][x[j]][0]]["outs"].push(v[i]);
+                    nodelinks[v[i]]["ins"].push(data["prompt_workflow"][v[i]]["inputs"][x[j]][0]);
+                }
+            }
+        }
+        for(let i=0; i<v.length;i++){
+            let node = document.createElement("div");
+            node.className = "node";
+            node.id = "node" + v[i];
+            document.getElementById("stack").append(node);
+            let nodetitle = document.createElement("div");
+            nodetitle.className = "nodetitle";
+            if(Object.keys(data["prompt_workflow"][v[i]]).includes("_meta")){
+                nodetitle.innerHTML = data["prompt_workflow"][v[i]]["_meta"]["title"]+" ("+v[i]+")";
+            }
+            else{
+                nodetitle.innerHTML = data["prompt_workflow"][v[i]]["class_type"]+" ("+v[i]+")";
+            }
+            nodetitle.id = "nodet" + v[i];
+            nodetitle.addEventListener("click",function(event){
+                let cont = document.getElementById("stack");
+                for(let x=0;x<cont.children.length;x++){
+                    cont.children[x].style.border = "2px solid transparent";
+                    for(let y=0;y<nodelinks[event.target.id.slice(5,event.target.id.length)]["ins"].length;y++){
+                        if(cont.children[x].id=="node"+nodelinks[event.target.id.slice(5,event.target.id.length)]["ins"][y]){
+                            cont.children[x].style.border = "2px solid green";
+                        }
+                    }
+                    for(let y=0;y<nodelinks[event.target.id.slice(5,event.target.id.length)]["outs"].length;y++){
+                        if(cont.children[x].id=="node"+nodelinks[event.target.id.slice(5,event.target.id.length)]["outs"][y]){
+                            cont.children[x].style.border = "2px solid red";
+                        }
+                    }
+
+                }
+                document.getElementById("node"+event.target.id.slice(5,event.target.id.length)).style.border = "2px solid white";
+            });
+            node.append(nodetitle);
+
+            let nodemain = document.createElement("div");
+            nodemain.className = "nodemain";
+            node.append(nodemain);
+
+            let nodein = document.createElement("div");
+            nodein.className = "nodein";
+            nodemain.append(nodein);
+            for(let j=0; j<nodelinks[v[i]]["ins"].length;j++){
+                let inputnode = document.createElement("div");
+                inputnode.innerHTML = nodelinks[v[i]]["ins"][j];
+                nodein.append(inputnode);
+            }
+
+            let nodeinps = document.createElement("div");
+            nodeinps.className = "nodeinps";
+            nodemain.append(nodeinps);
+            for(let j=0;j<Object.keys(data["prompt_workflow"][v[i]]["inputs"]).length;j++){
+                if(!(Array.isArray(data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]]))){
+                    let inputvarcont = document.createElement("div");
+                    inputvarcont.className = "inputvarcont";
+                    nodeinps.append(inputvarcont);
+
+                    let inputtitle = document.createElement("div");
+                    inputtitle.innerHTML = Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j];
+                    inputtitle.className = "inputtitle";
+                    inputvarcont.append(inputtitle);
+                    if(Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j].includes("model_name") || Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j].includes("ckpt_name")){
+                        let cont = document.createElement("div");
+                        cont.id = "modelsdropdown"+v[i];
+                        cont.className = "dropdown";
+                        inputvarcont.append(cont);
+                        let btn = document.createElement("button");
+                        btn.className = "dropbtn";
+                        btn.innerHTML = data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]];
+                        btn.id = "modelbutton"+v[i];
+                        cont.append(btn);
+                        let drp = document.createElement("div");
+                        drp.className = "dropdown-content";
+                        drp.id = "modelscont"+v[i];
+                        cont.append(drp);
+                        grabwfsmodels(id=v[i],paramsdata=data,j=j,addtype="model");
+                        
+                    }
+                    else if(Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j].includes("lora_name")){
+                        let cont = document.createElement("div");
+                        cont.id = "lorasdropdown"+v[i];
+                        cont.className = "dropdown";
+                        inputvarcont.append(cont);
+                        let btn = document.createElement("button");
+                        btn.className = "dropbtn";
+                        btn.innerHTML = data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]];
+                        btn.id = "lorabutton"+v[i];
+                        cont.append(btn);
+                        let drp = document.createElement("div");
+                        drp.className = "dropdown-content";
+                        drp.id = "lorascont"+v[i];
+                        cont.append(drp);
+                        grabwfsmodels(id=v[i],paramsdata=data,j=j,addtype="lora");
+                        
+                    }
+
+                    else{
+                        let inputvar = document.createElement("input");
+                        inputvar.placeholder = data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]];
+                        inputvar.value = data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]];
+                        inputvar.className = "inputvar";
+                        inputvar.type = typeof(data["prompt_workflow"][v[i]]["inputs"][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]]);
+                        inputvar.addEventListener("change",function(event){
+                            if(changedparams[v[i]]==undefined){
+                                changedparams[v[i]] = {};
+                            }
+                            changedparams[v[i]][Object.keys(data["prompt_workflow"][v[i]]["inputs"])[j]] = inputvar.value;
+                        });
+                        inputvarcont.append(inputvar);
+                    }
+                }
+            }
+            
+
+            let nodeout = document.createElement("div");
+            nodeout.className = "nodeout";
+            nodemain.append(nodeout);
+            for(let j =0;j<nodelinks[v[i]]["outs"].length;j++){
+                let outputnode = document.createElement("div");
+                outputnode.innerHTML = nodelinks[v[i]]["outs"][j];
+                nodeout.append(outputnode);
+            }
+
+        }
+    });
+}
+
+function showStack(){
+    if(selwf!=""){
+        document.getElementById("stack").style.visibility = "visible";
+        stackNodes();
+    }
+}
+
+function returnToCanvas(){
+    document.getElementById("stack").style.visibility = "hidden";
+}
+
+
+function gridDraw(){
+    if(grid){
+        grid = false;
+        gridpoints = [];
+        document.getElementById('grid').style.visibility = "hidden";
+    }
+    else{
+        grid = true;
+        gridpoints = [];
+        document.getElementById('grid').style.visibility = "visible";
+        var can = document.getElementById('grid');
+        can.width = screen.availWidth;
+        can.height = screen.availHeight;
+        var ctx = can.getContext('2d');
+        ctx.clearRect(0,0,can.width,can.height);
+
+        ctx.lineWidth = 2;
+        ctx.lineCap = "round";
+
+        let n = gridsize;
+        let nx = Math.floor(screen.availWidth/n);
+        let ny = Math.floor(screen.availHeight/n);
+        gridpoints.push([0,0]);
+        for(let i =0;i<nx;i++){
+            for(let j =0;j<nx;j++){
+                var grad= ctx.createLinearGradient(i*n, j*n, i*n, n*(j+1));
+                grad.addColorStop(0, "rgb(125,125,125)");
+                grad.addColorStop(0.5, "black");
+                grad.addColorStop(1, "rgb(125,125,125)");
+                ctx.strokeStyle = grad;
+                ctx.beginPath();
+                ctx.moveTo(i*n,j*n);
+                ctx.lineTo(i*n,n*(j+1));
+                ctx.stroke();
+                gridpoints.push([i*n,n*(j+1)]);
+            }
+        }
+        for(let i =0;i<nx;i++){
+            for(let j =0;j<nx;j++){
+                var grad= ctx.createLinearGradient(i*n,  j*n,(i+1)*n, j*n);
+                grad.addColorStop(0, "rgb(125,125,125)");
+                grad.addColorStop(0.5, "black");
+                grad.addColorStop(1, "rgb(125,125,125)");
+                ctx.strokeStyle = grad;
+                ctx.beginPath();
+                ctx.moveTo(i*n,j*n);
+                ctx.lineTo((i+1)*n,n*j);
+                ctx.stroke();
+            }
+        }
+    }
+
+}
+
+function setGridSize(event){
+    gridsize = event.target.value;
+}
+
+function maskreset(){
+    savedata["mskarray"] = "";
+}
+
+function auraAnimate(n,dir="up",clrs=[[255,0,0],[0,255,255],[0,255,0],[0,0,255],[255,0,255],[["up","down","down"],["down","up","up"],["down","up","down"],["down","down","up"],["up","down","up"]]]){
+    let el = document.getElementById("aura");
+    for(let i = 0;i<clrs.length;i++){
+        for(let j =0;j<3;j++){
+            if(clrs[i][j]>-1){
+                if(clrs[i][j]>=255){
+                    clrs[i][j]-=1;
+                    clrs[5][i][j] = "down";
+                }
+                else if(clrs[i][j]<=0){
+                    clrs[i][j]+=1;
+                    clrs[5][i][j] = "up";
+                }
+                else{
+                    if(clrs[5][i][j] == "down"){
+                        clrs[i][j]-=1;
+                    }
+                    else{
+                        clrs[i][j]+=1;
+                    }
+                }
+            }
+        }
+    }
+    el.style.filter = "blur("+n+"px)";
+    el.style.background = "linear-gradient(to left,"+"rgb("+clrs[0][0]+","+clrs[0][1]+","+clrs[0][2]+")"+","+"rgb("+clrs[1][0]+","+clrs[1][1]+","+clrs[1][2]+")"+","+"rgb("+clrs[2][0]+","+clrs[2][1]+","+clrs[2][2]+")"+","+"rgb("+clrs[3][0]+","+clrs[3][1]+","+clrs[3][2]+")"+","+"rgb("+clrs[4][0]+","+clrs[4][1]+","+clrs[4][2]+")"+")";
+    if(n>300){
+        dir="down";
+    }
+    else if(n<100){
+        dir="up";
+    }
+    if(generating){
+        if(dir=="up"){
+            n+=10;
+            setTimeout(() => {
+                auraAnimate(n,dir="up",clrs);
+            }, 50);
+        }
+        else if(dir=="down"){
+            n-=10;
+            setTimeout(() => {
+                auraAnimate(n,dir="down",clrs);
+            }, 50);
+        }
+    }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/static/faviicon.ico b/ComfyCanvas/static/faviicon.ico
new file mode 100644
index 0000000..38f871f
Binary files /dev/null and b/ComfyCanvas/static/faviicon.ico differ
diff --git a/ComfyCanvas/static/styles.css b/ComfyCanvas/static/styles.css
new file mode 100644
index 0000000..6fbcb07
--- /dev/null
+++ b/ComfyCanvas/static/styles.css
@@ -0,0 +1,603 @@
+#settings2{
+    width: 100%;
+    height: 10%;
+    background: linear-gradient(to bottom,rgb(44, 44, 44) 80%, rgb(36, 36, 36));
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    z-index: 3;
+    visibility: hidden;
+}
+
+#msg{
+    position: absolute;
+    width: 90%;
+    height: 90%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    visibility: hidden;
+    font-size: 50px;
+    background-color: rgb(80, 80, 80);
+}
+
+#source,#sourceunder,#taesdcanvas{
+    position: fixed;
+    left: 0px;
+    top: 0px;
+
+}
+
+#selector{
+    width: 256px;
+    height: 256px;
+    background-color: transparent;
+    left: 0px;
+    top: 0px;
+    position: fixed;
+    border: 2px solid green;
+    transform: translate(-50%,-50%);
+    z-index: 3;
+}
+
+#openimg{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    font-size: xx-large;
+    text-align: center;
+}
+
+#uploadcontainer{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0%;
+    opacity: 0;
+    background: linear-gradient(to bottom,black,rgb(20,20,20),black);
+    left: 0%;
+    z-index: 4;
+    
+}
+#sourceimg{
+    display: none;
+}
+#source,.canvas{
+    z-index: 2;
+}
+#taesdcanvas{
+    z-index: 1;
+}
+
+#moveimg2{
+    position: absolute;
+    top: 50%;
+    left: 15%;
+    width: 10%;
+    height: 50%;
+    background-color: rgb(80, 80, 80);
+    transform: translate(-50%,-50%);
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    cursor: pointer;
+}
+#moveimg2:hover{
+    background-color: rgb(20, 20, 20);
+}
+
+.moveimgclass,#done,#moveimg1{
+    position: absolute;
+    top: 50%;
+    width: 10%;
+    height: 50%;
+    background-color: rgb(80, 80, 80);
+    transform: translate(-50%,-50%);
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    cursor: pointer;
+    z-index: 1;
+}
+.moveimgclass:hover{
+    background-color: rgb(20, 20, 20);
+}
+#done{
+    left: 95%;
+}
+#moveimg1{
+    left: 5%;
+}
+
+#cancel{
+    position: fixed;
+    width: 20%;
+    height: 5%;
+    top: 12%;
+    left: 94%;
+    visibility: hidden;
+    color: wheat;
+    transform: rotate(45deg);
+    cursor: pointer;
+    font-size: 150px;
+    z-index: 1001;
+}
+
+#cancel:hover{
+    filter: brightness(50%);
+}
+
+#compare{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    background-color: rgba(255, 0, 0, 0.336);
+    overflow: hidden;
+    visibility: hidden;
+    z-index: 2;
+}
+
+
+
+
+
+
+/*##################################################*/
+
+html{
+    background: linear-gradient(to bottom,rgb(20, 20, 20) 80%, rgb(0, 0, 0));
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+input{
+    background-color: rgb(20, 20, 20);
+    border-radius: 5%;
+    outline: none;
+    caret-color: transparent;
+    color: white;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    border: 1px solid transparent;
+    text-align: center;
+}
+
+p{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: white;    
+}
+
+#container{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#settings{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10%;
+    background: linear-gradient(to bottom,rgb(52, 52, 52) 80%, rgb(44, 44, 44));
+    display: flex;
+    align-items:start;
+    z-index: 3;
+    padding-top: 0.5%;
+    padding-left: 1%;
+    padding-right: 1%;
+    box-shadow: 10px 10px 20px black;
+}
+
+#settingsbarbtns{
+    width: 25%;
+    height: 50%;
+    display: flex;
+    justify-content: flex-start;
+    align-items:flex-start;
+    flex-wrap: wrap;
+}
+
+#settingsbarparams{
+    width: 46%;
+    height: 80%;
+    display: flex;
+    justify-content: flex-start;
+    align-items:flex-start;
+    flex-wrap: wrap;
+}
+
+#workflowsettings, #generalsettings{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 50%;
+}
+
+#locksetts, #lockfull, #othersetts{
+    display: flex;
+    height: 30%;
+}
+
+#lockfull .btn,#locksetts .btn, #othersetts .btn{
+    width: 100%;
+    padding: 3%;
+}
+
+#settingsbarthird{
+    display: flex;
+    flex-direction: column;
+    width: 20%;
+    height: 80%;
+    padding-left: 5%;
+}
+
+#uploadanotherimg,#openimgadd,#openimgadd2{
+    position: absolute;
+    width: 2%;
+    height: 40%;
+    top: 30%;
+    left: 72.5%;
+    
+}
+
+#openimgadd2{
+    opacity: 0;
+}
+
+#uploadanotherimg{
+    display: flex;
+    background-color: rgb(20, 20, 20);
+    justify-content: center;
+    align-items: center;
+}
+
+#openimgadd{
+    opacity: 0;
+}
+
+.icontxt{
+    font-size: 50px;
+}
+
+.btn{
+    display: flex;
+    width: 25%;
+    height: 25%;
+    padding: 1%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background-color: rgb(80, 80, 80);
+    cursor: pointer;
+    border: 1px solid rgb(40, 40, 40);
+    border-radius: 8%;
+}
+.btn:hover{
+    background-color: rgb(20, 20, 20);
+}
+
+.txt{
+    color: white;
+    font-size: medium;
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+}
+
+#saveexit, #undo{
+    visibility: hidden;
+}
+
+.uploadstyle{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-weight: bolder;
+    font-size: 10vh;
+    justify-content: center;
+    align-items: center;
+}
+
+#hint{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 20%;
+    height: 8%;
+    border: 2px solid orange;
+    visibility: hidden;
+    z-index: 100;
+}
+
+#textinput{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 20%;
+    height: 8%;
+    border: 2px solid orange;
+    visibility: hidden;
+    z-index: 100;
+}
+
+#hint *{
+    color: orange;
+}
+
+#textinput *{
+    color: orange;
+}
+
+#resetref p{
+    font-size: small;
+}
+
+#drawer{
+    position: fixed;
+    top: 0%;
+    left: 99%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 25%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgb(20,20,20);
+    box-shadow: -10px 10px 50px black;
+    cursor: pointer;
+}
+
+#gligencont{
+    position: absolute;
+    width: 25%;
+    height: 60%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    border: 2px solid orange;
+    visibility: hidden;
+    z-index: 100;
+}
+
+.gligcond{
+    width: 20%;
+    height: 8%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: white;    
+    cursor: pointer;
+}
+
+#gligenconfirm{
+    display: flex;
+    width: 25%;
+    height: 10%;
+    padding: 1%;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border: white;
+    cursor: pointer;
+    border: 2px solid white;
+}
+
+#gligenmain{
+    background: rgba(0, 0, 0, 0.322);
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: white;
+    outline: transparent;
+}
+
+#settingsbarbtns *{
+    max-width: 22%;
+    font-size: 0.85rem;
+}
+
+#inprange,#gridrange{
+    width: 10%;
+    height: 10%;
+    accent-color: rgb(20,20,20);
+    outline: none;
+}
+#stack{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    z-index: 100;
+    background: black;
+    visibility: hidden;
+    justify-content: space-between;
+    overflow: scroll;
+    scrollbar-width:none;
+    scrollbar-color: transparent;
+}
+#stack *,#stack * *{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-weight: bolder;
+    color: white;
+    outline: transparent;
+    margin-top:1%;
+    margin-bottom: 1%;
+    text-align: center;
+}
+
+.stackbar{
+    width: 100%;
+    height: 5%;
+    background: linear-gradient(to bottom,rgb(20, 20, 20) 80%, rgb(15, 15, 15),transparent);
+    font-size: xx-large;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-weight: bolder;
+    color: white;
+    outline: transparent;
+    cursor: pointer;
+}
+
+.node{
+    width: 30%;
+    height: 35%;
+    background: linear-gradient(to bottom,rgb(44, 44, 44) 80%, rgb(36, 36, 36),transparent);
+    display: grid;
+    grid-template-areas: 
+                "title title title title"
+                "main main main main"
+                "main main main main"
+                "main main main main"
+    ;
+    border-radius: 15px;
+    cursor: pointer;
+}
+.nodetitle{
+    /* width: 100%;
+    height: 25%; */
+    background: rgb(44, 44, 44);
+    grid-area: title;
+}
+.nodemain{
+    /* width: 100%;
+    height: 75%; */
+    grid-area: main;
+    display: grid;
+    grid-template-areas: 
+                "in inps inps out"
+                "in inps inps out"
+                "in inps inps out"
+    ;
+
+}
+.nodein{
+    /* width: 20%;
+    height: 100%; */
+    background: rgb(36, 36, 36);
+    grid-area: in;
+}
+.nodeinps{
+    /* width: 60%;
+    height: 100%; */
+    background: rgb(50, 50, 50);
+    grid-area: inps;
+}
+.nodeout{
+    /* width: 20%;
+    height: 100%; */
+    background: rgb(36, 36, 36);
+    grid-area: out;
+}
+
+.inputvarcont{
+    display: grid;
+    grid-template-areas: "title empty empty var";
+}
+
+.inputtitle{
+    grid-area: title;
+}
+
+.inputvar{
+    grid-area: var;
+}
+
+
+
+.dropbtn {
+    background-color: transparent;
+    color: white;
+    padding: 5px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: rgb(20,20,20);
+    min-width: 160px;
+    max-height: 500px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    overflow: scroll;
+    scrollbar-width: none;
+    z-index: 3;
+    cursor: pointer;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: white;
+    padding: 12px 5px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: rgb(44, 44, 44)}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+    background-color: transparent;
+}
+.inputvarcont [class*="dropdown-content"]{
+    display: none;
+    position: sticky;
+    top: 16px;
+}
+
+#grid{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    visibility: hidden;
+    z-index: 1;
+}
+#blockactions{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    visibility: hidden;
+}
+#aura{
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 800px;
+    height: 800px;
+    filter: blur(50px);
+    background:  linear-gradient(to left,red,green,blue,yellow,cyan,magenta);
+    border-radius: 50%;
+    transition: 1s;
+    visibility: hidden;
+    opacity: 0;
+    transform: translate(-50%,-50%);
+}
+
+
+
+/*###############################*/
+
+
+
diff --git a/ComfyCanvas/templates/index.html b/ComfyCanvas/templates/index.html
new file mode 100644
index 0000000..aa434be
--- /dev/null
+++ b/ComfyCanvas/templates/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ComfyCanvas</title>
+        <link rel="stylesheet" href="/static/styles.css">
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+    </head>
+    <body onwheel="changesize(event);" onmousemove="mousecoordinates(event);" onkeydown="printLetter(event);">
+        <script src="/static/app.js"></script>
+        <div id="container" onmouseenter="reset();" style="width: 100%;height: 100%;">
+            <canvas id="grid"></canvas>
+            <div id="aura"></div>
+            <div id="canvascontainer">
+                <img id="sourceimg" src="{{byte_im}}" width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
+                <canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
+            </div>    
+            <div id="compare">
+                <img id="oldimg" width="512" height="512" src="">
+            </div>        
+            <div id="moveimglistner" style="position: absolute; width: 100%;height: 100%;top: 0%;left: 0%; z-index: 3;"  onclick="moveimg(); " onmousemove="grabselector();"></div>
+            <div id="selector" onmousemove="selector();" onclick="snapshot();"></div>
+            <div id="hint">
+                <p id="hinttext"></p><input id="hintinp" type="text" onchange="changeselectorsize(event);"><p>px</p>
+            </div>
+            <div id="textinput">
+                <input id="textinp" type="text" placeholder="Enter Text" size="10">
+            </div>
+            <div id="gligencont">
+                <div id="gligenconfirm" onclick="confirmGligen();"><p class="txt">Confirm</p></div>
+                <textarea rows="4" cols="40" id="gligenmain" type="text" placeholder="Enter Main Prompt" size="10"></textarea>
+            </div>
+            <div id="settings">
+                <div id="settingsbarbtns">
+                    <div id="setref" class="btn" onclick="setreftoggle();"><p class="txt">Set Ref.</p></div>
+                    <div id="resetref" class="btn" onclick="resetref();"><p class="txt">Reset Ref.</p></div>
+                    <div id="crop" class="btn" onclick="cropimg();"><p class="txt">Crop</p></div>
+                    <div id="compbtn" class="btn" onclick="compare();"><p class="txt">Compare</p></div>
+                    <div id="moveimg" class="btn" onclick="moveimgenablefirst();"><p class="txt">Move</p></div>
+                    <div id="eraseon" class="btn" onclick="erasemodeon()"><p class="txt">Erase</p></div>
+                    <div id="maskon" class="btn" onclick="maskmodeon()"><p class="txt">Mask</p></div>
+                    <div id="drawon" class="btn" onclick="drawmodeon()"><p class="txt">Draw</p></div>
+                    <div id="fit" class="btn" onclick="fit();"><p class="txt">Fit</p></div>
+                    <div id="uploadnew" class="btn" onclick="uploadnewimage();"><p class="txt">New</p></div>
+                    <div id="addtext" class="btn" onclick="addText();"><p class="txt">Text</p></div>
+                    <div id="gligen" class="btn" onclick="setGligen();"><p class="txt">GLIGEN</p></div>
+                    <div id="empty" class="btn" onclick="emptyCanvas();"><p class="txt">Blank</p></div>
+                    <div id="gridbtn" class="btn" onclick="gridDraw();"><p class="txt">Grid</p></div>
+                    <div id="lone" class="btn" onclick="setLone();"><p class="txt">COMFY</p></div>
+                    <div id="undo" class="btn" onclick="undoimg();"><p class="txt">Undo</p></div>
+                </div>
+                <div id="settingsbarparams">
+                    <div id="workflowsettings">
+                        <div class="dropdown" id="wfsdropdown">
+                            <button class="dropbtn" id="wfbutton">Select Workflow</button>
+                            <div class="dropdown-content" id="wfscont">
+                            </div>
+                        </div>
+                        <div class="dropdown" id="modelsdropdown">
+                            <button class="dropbtn" id="modelbutton">Select Model</button>
+                            <div class="dropdown-content" id="modelscont">
+                            </div>
+                        </div>
+                        <button class="dropbtn" id="paramsbutton" onclick="showStack();">Change Parameter</button>
+                        <div id="maskreset" class="btn txt" onclick="maskreset();">Reset Mask</div>
+                        <div id="paramvalue" class="btn txt" onclick="paramset();">Reset Parameters</div>
+                    </div>
+                    <div id="generalsettings">
+                        <p id="label">Box Size: </p>
+                        <input type="text" id="selectorsize" onchange="changeselectorsize(event);" size="4">
+                        <p id="label2">Fade Factor: </p>
+                        <input id="ff" type="text" size="4"  onchange="ffupdate();">
+                        <p id="label3">Eraser/Pencil Size: </p>
+                        <input id="erasersize" type="text" size="4">
+                        <input id="clr" type="color" size="3">
+                        <input id="inprange" type="range" min="0" max="255" step="1">
+                        <input id="gridrange" type="range" min="64" max="512" value="128" step="64" onchange="setGridSize(event);">
+                    </div>
+                </div>
+                <div id="settingsbarthird">
+                    <div id="locksetts">
+                        <div id="lockleft" class="btn" onclick="lockleft();"><p class="txt">Left</p></div>
+                        <div id="lockright" class="btn" onclick="lockright();"><p class="txt">Right</p></div>
+                        <div id="lockbottom" class="btn" onclick="lockbottom();"><p class="txt">Bottom</p></div>
+                        <div id="locktop" class="btn" onclick="locktop();"><p class="txt">Top</p></div>
+                    </div>
+                    <div id="lockfull">
+                        <div id="lockbox" class="btn" onclick="lockbox();"><p class="txt">Lock To Image</p></div>
+                    </div>
+                    <div id="othersetts">
+                        <div id="resetimg" class="btn" onclick="resetimg();"><p class="txt">Reset Image</p></div>
+                        <div id="saveimg" class="btn" onclick="saveimg()"><p class="txt">Save Image</p></div>
+                        <div id="saveexit" class="btn" onclick="savejson()"><p class="txt">Generate</p></div>                        
+                    </div>
+                </div>
+                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
+                <input id="openimgadd" type="file">
+            </div>
+            <div id="settings2">
+                <div id="moveimg1"  onclick="moveimgenable();"><p class="txt">Move Image</p></div>
+                <div id="done" onclick="compimage();"><p class="txt">Done</p></div>
+                <label for="openimgadd2" id="uploadanotherimg"><p class="icontxt">+</p></label>
+            </div>
+            <div id="uploadcontainer">
+                <label for="openimg" class="uploadstyle">
+                    <p>Upload Image</p>
+                </label>
+                <input id="openimg" type="file">
+            </div>
+                
+                
+        </div>
+        <div id="drawer" onclick="expandDrawer();">
+            <img id="img5" width="150" height="150" onclick="openDrawerImage(event);">
+            <img id="img4" width="150" height="150" onclick="openDrawerImage(event);">
+            <img id="img3" width="150" height="150" onclick="openDrawerImage(event);">
+            <img id="img2" width="150" height="150" onclick="openDrawerImage(event);">
+            <img id="img1" width="150" height="150" onclick="openDrawerImage(event);">
+        </div>
+        <div id="stack"></div>
+        <div id="blockactions"></div>
+        <div id="cancel" onclick="cancelgen();">+</div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/CannyPreprocessor.json b/ComfyCanvas/workflows/CannyPreprocessor.json
new file mode 100644
index 0000000..61472f1
--- /dev/null
+++ b/ComfyCanvas/workflows/CannyPreprocessor.json
@@ -0,0 +1,86 @@
+{
+  "34": {
+    "inputs": {
+      "seed": 993969723888326
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "35": {
+    "inputs": {
+      "images": [
+        "34",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "36": {
+    "inputs": {
+      "images": [
+        "34",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "37": {
+    "inputs": {
+      "images": [
+        "34",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "49": {
+    "inputs": {
+      "low_threshold": 0.4,
+      "high_threshold": 0.8,
+      "image": [
+        "34",
+        0
+      ]
+    },
+    "class_type": "Canny",
+    "_meta": {
+      "title": "Canny"
+    }
+  },
+  "50": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "51",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "51": {
+    "inputs": {
+      "image": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/IPAdapterInpaint_CustomDiffusers.json b/ComfyCanvas/workflows/IPAdapterInpaint_CustomDiffusers.json
new file mode 100644
index 0000000..b4fbe0c
--- /dev/null
+++ b/ComfyCanvas/workflows/IPAdapterInpaint_CustomDiffusers.json
@@ -0,0 +1,146 @@
+{
+  "16": {
+    "inputs": {
+      "seed": 25670445128187
+    },
+    "class_type": "OutpaintCanvasTool"
+  },
+  "19": {
+    "inputs": {
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "20": {
+    "inputs": {
+      "images": [
+        "16",
+        1
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "21": {
+    "inputs": {
+      "images": [
+        "16",
+        2
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "22": {
+    "inputs": {
+      "image": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "stitch"
+  },
+  "23": {
+    "inputs": {
+      "image": [
+        "32",
+        0
+      ]
+    },
+    "class_type": "ImageOutputToComfyNodes"
+  },
+  "26": {
+    "inputs": {
+      "device": "GPU",
+      "tomesd_value": 0.6,
+      "ip_adapter": "enable",
+      "reference_only": "disable",
+      "ip_adapter_model": "ip-adapter_sd15.bin",
+      "model_name": "Juggernaut",
+      "controlnet_model": "cn_inpaint"
+    },
+    "class_type": "LCMLoraLoader_inpaint"
+  },
+  "29": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas"
+  },
+  "30": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "16",
+        2
+      ],
+      "resize_width": [
+        "31",
+        0
+      ],
+      "resize_height": [
+        "31",
+        1
+      ]
+    },
+    "class_type": "ImageResize"
+  },
+  "31": {
+    "inputs": {
+      "image": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "ImageDims"
+  },
+  "32": {
+    "inputs": {
+      "seed": 0,
+      "text": "",
+      "steps": 4,
+      "cfg": 1.5,
+      "reference_style_fidelity": 0.1,
+      "batch": 1,
+      "strength": 1,
+      "prompt_weighting": "disable",
+      "controlnet_weight": 1,
+      "reference_only": "disable",
+      "ip_adapter": "enable",
+      "ipadapter_scale": 0.25,
+      "width": [
+        "31",
+        0
+      ],
+      "height": [
+        "31",
+        1
+      ],
+      "mask": [
+        "16",
+        1
+      ],
+      "image": [
+        "16",
+        0
+      ],
+      "reference_image": [
+        "30",
+        0
+      ],
+      "pipe": [
+        "26",
+        0
+      ]
+    },
+    "class_type": "LCMLora_inpaintV2"
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/IPAdapterPlus.json b/ComfyCanvas/workflows/IPAdapterPlus.json
new file mode 100644
index 0000000..abb0890
--- /dev/null
+++ b/ComfyCanvas/workflows/IPAdapterPlus.json
@@ -0,0 +1,490 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 955775047067856,
+      "steps": 8,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.72,
+      "model": [
+        "20",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "25",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "47",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "blurry, noisy, messy, lowres, jpeg, artifacts, ill, distorted, malformed",
+      "clip": [
+        "47",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "54",
+        0
+      ],
+      "vae": [
+        "47",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "9": {
+    "inputs": {
+      "filename_prefix": "IPAdapter",
+      "images": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "Save Image"
+    }
+  },
+  "11": {
+    "inputs": {
+      "preset": "PLUS (high strength)",
+      "model": [
+        "47",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "14": {
+    "inputs": {
+      "weight": 1,
+      "weight_type": "linear",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "11",
+        0
+      ],
+      "ipadapter": [
+        "11",
+        1
+      ],
+      "pos_embed": [
+        "18",
+        0
+      ]
+    },
+    "class_type": "IPAdapterEmbeds",
+    "_meta": {
+      "title": "IPAdapter Embeds"
+    }
+  },
+  "16": {
+    "inputs": {
+      "weight": 0.75,
+      "ipadapter": [
+        "11",
+        1
+      ],
+      "image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "IPAdapterEncoder",
+    "_meta": {
+      "title": "IPAdapter Encoder"
+    }
+  },
+  "18": {
+    "inputs": {
+      "method": "average",
+      "embed1": [
+        "16",
+        0
+      ],
+      "embed4": [
+        "34",
+        0
+      ]
+    },
+    "class_type": "IPAdapterCombineEmbeds",
+    "_meta": {
+      "title": "IPAdapter Combine Embeds"
+    }
+  },
+  "19": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "14",
+        0
+      ],
+      "clip": [
+        "47",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "20": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "19",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "25": {
+    "inputs": {
+      "pixels": [
+        "55",
+        1
+      ],
+      "vae": [
+        "47",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "29": {
+    "inputs": {
+      "images": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "32": {
+    "inputs": {
+      "images": [
+        "55",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "34": {
+    "inputs": {
+      "weight": 0.73,
+      "ipadapter": [
+        "11",
+        1
+      ],
+      "image": [
+        "55",
+        1
+      ]
+    },
+    "class_type": "IPAdapterEncoder",
+    "_meta": {
+      "title": "IPAdapter Encoder"
+    }
+  },
+  "38": {
+    "inputs": {
+      "samples": [
+        "52",
+        0
+      ],
+      "vae": [
+        "47",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "40": {
+    "inputs": {
+      "add_noise": true,
+      "noise_seed": 588264651398944,
+      "cfg": 0.7000000000000001,
+      "model": [
+        "48",
+        0
+      ],
+      "positive": [
+        "49",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "sampler": [
+        "43",
+        0
+      ],
+      "sigmas": [
+        "42",
+        0
+      ],
+      "latent_image": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "SamplerCustom",
+    "_meta": {
+      "title": "SamplerCustom"
+    }
+  },
+  "42": {
+    "inputs": {
+      "steps": 8,
+      "model": [
+        "19",
+        0
+      ]
+    },
+    "class_type": "TCDScheduler",
+    "_meta": {
+      "title": "TCDScheduler"
+    }
+  },
+  "43": {
+    "inputs": {
+      "gamma": 0.7500000000000003
+    },
+    "class_type": "SamplerTCD",
+    "_meta": {
+      "title": "SamplerTCD"
+    }
+  },
+  "47": {
+    "inputs": {
+      "model_path": "Juggernaut"
+    },
+    "class_type": "DiffusersLoader",
+    "_meta": {
+      "title": "DiffusersLoader"
+    }
+  },
+  "48": {
+    "inputs": {
+      "lora_name": "Hyper-SD15-8steps-lora.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "14",
+        0
+      ],
+      "clip": [
+        "47",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "49": {
+    "inputs": {
+      "strength": 0.25,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "50",
+        0
+      ],
+      "image": [
+        "51",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "50": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_canny_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "51": {
+    "inputs": {
+      "low_threshold": 100,
+      "high_threshold": 200,
+      "resolution": 512,
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "CannyEdgePreprocessor",
+    "_meta": {
+      "title": "Canny Edge"
+    }
+  },
+  "52": {
+    "inputs": {
+      "samples": [
+        "40",
+        0
+      ]
+    },
+    "class_type": "ClearRamLatent",
+    "_meta": {
+      "title": "ClearRamLatent"
+    }
+  },
+  "54": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "ClearRamLatent",
+    "_meta": {
+      "title": "ClearRamLatent"
+    }
+  },
+  "55": {
+    "inputs": {
+      "switch": "enable",
+      "image_1": [
+        "56",
+        0
+      ],
+      "image_2": [
+        "56",
+        2
+      ]
+    },
+    "class_type": "ImageSwitch",
+    "_meta": {
+      "title": "ImageSwitch"
+    }
+  },
+  "56": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "57": {
+    "inputs": {
+      "image": [
+        "38",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "58": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "57",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/Img2Img.json b/ComfyCanvas/workflows/Img2Img.json
new file mode 100644
index 0000000..0379f2e
--- /dev/null
+++ b/ComfyCanvas/workflows/Img2Img.json
@@ -0,0 +1,335 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 928672654655209,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.55,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "61",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 556268881737588
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "59",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "width": 192,
+      "height": 192,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "57": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "59": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "8",
+        0
+      ],
+      "resize_width": [
+        "60",
+        0
+      ],
+      "resize_height": [
+        "60",
+        1
+      ]
+    },
+    "class_type": "ImageResize",
+    "_meta": {
+      "title": "ImageResize"
+    }
+  },
+  "60": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Size to Number",
+    "_meta": {
+      "title": "Image Size to Number"
+    }
+  },
+  "61": {
+    "inputs": {
+      "pixels": [
+        "57",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/Img2ImgCN.json b/ComfyCanvas/workflows/Img2ImgCN.json
new file mode 100644
index 0000000..c2107f1
--- /dev/null
+++ b/ComfyCanvas/workflows/Img2ImgCN.json
@@ -0,0 +1,379 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 928672654655209,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.55,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "64",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "61",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 556268881737588
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "59",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "width": 192,
+      "height": 192,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "57": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "59": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "8",
+        0
+      ],
+      "resize_width": [
+        "60",
+        0
+      ],
+      "resize_height": [
+        "60",
+        1
+      ]
+    },
+    "class_type": "ImageResize",
+    "_meta": {
+      "title": "ImageResize"
+    }
+  },
+  "60": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Size to Number",
+    "_meta": {
+      "title": "Image Size to Number"
+    }
+  },
+  "61": {
+    "inputs": {
+      "pixels": [
+        "57",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "62": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_canny_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "63": {
+    "inputs": {
+      "low_threshold": 0.4,
+      "high_threshold": 0.8,
+      "image": [
+        "57",
+        0
+      ]
+    },
+    "class_type": "Canny",
+    "_meta": {
+      "title": "Canny"
+    }
+  },
+  "64": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "62",
+        0
+      ],
+      "image": [
+        "63",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/Img2ImgFlorence.json b/ComfyCanvas/workflows/Img2ImgFlorence.json
new file mode 100644
index 0000000..6fef73c
--- /dev/null
+++ b/ComfyCanvas/workflows/Img2ImgFlorence.json
@@ -0,0 +1,372 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": [
+        "66",
+        2
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 928672654655209,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.55,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "61",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 556268881737588
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "59",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "width": 192,
+      "height": 192,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "57": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "59": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "8",
+        0
+      ],
+      "resize_width": [
+        "60",
+        0
+      ],
+      "resize_height": [
+        "60",
+        1
+      ]
+    },
+    "class_type": "ImageResize",
+    "_meta": {
+      "title": "ImageResize"
+    }
+  },
+  "60": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Size to Number",
+    "_meta": {
+      "title": "Image Size to Number"
+    }
+  },
+  "61": {
+    "inputs": {
+      "pixels": [
+        "57",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "65": {
+    "inputs": {
+      "model": "microsoft/Florence-2-base",
+      "precision": "fp16",
+      "attention": "eager"
+    },
+    "class_type": "DownloadAndLoadFlorence2Model",
+    "_meta": {
+      "title": "DownloadAndLoadFlorence2Model"
+    }
+  },
+  "66": {
+    "inputs": {
+      "text_input": "",
+      "task": "caption",
+      "fill_mask": true,
+      "keep_model_loaded": false,
+      "max_new_tokens": 1024,
+      "num_beams": 3,
+      "do_sample": true,
+      "image": [
+        "57",
+        0
+      ],
+      "florence2_model": [
+        "65",
+        0
+      ]
+    },
+    "class_type": "Florence2Run",
+    "_meta": {
+      "title": "Florence2Run"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/Img2ImgFlorenceCN.json b/ComfyCanvas/workflows/Img2ImgFlorenceCN.json
new file mode 100644
index 0000000..979baf3
--- /dev/null
+++ b/ComfyCanvas/workflows/Img2ImgFlorenceCN.json
@@ -0,0 +1,416 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": [
+        "66",
+        2
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 928672654655209,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.55,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "64",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "61",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 556268881737588
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "59",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "width": 192,
+      "height": 192,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "57": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "59": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "8",
+        0
+      ],
+      "resize_width": [
+        "60",
+        0
+      ],
+      "resize_height": [
+        "60",
+        1
+      ]
+    },
+    "class_type": "ImageResize",
+    "_meta": {
+      "title": "ImageResize"
+    }
+  },
+  "60": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Size to Number",
+    "_meta": {
+      "title": "Image Size to Number"
+    }
+  },
+  "61": {
+    "inputs": {
+      "pixels": [
+        "57",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "62": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_canny_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "63": {
+    "inputs": {
+      "low_threshold": 0.4,
+      "high_threshold": 0.8,
+      "image": [
+        "57",
+        0
+      ]
+    },
+    "class_type": "Canny",
+    "_meta": {
+      "title": "Canny"
+    }
+  },
+  "64": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "62",
+        0
+      ],
+      "image": [
+        "63",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "65": {
+    "inputs": {
+      "model": "microsoft/Florence-2-base",
+      "precision": "fp16",
+      "attention": "eager"
+    },
+    "class_type": "DownloadAndLoadFlorence2Model",
+    "_meta": {
+      "title": "DownloadAndLoadFlorence2Model"
+    }
+  },
+  "66": {
+    "inputs": {
+      "text_input": "",
+      "task": "caption",
+      "fill_mask": true,
+      "keep_model_loaded": false,
+      "max_new_tokens": 1024,
+      "num_beams": 3,
+      "do_sample": true,
+      "image": [
+        "57",
+        0
+      ],
+      "florence2_model": [
+        "65",
+        0
+      ]
+    },
+    "class_type": "Florence2Run",
+    "_meta": {
+      "title": "Florence2Run"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/Inpaint.json b/ComfyCanvas/workflows/Inpaint.json
new file mode 100644
index 0000000..179fa6c
--- /dev/null
+++ b/ComfyCanvas/workflows/Inpaint.json
@@ -0,0 +1,316 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 419862071280588,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 25360973447852
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "samples": [
+        "56",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "SetLatentNoiseMask",
+    "_meta": {
+      "title": "Set Latent Noise Mask"
+    }
+  },
+  "56": {
+    "inputs": {
+      "pixels": [
+        "48",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/InpaintFinal.json b/ComfyCanvas/workflows/InpaintFinal.json
new file mode 100644
index 0000000..5552265
--- /dev/null
+++ b/ComfyCanvas/workflows/InpaintFinal.json
@@ -0,0 +1,305 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 53176650469610,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 1,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "45",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "45": {
+    "inputs": {
+      "grow_mask_by": 6,
+      "pixels": [
+        "48",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "VAEEncodeForInpaint",
+    "_meta": {
+      "title": "VAE Encode (for Inpainting)"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 934164250824628
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/InpaintFix.json b/ComfyCanvas/workflows/InpaintFix.json
new file mode 100644
index 0000000..e890b51
--- /dev/null
+++ b/ComfyCanvas/workflows/InpaintFix.json
@@ -0,0 +1,400 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 947096890938678,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "59",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 806060987925818
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "60",
+        0
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "63",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "samples": [
+        "56",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "SetLatentNoiseMask",
+    "_meta": {
+      "title": "Set Latent Noise Mask"
+    }
+  },
+  "56": {
+    "inputs": {
+      "pixels": [
+        "59",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "59": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "60": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "62": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Get Image Size",
+    "_meta": {
+      "title": "Get Image Size"
+    }
+  },
+  "63": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": [
+        "62",
+        0
+      ],
+      "resize_height": [
+        "62",
+        1
+      ],
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "64": {
+    "inputs": {
+      "images": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/InpaintFlorence.json b/ComfyCanvas/workflows/InpaintFlorence.json
new file mode 100644
index 0000000..20b4f81
--- /dev/null
+++ b/ComfyCanvas/workflows/InpaintFlorence.json
@@ -0,0 +1,353 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": [
+        "58",
+        2
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 53176650469610,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 934164250824628
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "49": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "samples": [
+        "56",
+        0
+      ],
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "SetLatentNoiseMask",
+    "_meta": {
+      "title": "Set Latent Noise Mask"
+    }
+  },
+  "56": {
+    "inputs": {
+      "pixels": [
+        "48",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "57": {
+    "inputs": {
+      "model": "microsoft/Florence-2-base",
+      "precision": "fp16",
+      "attention": "eager"
+    },
+    "class_type": "DownloadAndLoadFlorence2Model",
+    "_meta": {
+      "title": "DownloadAndLoadFlorence2Model"
+    }
+  },
+  "58": {
+    "inputs": {
+      "text_input": "",
+      "task": "more_detailed_caption",
+      "fill_mask": true,
+      "keep_model_loaded": false,
+      "max_new_tokens": 1024,
+      "num_beams": 3,
+      "do_sample": true,
+      "image": [
+        "48",
+        0
+      ],
+      "florence2_model": [
+        "57",
+        0
+      ]
+    },
+    "class_type": "Florence2Run",
+    "_meta": {
+      "title": "Florence2Run"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/InpaintSAM2.json b/ComfyCanvas/workflows/InpaintSAM2.json
new file mode 100644
index 0000000..1b56e7c
--- /dev/null
+++ b/ComfyCanvas/workflows/InpaintSAM2.json
@@ -0,0 +1,371 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 387254176851829,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "58",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 477728007448946
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "samples": [
+        "56",
+        0
+      ],
+      "mask": [
+        "58",
+        0
+      ]
+    },
+    "class_type": "SetLatentNoiseMask",
+    "_meta": {
+      "title": "Set Latent Noise Mask"
+    }
+  },
+  "56": {
+    "inputs": {
+      "pixels": [
+        "48",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "57": {
+    "inputs": {
+      "model": "sam2_hiera_base_plus.safetensors",
+      "segmentor": "single_image",
+      "device": "cuda",
+      "precision": "fp16"
+    },
+    "class_type": "DownloadAndLoadSAM2Model",
+    "_meta": {
+      "title": "(Down)Load SAM2Model"
+    }
+  },
+  "58": {
+    "inputs": {
+      "keep_model_loaded": false,
+      "individual_objects": false,
+      "sam2_model": [
+        "57",
+        0
+      ],
+      "image": [
+        "48",
+        0
+      ],
+      "mask": [
+        "62",
+        0
+      ]
+    },
+    "class_type": "Sam2Segmentation",
+    "_meta": {
+      "title": "Sam2Segmentation"
+    }
+  },
+  "62": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "63": {
+    "inputs": {
+      "seed": 1110770721024009
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "64": {
+    "inputs": {
+      "images": [
+        "63",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/InpaintSAM2Fix.json b/ComfyCanvas/workflows/InpaintSAM2Fix.json
new file mode 100644
index 0000000..1f291c6
--- /dev/null
+++ b/ComfyCanvas/workflows/InpaintSAM2Fix.json
@@ -0,0 +1,443 @@
+{
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "34",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "15": {
+    "inputs": {
+      "weight": 0.5,
+      "weight_type": "linear",
+      "combine_embeds": "concat",
+      "start_at": 0,
+      "end_at": 1,
+      "embeds_scaling": "K+V",
+      "model": [
+        "16",
+        0
+      ],
+      "ipadapter": [
+        "16",
+        1
+      ],
+      "image": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "IPAdapterAdvanced",
+    "_meta": {
+      "title": "IPAdapter Advanced"
+    }
+  },
+  "16": {
+    "inputs": {
+      "preset": "STANDARD (medium strength)",
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "IPAdapterUnifiedLoader",
+    "_meta": {
+      "title": "IPAdapter Unified Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "15",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "31": {
+    "inputs": {
+      "strength": 1,
+      "conditioning": [
+        "6",
+        0
+      ],
+      "control_net": [
+        "32",
+        0
+      ],
+      "image": [
+        "46",
+        0
+      ]
+    },
+    "class_type": "ControlNetApply",
+    "_meta": {
+      "title": "Apply ControlNet"
+    }
+  },
+  "32": {
+    "inputs": {
+      "control_net_name": "control_lora_rank128_v11p_sd15_inpaint_fp16.safetensors"
+    },
+    "class_type": "ControlNetLoader",
+    "_meta": {
+      "title": "Load ControlNet Model"
+    }
+  },
+  "34": {
+    "inputs": {
+      "seed": 387254176851829,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "35",
+        0
+      ],
+      "positive": [
+        "31",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "55",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "35": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "46": {
+    "inputs": {
+      "image": [
+        "65",
+        0
+      ],
+      "mask": [
+        "58",
+        0
+      ]
+    },
+    "class_type": "InpaintPreprocessor",
+    "_meta": {
+      "title": "InpaintPreprocessor"
+    }
+  },
+  "48": {
+    "inputs": {
+      "seed": 477728007448946
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "50": {
+    "inputs": {
+      "image": [
+        "68",
+        0
+      ]
+    },
+    "class_type": "stitch",
+    "_meta": {
+      "title": "stitch"
+    }
+  },
+  "51": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "50",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "52": {
+    "inputs": {
+      "images": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "53": {
+    "inputs": {
+      "images": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "54": {
+    "inputs": {
+      "images": [
+        "48",
+        2
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "55": {
+    "inputs": {
+      "samples": [
+        "56",
+        0
+      ],
+      "mask": [
+        "58",
+        0
+      ]
+    },
+    "class_type": "SetLatentNoiseMask",
+    "_meta": {
+      "title": "Set Latent Noise Mask"
+    }
+  },
+  "56": {
+    "inputs": {
+      "pixels": [
+        "65",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "57": {
+    "inputs": {
+      "model": "sam2_hiera_base_plus.safetensors",
+      "segmentor": "single_image",
+      "device": "cuda",
+      "precision": "fp16"
+    },
+    "class_type": "DownloadAndLoadSAM2Model",
+    "_meta": {
+      "title": "(Down)Load SAM2Model"
+    }
+  },
+  "58": {
+    "inputs": {
+      "keep_model_loaded": false,
+      "individual_objects": false,
+      "sam2_model": [
+        "57",
+        0
+      ],
+      "image": [
+        "65",
+        0
+      ],
+      "mask": [
+        "62",
+        0
+      ]
+    },
+    "class_type": "Sam2Segmentation",
+    "_meta": {
+      "title": "Sam2Segmentation"
+    }
+  },
+  "62": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "66",
+        0
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "63": {
+    "inputs": {
+      "seed": 1110770721024009
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "64": {
+    "inputs": {
+      "images": [
+        "63",
+        1
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "65": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "66": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": 512,
+      "resize_height": 512,
+      "image": [
+        "48",
+        1
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  },
+  "67": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Get Image Size",
+    "_meta": {
+      "title": "Get Image Size"
+    }
+  },
+  "68": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "resize_width": [
+        "67",
+        0
+      ],
+      "resize_height": [
+        "67",
+        1
+      ],
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "Image Resize",
+    "_meta": {
+      "title": "Image Resize"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/IsolateBackground.json b/ComfyCanvas/workflows/IsolateBackground.json
new file mode 100644
index 0000000..d7d689f
--- /dev/null
+++ b/ComfyCanvas/workflows/IsolateBackground.json
@@ -0,0 +1,113 @@
+{
+  "3": {
+    "inputs": {},
+    "class_type": "BRIA_RMBG_ModelLoader_Zho",
+    "_meta": {
+      "title": "🧹BRIA_RMBG Model Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "rmbgmodel": [
+        "3",
+        0
+      ],
+      "image": [
+        "37",
+        2
+      ]
+    },
+    "class_type": "BRIA_RMBG_Zho",
+    "_meta": {
+      "title": "🧹BRIA RMBG"
+    }
+  },
+  "37": {
+    "inputs": {
+      "seed": 1056236704582682
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "41": {
+    "inputs": {
+      "images": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "42": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "43",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "43": {
+    "inputs": {
+      "image": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "44": {
+    "inputs": {
+      "mask": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "MaskToImage",
+    "_meta": {
+      "title": "Convert Mask to Image"
+    }
+  },
+  "48": {
+    "inputs": {
+      "force_resize_width": 0,
+      "force_resize_height": 0,
+      "image": [
+        "37",
+        2
+      ],
+      "mask": [
+        "44",
+        0
+      ]
+    },
+    "class_type": "Cut By Mask",
+    "_meta": {
+      "title": "Cut By Mask"
+    }
+  },
+  "49": {
+    "inputs": {
+      "mask": [
+        "17",
+        1
+      ]
+    },
+    "class_type": "InvertMask",
+    "_meta": {
+      "title": "InvertMask"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/IsolateSAM2.json b/ComfyCanvas/workflows/IsolateSAM2.json
new file mode 100644
index 0000000..7fe715c
--- /dev/null
+++ b/ComfyCanvas/workflows/IsolateSAM2.json
@@ -0,0 +1,159 @@
+{
+  "37": {
+    "inputs": {
+      "seed": 541389199520417
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "41": {
+    "inputs": {
+      "images": [
+        "47",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "42": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "43",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "43": {
+    "inputs": {
+      "image": [
+        "49",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "44": {
+    "inputs": {
+      "keep_model_loaded": true,
+      "individual_objects": false,
+      "sam2_model": [
+        "45",
+        0
+      ],
+      "image": [
+        "37",
+        2
+      ],
+      "mask": [
+        "48",
+        0
+      ]
+    },
+    "class_type": "Sam2Segmentation",
+    "_meta": {
+      "title": "Sam2Segmentation"
+    }
+  },
+  "45": {
+    "inputs": {
+      "model": "sam2_hiera_base_plus.safetensors",
+      "segmentor": "single_image",
+      "device": "cuda",
+      "precision": "fp16"
+    },
+    "class_type": "DownloadAndLoadSAM2Model",
+    "_meta": {
+      "title": "(Down)Load SAM2Model"
+    }
+  },
+  "47": {
+    "inputs": {
+      "mask": [
+        "44",
+        0
+      ]
+    },
+    "class_type": "MaskToImage",
+    "_meta": {
+      "title": "Convert Mask to Image"
+    }
+  },
+  "48": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "37",
+        1
+      ]
+    },
+    "class_type": "ImageToMask",
+    "_meta": {
+      "title": "Convert Image to Mask"
+    }
+  },
+  "49": {
+    "inputs": {
+      "blend_percentage": 1,
+      "image_a": [
+        "50",
+        0
+      ],
+      "image_b": [
+        "37",
+        0
+      ],
+      "mask": [
+        "47",
+        0
+      ]
+    },
+    "class_type": "Image Blend by Mask",
+    "_meta": {
+      "title": "Image Blend by Mask"
+    }
+  },
+  "50": {
+    "inputs": {
+      "width": [
+        "51",
+        0
+      ],
+      "height": [
+        "51",
+        1
+      ],
+      "red": 0,
+      "green": 0,
+      "blue": 0
+    },
+    "class_type": "Image Blank",
+    "_meta": {
+      "title": "Image Blank"
+    }
+  },
+  "51": {
+    "inputs": {
+      "image": [
+        "37",
+        0
+      ]
+    },
+    "class_type": "Get Image Size",
+    "_meta": {
+      "title": "Get Image Size"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/IsolateSubject.json b/ComfyCanvas/workflows/IsolateSubject.json
new file mode 100644
index 0000000..1666c35
--- /dev/null
+++ b/ComfyCanvas/workflows/IsolateSubject.json
@@ -0,0 +1,71 @@
+{
+  "3": {
+    "inputs": {},
+    "class_type": "BRIA_RMBG_ModelLoader_Zho",
+    "_meta": {
+      "title": "🧹BRIA_RMBG Model Loader"
+    }
+  },
+  "17": {
+    "inputs": {
+      "rmbgmodel": [
+        "3",
+        0
+      ],
+      "image": [
+        "37",
+        2
+      ]
+    },
+    "class_type": "BRIA_RMBG_Zho",
+    "_meta": {
+      "title": "🧹BRIA RMBG"
+    }
+  },
+  "37": {
+    "inputs": {
+      "seed": 776618294764060
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "41": {
+    "inputs": {
+      "images": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  },
+  "42": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "43",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "43": {
+    "inputs": {
+      "image": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/ReferenceOnlyIPAdapterInpaint_CustomDiffusers.json b/ComfyCanvas/workflows/ReferenceOnlyIPAdapterInpaint_CustomDiffusers.json
new file mode 100644
index 0000000..c090c62
--- /dev/null
+++ b/ComfyCanvas/workflows/ReferenceOnlyIPAdapterInpaint_CustomDiffusers.json
@@ -0,0 +1,119 @@
+{
+  "16": {
+    "inputs": {
+      "seed": 25670445128187
+    },
+    "class_type": "OutpaintCanvasTool"
+  },
+  "22": {
+    "inputs": {
+      "image": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "stitch"
+  },
+  "23": {
+    "inputs": {
+      "image": [
+        "32",
+        0
+      ]
+    },
+    "class_type": "ImageOutputToComfyNodes"
+  },
+  "26": {
+    "inputs": {
+      "device": "GPU",
+      "tomesd_value": 0.6,
+      "ip_adapter": "enable",
+      "reference_only": "enable",
+      "ip_adapter_model": "ip-adapter_sd15.bin",
+      "model_name": "Juggernaut",
+      "controlnet_model": "cn_inpaint"
+    },
+    "class_type": "LCMLoraLoader_inpaint"
+  },
+  "29": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas"
+  },
+  "30": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "16",
+        2
+      ],
+      "resize_width": [
+        "31",
+        0
+      ],
+      "resize_height": [
+        "31",
+        1
+      ]
+    },
+    "class_type": "ImageResize"
+  },
+  "31": {
+    "inputs": {
+      "image": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "ImageDims"
+  },
+  "32": {
+    "inputs": {
+      "seed": 0,
+      "text": "",
+      "steps": 4,
+      "cfg": 1.5,
+      "reference_style_fidelity": 0.1,
+      "batch": 1,
+      "strength": 1.0,
+      "prompt_weighting": "disable",
+      "controlnet_weight": 1,
+      "reference_only": "enable",
+      "ip_adapter": "enable",
+      "ipadapter_scale": 0.1,
+      "width": [
+        "31",
+        0
+      ],
+      "height": [
+        "31",
+        1
+      ],
+      "mask": [
+        "16",
+        1
+      ],
+      "image": [
+        "16",
+        0
+      ],
+      "reference_image": [
+        "30",
+        0
+      ],
+      "pipe": [
+        "26",
+        0
+      ]
+    },
+    "class_type": "LCMLora_inpaintV2"
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/ReferenceOnlyInpaint_CustomDiffusers.json b/ComfyCanvas/workflows/ReferenceOnlyInpaint_CustomDiffusers.json
new file mode 100644
index 0000000..9b1d5f5
--- /dev/null
+++ b/ComfyCanvas/workflows/ReferenceOnlyInpaint_CustomDiffusers.json
@@ -0,0 +1,146 @@
+{
+  "16": {
+    "inputs": {
+      "seed": 25670445128187
+    },
+    "class_type": "OutpaintCanvasTool"
+  },
+  "19": {
+    "inputs": {
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "20": {
+    "inputs": {
+      "images": [
+        "16",
+        1
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "21": {
+    "inputs": {
+      "images": [
+        "16",
+        2
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "22": {
+    "inputs": {
+      "image": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "stitch"
+  },
+  "23": {
+    "inputs": {
+      "image": [
+        "32",
+        0
+      ]
+    },
+    "class_type": "ImageOutputToComfyNodes"
+  },
+  "26": {
+    "inputs": {
+      "device": "GPU",
+      "tomesd_value": 0.6,
+      "ip_adapter": "disable",
+      "reference_only": "enable",
+      "ip_adapter_model": "ip-adapter_sd15.bin",
+      "model_name": "Juggernaut",
+      "controlnet_model": "cn_inpaint"
+    },
+    "class_type": "LCMLoraLoader_inpaint"
+  },
+  "29": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas"
+  },
+  "30": {
+    "inputs": {
+      "mode": "resize",
+      "supersample": "true",
+      "resampling": "lanczos",
+      "rescale_factor": 2,
+      "image": [
+        "16",
+        2
+      ],
+      "resize_width": [
+        "31",
+        0
+      ],
+      "resize_height": [
+        "31",
+        1
+      ]
+    },
+    "class_type": "ImageResize"
+  },
+  "31": {
+    "inputs": {
+      "image": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "ImageDims"
+  },
+  "32": {
+    "inputs": {
+      "seed": 0,
+      "text": "",
+      "steps": 4,
+      "cfg": 1.5,
+      "reference_style_fidelity": 0.1,
+      "batch": 1,
+      "strength": 1,
+      "prompt_weighting": "disable",
+      "controlnet_weight": 1,
+      "reference_only": "enable",
+      "ip_adapter": "disable",
+      "ipadapter_scale": 0.19,
+      "width": [
+        "31",
+        0
+      ],
+      "height": [
+        "31",
+        1
+      ],
+      "mask": [
+        "16",
+        1
+      ],
+      "image": [
+        "16",
+        0
+      ],
+      "reference_image": [
+        "30",
+        0
+      ],
+      "pipe": [
+        "26",
+        0
+      ]
+    },
+    "class_type": "LCMLora_inpaintV2"
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/areacomp.json b/ComfyCanvas/workflows/areacomp.json
new file mode 100644
index 0000000..a5846f9
--- /dev/null
+++ b/ComfyCanvas/workflows/areacomp.json
@@ -0,0 +1,174 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 8,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 1,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "photon_v1.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": [
+        "13",
+        0
+      ],
+      "height": [
+        "13",
+        1
+      ],
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "11",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "11": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoraLoaderModelOnly"
+    }
+  },
+  "12": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "13": {
+    "inputs": {
+      "image": [
+        "12",
+        2
+      ]
+    },
+    "class_type": "Get image size",
+    "_meta": {
+      "title": "Get image size"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/areacomp_img2img.json b/ComfyCanvas/workflows/areacomp_img2img.json
new file mode 100644
index 0000000..415d23a
--- /dev/null
+++ b/ComfyCanvas/workflows/areacomp_img2img.json
@@ -0,0 +1,161 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 8,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 1,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "15",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "photon_v1.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "11",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "11": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "model": [
+        "4",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoraLoaderModelOnly"
+    }
+  },
+  "12": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "15": {
+    "inputs": {
+      "pixels": [
+        "12",
+        2
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "16": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_img2img_unet_wf.json b/ComfyCanvas/workflows/gligen_img2img_unet_wf.json
new file mode 100644
index 0000000..19b88da
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_img2img_unet_wf.json
@@ -0,0 +1,186 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "11",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "18",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "model_path": "Deliberatev2"
+    },
+    "class_type": "DiffusersLoader",
+    "_meta": {
+      "title": "DiffusersLoader"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "11": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "18": {
+    "inputs": {
+      "pixels": [
+        "17",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_img2img_wf.json b/ComfyCanvas/workflows/gligen_img2img_wf.json
new file mode 100644
index 0000000..9cba3a9
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_img2img_wf.json
@@ -0,0 +1,186 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "11",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "18",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "11": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  },
+  "18": {
+    "inputs": {
+      "pixels": [
+        "17",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_v2_wf.json b/ComfyCanvas/workflows/gligen_v2_wf.json
new file mode 100644
index 0000000..040dcab
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_v2_wf.json
@@ -0,0 +1,210 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 8,
+      "cfg": 7,
+      "sampler_name": "ddim",
+      "scheduler": "sgm_uniform",
+      "denoise": 1,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "19",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "Hyper-SD15-8steps-CFG-lora.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "18": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "19": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "18",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_v3_unet_wf.json b/ComfyCanvas/workflows/gligen_v3_unet_wf.json
new file mode 100644
index 0000000..8d64df3
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_v3_unet_wf.json
@@ -0,0 +1,237 @@
+{
+  "3": {
+    "inputs": {
+      "add_noise": true,
+      "noise_seed": 0,
+      "cfg": 8,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "sampler": [
+        "22",
+        0
+      ],
+      "sigmas": [
+        "21",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "SamplerCustom",
+    "_meta": {
+      "title": "SamplerCustom"
+    }
+  },
+  "4": {
+    "inputs": {
+      "model_path": "Deliberatev2"
+    },
+    "class_type": "DiffusersLoader",
+    "_meta": {
+      "title": "DiffusersLoader"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "19",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "Hyper-SD15-8steps-CFG-lora.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "18": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "19": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "18",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "21": {
+    "inputs": {
+      "steps": 8,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "TCDScheduler",
+    "_meta": {
+      "title": "TCDScheduler"
+    }
+  },
+  "22": {
+    "inputs": {
+      "gamma": 0.3
+    },
+    "class_type": "SamplerTCD",
+    "_meta": {
+      "title": "SamplerTCD"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_v3_wf.json b/ComfyCanvas/workflows/gligen_v3_wf.json
new file mode 100644
index 0000000..f1ecdd0
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_v3_wf.json
@@ -0,0 +1,237 @@
+{
+  "3": {
+    "inputs": {
+      "add_noise": true,
+      "noise_seed": 0,
+      "cfg": 8,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "sampler": [
+        "22",
+        0
+      ],
+      "sigmas": [
+        "21",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "SamplerCustom",
+    "_meta": {
+      "title": "SamplerCustom"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "19",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "Hyper-SD15-8steps-CFG-lora.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "18": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "19": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "18",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "21": {
+    "inputs": {
+      "steps": 8,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "TCDScheduler",
+    "_meta": {
+      "title": "TCDScheduler"
+    }
+  },
+  "22": {
+    "inputs": {
+      "gamma": 0.3
+    },
+    "class_type": "SamplerTCD",
+    "_meta": {
+      "title": "SamplerTCD"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_wf.json b/ComfyCanvas/workflows/gligen_wf.json
new file mode 100644
index 0000000..a527492
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_wf.json
@@ -0,0 +1,161 @@
+{
+  "3": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 1,
+      "model": [
+        "11",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "11": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/gligen_wf4.json b/ComfyCanvas/workflows/gligen_wf4.json
new file mode 100644
index 0000000..26b0ec9
--- /dev/null
+++ b/ComfyCanvas/workflows/gligen_wf4.json
@@ -0,0 +1,264 @@
+{
+  "3": {
+    "inputs": {
+      "add_noise": true,
+      "noise_seed": 0,
+      "cfg": 8,
+      "model": [
+        "10",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "sampler": [
+        "22",
+        0
+      ],
+      "sigmas": [
+        "21",
+        0
+      ],
+      "latent_image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "SamplerCustom",
+    "_meta": {
+      "title": "SamplerCustom"
+    }
+  },
+  "4": {
+    "inputs": {
+      "ckpt_name": "dreamshaper_8.safetensors"
+    },
+    "class_type": "CheckpointLoaderSimple",
+    "_meta": {
+      "title": "Load Checkpoint"
+    }
+  },
+  "5": {
+    "inputs": {
+      "width": [
+        "24",
+        4
+      ],
+      "height": [
+        "24",
+        5
+      ],
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "Empty Latent Image"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "text, watermark",
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "19",
+        0
+      ],
+      "vae": [
+        "4",
+        2
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "10": {
+    "inputs": {
+      "lora_name": "Hyper-SD15-8steps-CFG-lora.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "12": {
+    "inputs": {
+      "gligen_name": "gligen_sd14_textbox_pruned.safetensors"
+    },
+    "class_type": "GLIGENLoader",
+    "_meta": {
+      "title": "GLIGENLoader"
+    }
+  },
+  "15": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "16",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas",
+    "_meta": {
+      "title": "SaveImage_Canvas"
+    }
+  },
+  "16": {
+    "inputs": {
+      "image": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas",
+    "_meta": {
+      "title": "ComfyNodesToSaveCanvas"
+    }
+  },
+  "17": {
+    "inputs": {
+      "lora_name": "pytorch_lora_weights_lcm.safetensors",
+      "strength_model": 1,
+      "strength_clip": 1,
+      "model": [
+        "4",
+        0
+      ],
+      "clip": [
+        "4",
+        1
+      ]
+    },
+    "class_type": "LoraLoader",
+    "_meta": {
+      "title": "Load LoRA"
+    }
+  },
+  "18": {
+    "inputs": {
+      "sampling": "lcm",
+      "zsnr": false,
+      "model": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingDiscrete",
+    "_meta": {
+      "title": "ModelSamplingDiscrete"
+    }
+  },
+  "19": {
+    "inputs": {
+      "seed": 156680208700286,
+      "steps": 4,
+      "cfg": 1.5,
+      "sampler_name": "lcm",
+      "scheduler": "sgm_uniform",
+      "denoise": 0.5,
+      "model": [
+        "18",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "21": {
+    "inputs": {
+      "steps": 8,
+      "model": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "TCDScheduler",
+    "_meta": {
+      "title": "TCDScheduler"
+    }
+  },
+  "22": {
+    "inputs": {
+      "gamma": 0.3
+    },
+    "class_type": "SamplerTCD",
+    "_meta": {
+      "title": "SamplerTCD"
+    }
+  },
+  "24": {
+    "inputs": {
+      "image": [
+        "25",
+        2
+      ]
+    },
+    "class_type": "Image Size to Number",
+    "_meta": {
+      "title": "Image Size to Number"
+    }
+  },
+  "25": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool",
+    "_meta": {
+      "title": "OutpaintCanvasTool"
+    }
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/saveimg.json b/ComfyCanvas/workflows/saveimg.json
new file mode 100644
index 0000000..d827af0
--- /dev/null
+++ b/ComfyCanvas/workflows/saveimg.json
@@ -0,0 +1,18 @@
+{
+  "1": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool"
+  },
+  "2": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "1",
+        0
+      ]
+    },
+    "class_type": "SaveImage"
+  }
+}
\ No newline at end of file
diff --git a/ComfyCanvas/workflows/stickerize.json b/ComfyCanvas/workflows/stickerize.json
new file mode 100644
index 0000000..5865d07
--- /dev/null
+++ b/ComfyCanvas/workflows/stickerize.json
@@ -0,0 +1,266 @@
+{
+  "3": {
+    "inputs": {},
+    "class_type": "BRIA_RMBG_ModelLoader_Zho"
+  },
+  "5": {
+    "inputs": {
+      "force_resize_width": 0,
+      "force_resize_height": 0,
+      "image": [
+        "30",
+        0
+      ],
+      "mask": [
+        "28",
+        0
+      ]
+    },
+    "class_type": "Cut By Mask"
+  },
+  "8": {
+    "inputs": {
+      "channel": "red",
+      "image": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "ImageToMask"
+  },
+  "10": {
+    "inputs": {
+      "expand": 40,
+      "tapered_corners": true,
+      "mask": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "GrowMask"
+  },
+  "11": {
+    "inputs": {
+      "width": 2108,
+      "height": 2108,
+      "batch_size": 1,
+      "color": 0
+    },
+    "class_type": "EmptyImage"
+  },
+  "12": {
+    "inputs": {
+      "top": 40,
+      "left": 40,
+      "right": 2088,
+      "bottom": 2088,
+      "crop_blending": 0,
+      "crop_sharpening": 0,
+      "image": [
+        "11",
+        0
+      ],
+      "crop_image": [
+        "35",
+        0
+      ]
+    },
+    "class_type": "Image Paste Crop by Location"
+  },
+  "15": {
+    "inputs": {
+      "images": [
+        "12",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "17": {
+    "inputs": {
+      "rmbgmodel": [
+        "3",
+        0
+      ],
+      "image": [
+        "12",
+        0
+      ]
+    },
+    "class_type": "BRIA_RMBG_Zho"
+  },
+  "18": {
+    "inputs": {
+      "images": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "20": {
+    "inputs": {
+      "mask": [
+        "17",
+        1
+      ]
+    },
+    "class_type": "MaskToImage"
+  },
+  "21": {
+    "inputs": {
+      "images": [
+        "20",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "22": {
+    "inputs": {
+      "bin_threshold": 100,
+      "resolution": 2048,
+      "image": [
+        "20",
+        0
+      ]
+    },
+    "class_type": "BinaryPreprocessor"
+  },
+  "23": {
+    "inputs": {
+      "sigma": 10,
+      "masks": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "Mask Smooth Region"
+  },
+  "25": {
+    "inputs": {
+      "images": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "26": {
+    "inputs": {
+      "images": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "27": {
+    "inputs": {
+      "mask": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "MaskToImage"
+  },
+  "28": {
+    "inputs": {
+      "mask": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "MaskToImage"
+  },
+  "29": {
+    "inputs": {
+      "images": [
+        "28",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "30": {
+    "inputs": {
+      "top": 20,
+      "left": 20,
+      "right": 2068,
+      "bottom": 2068,
+      "crop_blending": 0,
+      "crop_sharpening": 0,
+      "image": [
+        "28",
+        0
+      ],
+      "crop_image": [
+        "17",
+        0
+      ]
+    },
+    "class_type": "Image Paste Crop by Location"
+  },
+  "31": {
+    "inputs": {
+      "images": [
+        "30",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "32": {
+    "inputs": {
+      "images": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "PreviewImage"
+  },
+  "34": {
+    "inputs": {
+      "model_name": "realesr-general-x4v3.pth"
+    },
+    "class_type": "UpscaleModelLoader"
+  },
+  "35": {
+    "inputs": {
+      "upscale_model": [
+        "34",
+        0
+      ],
+      "image": [
+        "37",
+        0
+      ]
+    },
+    "class_type": "ImageUpscaleWithModel"
+  },
+  "37": {
+    "inputs": {
+      "seed": 0
+    },
+    "class_type": "OutpaintCanvasTool"
+  },
+  "38": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "SaveImage_Canvas"
+  },
+  "39": {
+    "inputs": {
+      "image": [
+        "5",
+        0
+      ]
+    },
+    "class_type": "ComfyNodesToSaveCanvas"
+  }
+}
\ No newline at end of file