Merge Beta

CHANGES.md

@@ -22,6 +22,14 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
+* 3.0.1 - 17 Aug 2023 - Fix broken embeddings with SDXL.
+* 3.0.1 - 16 Aug 2023 - Fix broken LoRA with SDXL.
+* 3.0.1 - 15 Aug 2023 - Fix broken seamless tiling.
+* 3.0.1 - 15 Aug 2023 - Fix textual inversion embeddings not working in `low` VRAM usage mode.
+* 3.0.1 - 15 Aug 2023 - Fix for custom VAEs not working in `low` VRAM usage mode.
+* 3.0.1 - 14 Aug 2023 - Slider to change the image dimensions proportionally (in Image Settings). Thanks @JeLuf.
+* 3.0.1 - 14 Aug 2023 - Show an error to the user if an embedding isn't compatible with the model, instead of failing silently without informing the user. Thanks @JeLuf.
+* 3.0.1 - 14 Aug 2023 - Disable watermarking for SDXL img2img. Thanks @AvidGameFan.
 * 3.0.0 - 3 Aug 2023 - Enabled diffusers for everyone by default. The old v2 engine can be used by disabling the "Use v3 engine" option in the Settings tab.
 * 2.5.48 - 1 Aug 2023 - (beta-only) Full support for ControlNets. You can select a control image to guide the AI. You can pick a filter to pre-process the image, and one of the known (or custom) controlnet models. Supports `OpenPose`, `Canny`, `Straight Lines`, `Depth`, `Line Art`, `Scribble`, `Soft Edge`, `Shuffle` and `Segment`.
 * 2.5.47 - 30 Jul 2023 - An option to use `Strict Mask Border` while inpainting, to avoid touching areas outside the mask. But this might show a slight outline of the mask, which you will have to touch up separately.

scripts/check_modules.py

@@ -18,7 +18,7 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
-    "sdkit": "1.0.167",
+    "sdkit": "1.0.174",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",

scripts/on_env_start.bat

@@ -46,6 +46,8 @@ if "%update_branch%"=="" (
 
     @cd sd-ui-files
 
+    @call git add -A .
+    @call git stash
     @call git reset --hard
     @call git -c advice.detachedHead=false checkout "%update_branch%"
     @call git pull

scripts/on_env_start.sh

@@ -29,6 +29,8 @@ if [ -f "scripts/install_status.txt" ] && [ `grep -c sd_ui_git_cloned scripts/in
 
     cd sd-ui-files
 
+    git add -A .
+    git stash
     git reset --hard
     git -c advice.detachedHead=false checkout "$update_branch"
     git pull

ui/easydiffusion/bucket_manager.py

@@ -110,6 +110,7 @@ def init():
         images = images.offset(page*images_per_page).limit(images_per_page)
         return images.all()
 
+    
 def get_filename_from_url(url):
     path = urlparse(url).path
     name = path[path.rfind('/')+1:]

ui/easydiffusion/model_manager.py

@@ -65,9 +65,6 @@ def load_default_models(context: Context):
 
     runtime.set_vram_optimizations(context)
 
-    config = app.getConfig()
-    context.embeddings_path = os.path.join(app.MODELS_DIR, "embeddings")
-
     # init default model paths
     for model_type in MODELS_TO_LOAD_ON_START:
         context.model_paths[model_type] = resolve_model_to_use(model_type=model_type, fail_if_not_found=False)

ui/easydiffusion/package_manager.py

@@ -12,9 +12,9 @@ from easydiffusion import app
 manifest = {
     "tensorrt": {
         "install": [
-            "nvidia-cudnn --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+            "nvidia-cudnn --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
-            "tensorrt-libs --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+            "tensorrt-libs --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
-            "tensorrt --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+            "tensorrt --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
         ],
         "uninstall": ["tensorrt"],
         # TODO also uninstall tensorrt-libs and nvidia-cudnn, but do it upon restarting (avoid 'file in use' error)

ui/easydiffusion/types.py

@@ -73,6 +73,7 @@ class TaskData(BaseModel):
     use_hypernetwork_model: Union[str, List[str]] = None
     use_lora_model: Union[str, List[str]] = None
     use_controlnet_model: Union[str, List[str]] = None
+    use_embeddings_model: Union[str, List[str]] = None
     filters: List[str] = []
     filter_params: Dict[str, Dict[str, Any]] = {}
     control_filter_to_apply: Union[str, List[str]] = None
@@ -201,6 +202,7 @@ def convert_legacy_render_req_to_new(old_req: dict):
     model_paths["hypernetwork"] = old_req.get("use_hypernetwork_model")
     model_paths["lora"] = old_req.get("use_lora_model")
     model_paths["controlnet"] = old_req.get("use_controlnet_model")
+    model_paths["embeddings"] = old_req.get("use_embeddings_model")
 
     model_paths["gfpgan"] = old_req.get("use_face_correction", "")
     model_paths["gfpgan"] = model_paths["gfpgan"] if "gfpgan" in model_paths["gfpgan"].lower() else None

ui/index.html

@@ -35,7 +35,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small><span id="version">v3.0.0</span> <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v3.0.1</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -307,12 +307,22 @@
                                 <input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
                                 &times;
                                 <input id="custom-height" name="custom-height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)"><br>
+                                <small>Resize:</small><br>
+                                <input id="resize-slider" name="resize-slider" class="editor-slider" value="1" type="range" min="0.4" max="2" step="0.005" style="width:100%;"><br>
+                                <div id="enlarge-buttons"><button data-factor="0.5" class="tertiaryButton smallButton">×0.5</button>&nbsp;<button data-factor="1.2" class="tertiaryButton smallButton">×1.2</button>&nbsp;<button data-factor="1.5" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button data-factor="2" class="tertiaryButton smallButton">×2</button>&nbsp;<button data-factor="3" class="tertiaryButton smallButton">×3</button></div>
 
-                                <small>Enlarge:</small><br>
+                                <div class="two-column">
-                                <div id="enlarge-buttons"><button id="enlarge15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="enlarge2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
+                                    <div class="left-column">
+                                        <small>Recently&nbsp;used:</small><br>
+                                        <div id="recent-resolution-list">
+                                        </div>
+                                    </div>
+                                    <div class="right-column">
+                                        <small>Common&nbsp;sizes:</small><br>
+                                        <div id="common-resolution-list">
+                                        </div>
+                                    </div>
 
-                                <small>Recently&nbsp;used:</small><br>
-                                <div id="recent-resolution-list">
                                 </div>
                             </div>
                         </div>

ui/media/css/main.css

@@ -34,6 +34,7 @@ code {
     width: 32px;
     height: 32px;
     transform: translateY(4px);
+    cursor: pointer;
 }
 #prompt {
     width: 100%;
@@ -1421,6 +1422,10 @@ div.task-fs-initimage {
     display: none;
     position: absolute;
 }
+div.task-fs-initimage img {
+    max-height: 70vH;
+    max-width: 70vW;
+}
 div.task-initimg:hover div.task-fs-initimage {
     display: block;
     position: absolute;
@@ -1436,9 +1441,13 @@ div.top-right {
     right: 8px;
 }
 
+button.useForControlnetBtn {
+    margin-top: 6px;
+}
+
 #small_image_warning {
-     font-size: smaller;
+    font-size: smaller;
-     color: var(--status-orange);
+    color: var(--status-orange);
 }
 
 button#save-system-settings-btn {
@@ -1463,6 +1472,9 @@ button#save-system-settings-btn {
     cursor: pointer;;
 }
 
+.validation-failed {
+    border: solid 2px red;
+}
 /* SCROLLBARS */
 :root {
     --scrollbar-width: 14px;
@@ -1836,6 +1848,10 @@ div#recent-resolutions-popup small {
     opacity: 0.7;
 }
 
+div#common-resolution-list button {
+    background: var(--background-color1);
+}
+
 td#image-size-options small {
     margin-right: 0px !important;
 }
@@ -1852,6 +1868,27 @@ div#enlarge-buttons {
     text-align: center;
 }
 
+.two-column {  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0.5em;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "left-column right-column";
+}
+
+.left-column {
+  justify-self: center;
+  align-self: center;
+  grid-area: left-column;
+}
+
+.right-column {
+  justify-self: center;
+  align-self: center;
+  grid-area: right-column;
+}
+
 .clickable {
     cursor: pointer;
 }
@@ -1893,15 +1930,6 @@ div#enlarge-buttons {
 
 /* Gallery CSS */
 
-/*
-.gallery {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-family: sans-serif;
-}
-*/
 button:disabled {
     background-color: var(--secondary-button-background);
 }

ui/media/js/main.js

@@ -83,9 +83,9 @@ let customHeightField = document.querySelector("#custom-height")
 let recentResolutionsButton = document.querySelector("#recent-resolutions-button")
 let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup")
 let recentResolutionList = document.querySelector("#recent-resolution-list")
-let enlarge15Button = document.querySelector("#enlarge15")
+let commonResolutionList = document.querySelector("#common-resolution-list")
-let enlarge2Button = document.querySelector("#enlarge2")
+let resizeSlider = document.querySelector("#resize-slider")
-let enlarge3Button = document.querySelector("#enlarge3")
+let enlargeButtons = document.querySelector("#enlarge-buttons")
 let swapWidthHeightButton = document.querySelector("#swap-width-height")
 let smallImageWarning = document.querySelector("#small_image_warning")
 let initImageSelector = document.querySelector("#init_image")
@@ -152,7 +152,6 @@ let galleryPromptSearchField = document.querySelector("#gallery-prompt-search")
 let galleryModelSearchField = document.querySelector("#gallery-model-search")
 let galleryImageContainer = document.querySelector("#imagecontainer")
 
-
 let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
 let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
 let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn")
@@ -535,6 +534,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             const imageRedoBuffer = []
             let buttons = [
                 { text: "Use as Input", on_click: onUseAsInputClick },
+                { text: "Use for Controlnet", on_click: onUseForControlnetClick },
                 [
                     {
                         html: '<i class="fa-solid fa-download"></i> Download Image',
@@ -646,6 +646,10 @@ function onUseAsInputClick(req, img) {
     maskSetting.checked = false
 }
 
+function onUseForControlnetClick(req, img) {
+    controlImagePreview.src = img.src
+}
+
 function getDownloadFilename(img, suffix) {
     const imageSeed = img.getAttribute("data-seed")
     const imagePrompt = img.getAttribute("data-prompt")
@@ -956,12 +960,25 @@ function makeImage() {
     }
     if (!randomSeedField.checked && seedField.value == "") {
         alert('The "Seed" field must not be empty.')
+        seedField.classList.add("validation-failed")
         return
     }
+    seedField.classList.remove("validation-failed")
+
     if (numInferenceStepsField.value == "") {
         alert('The "Inference Steps" field must not be empty.')
+        numInferenceStepsField.classList.add("validation-failed")
         return
     }
+    numInferenceStepsField.classList.remove("validation-failed")
+
+    if (controlnetModelField.value === "" && IMAGE_REGEX.test(controlImagePreview.src)) {
+        alert("Please choose a ControlNet model, to use the ControlNet image.")
+        document.getElementById("controlnet_model").classList.add("validation-failed")
+        return
+    }
+    document.getElementById("controlnet_model").classList.remove("validation-failed")
+
     if (numOutputsTotalField.value == "" || numOutputsTotalField.value == 0) {
         numOutputsTotalField.value = 1
     }
@@ -980,6 +997,7 @@ function makeImage() {
             reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody),
         })
     )
+    newTaskRequests.forEach(setEmbeddings)
     newTaskRequests.forEach(createTask)
 
     updateInitialText()
@@ -1173,15 +1191,18 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
                             <b>Suggestions</b>:
                             <br/>
                             Try to use a different model or a different LORA.`
-                } else if (msg.includes("Tensor on device cuda:0 is not on the expected device meta")) {
+                } else if (msg.includes("'ModuleList' object has no attribute '1'")) {
                     msg += `<br/><br/>
-                            <b>Reason</b>: Due to some software issues, embeddings currently don't work with the "Low" memory profile.
+                            <b>Reason</b>: SDXL models need a yaml config file.
                             <br/><br/>
                             <b>Suggestions</b>:
                             <br/>
-                            1. Set the memory profile to "Balanced"<br/>
+                            <ol>
-                            2. Remove the embeddings from the prompt and the negative prompt<br/>
+                            <li>Download the <a href="https://gist.githubusercontent.com/JeLuF/5dc56e7a3a6988265c423f464d3cbdd3/raw/4ba4c39b1c7329877ad7a39c8c8a077ea4b53d11/dreamshaperXL10_alpha2Xl10.yaml" target="_blank">config file</a></li>
-                            3. Check whether the plugins you're using change the memory profile automatically.`
+                            <li>Save it in the same directory as the SDXL model file</li>
+                            <li>Rename the config file so that it matches the filename of the model, with the extension of the model file replaced by <tt>yaml</tt>. 
+                                For example, if the model file is called <tt>FantasySDXL_v2.safetensors</tt>, the config file must be called <tt>FantasySDXL_v2.yaml</tt>.
+                            </ol>`
                 }
             } else {
                 msg = `Unexpected Read Error:<br/><pre>StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}</pre>`
@@ -1335,6 +1356,27 @@ async function onTaskStart(task) {
 
 /* Hover effect for the init image in the task list */
 function createInitImageHover(taskEntry) {
+    taskEntry.querySelectorAll(".task-initimg").forEach( thumb => {
+        let thumbimg = thumb.querySelector("img")
+        let img = createElement("img", {src: thumbimg.src})
+        thumb.querySelector(".task-fs-initimage").appendChild(img)
+        let div = createElement("div", undefined, ["top-right"])
+        div.innerHTML = `
+            <button class="useAsInputBtn">Use as Input</button>
+            <br>
+            <button class="useForControlnetBtn">Use for Controlnet</button>`
+        div.querySelector(".useAsInputBtn").addEventListener("click", e => {
+            e.preventDefault()
+            onUseAsInputClick(null, img)
+        })
+        div.querySelector(".useForControlnetBtn").addEventListener("click", e => {
+            e.preventDefault()
+            controlImagePreview.src = img.src
+        })
+        thumb.querySelector(".task-fs-initimage").appendChild(div)
+    })
+    return
+
     var $tooltip = $(taskEntry.querySelector(".task-fs-initimage"))
     var img = document.createElement("img")
     img.src = taskEntry.querySelector("div.task-initimg > img").src
@@ -1399,6 +1441,11 @@ function createTask(task) {
         let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
         taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.init_image}"><div class="task-fs-initimage"></div></div>`
     }
+    if (task.reqBody.control_image !== undefined) {
+        let h = 80
+        let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
+        taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.control_image}"><div class="task-fs-initimage"></div></div>`
+    }
 
     taskConfig += `<div class="taskConfigData">${createTaskConfig(task)}</span></div></div>`
 
@@ -1449,7 +1496,7 @@ function createTask(task) {
         startY = e.target.closest(".imageTaskContainer").offsetTop
     })
 
-    if (task.reqBody.init_image !== undefined) {
+    if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) {
         createInitImageHover(taskEntry)
     }
 
@@ -1629,6 +1676,42 @@ function getCurrentUserRequest() {
     return newTask
 }
 
+function setEmbeddings(task) {
+    let prompt = task.reqBody.prompt.toLowerCase()
+    let negativePrompt = task.reqBody.negative_prompt.toLowerCase()
+    let overallPrompt = (prompt + " " + negativePrompt).split(" ")
+
+    let embeddingsTree = modelsOptions["embeddings"]
+    let embeddings = []
+    function extract(entries, basePath = "") {
+        entries.forEach((e) => {
+            if (Array.isArray(e)) {
+                let path = basePath === "" ? basePath + e[0] : basePath + "/" + e[0]
+                extract(e[1], path)
+            } else {
+                let path = basePath === "" ? basePath + e : basePath + "/" + e
+                embeddings.push([e.toLowerCase().replace(" ", "_"), path])
+            }
+        })
+    }
+    extract(embeddingsTree)
+
+    let embeddingPaths = []
+
+    embeddings.forEach((e) => {
+        let token = e[0]
+        let path = e[1]
+
+        if (overallPrompt.includes(token)) {
+            embeddingPaths.push(path)
+        }
+    })
+
+    if (embeddingPaths.length > 0) {
+        task.reqBody.use_embeddings_model = embeddingPaths
+    }
+}
+
 function getModelInfo(models) {
     let modelInfo = models.map((e) => [e[0].value, e[1].value])
     modelInfo = modelInfo.filter((e) => e[0].trim() !== "")
@@ -2666,7 +2749,7 @@ function updateEmbeddingsList(filter = "") {
                     let button
                     if (iconlist.length==0) {
                         button = document.createElement("button")
-                        button.innerText="m"
+                        button.innerText = m
                     } else {
                         let img = '/media/images/noimg.png'
                         if (token in embIcon) {
@@ -2979,38 +3062,27 @@ let recentResolutionsValues = []
 
 ;(function() {
     ///// Init resolutions dropdown
-    function makeResolutionButtons() {
+
-        recentResolutionList.innerHTML = ""
+    function makeResolutionButtons(listElement, resolutionList) {
-        recentResolutionsValues.forEach((el) => {
+        listElement.innerHTML = ""
-            let button = document.createElement("button")
+        resolutionList.forEach((el) => {
-            button.classList.add("tertiaryButton")
+            let button = createElement("button", { style: "width: 8em;" }, "tertiaryButton", `${el.w}×${el.h}`)
-            button.style.width = "8em"
-            button.innerHTML = `${el.w}&times;${el.h}`
             button.addEventListener("click", () => {
                 customWidthField.value = el.w
                 customHeightField.value = el.h
                 hidePopup()
             })
-            recentResolutionList.appendChild(button)
+            listElement.appendChild(button)
-            recentResolutionList.appendChild(document.createElement("br"))
+            listElement.appendChild(document.createElement("br"))
         })
-        localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     }
 
-    enlarge15Button.addEventListener("click", () => {
+    enlargeButtons.querySelectorAll("button").forEach((button) =>
-        enlargeImageSize(1.5)
+        button.addEventListener("click", (e) => {
-        hidePopup()
+            enlargeImageSize(parseFloat(button.dataset["factor"]))
-    })
+            hidePopup()
-
+        })
-    enlarge2Button.addEventListener("click", () => {
+    )
-        enlargeImageSize(2)
-        hidePopup()
-    })
-
-    enlarge3Button.addEventListener("click", () => {
-        enlargeImageSize(3)
-        hidePopup()
-    })
 
     customWidthField.addEventListener("change", () => {
         let w = customWidthField.value
@@ -3037,25 +3109,29 @@ let recentResolutionsValues = []
         recentResolutionsValues = recentResolutionsValues.slice(0, 8)
 
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
-        makeResolutionButtons()
+        makeResolutionButtons(recentResolutionList, recentResolutionsValues)
     })
 
+    const defaultResolutionsValues = [
+        { w: 512, h: 512 },
+        { w: 448, h: 640 },
+        { w: 512, h: 768 },
+        { w: 768, h: 512 },
+        { w: 1024, h: 768 },
+        { w: 768, h: 1024 },
+        { w: 1024, h: 1024 },
+        { w: 1920, h: 1080 },
+    ]
     let _jsonstring = localStorage.recentResolutionsValues
     if (_jsonstring == undefined) {
-        recentResolutionsValues = [
+        recentResolutionsValues = defaultResolutionsValues
-            { w: 512, h: 512 },
-            { w: 640, h: 448 },
-            { w: 448, h: 640 },
-            { w: 512, h: 768 },
-            { w: 768, h: 512 },
-            { w: 1024, h: 768 },
-            { w: 768, h: 1024 },
-        ]
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     } else {
         recentResolutionsValues = JSON.parse(localStorage.recentResolutionsValues)
     }
-    makeResolutionButtons()
+
+    makeResolutionButtons(recentResolutionList, recentResolutionsValues)
+    makeResolutionButtons(commonResolutionList, defaultResolutionsValues)
 
     recentResolutionsValues.forEach((val) => {
         addImageSizeOption(val.w)
@@ -3072,6 +3148,9 @@ let recentResolutionsValues = []
         customWidthField.value = widthField.value
         customHeightField.value = heightField.value
         recentResolutionsPopup.classList.remove("displayNone")
+        resizeSlider.value = 1
+        resizeSlider.dataset["w"] = widthField.value
+        resizeSlider.dataset["h"] = heightField.value
         document.addEventListener("click", processClick)
     }
 
@@ -3090,6 +3169,20 @@ let recentResolutionsValues = []
         }
     })
 
+    resizeSlider.addEventListener("input", (e) => {
+        let w = parseInt(resizeSlider.dataset["w"])
+        let h = parseInt(resizeSlider.dataset["h"])
+        let factor = parseFloat(resizeSlider.value)
+        let step = customWidthField.step
+
+        customWidthField.value = roundToMultiple(w * factor * factor, step)
+        customHeightField.value = roundToMultiple(h * factor * factor, step)
+    })
+
+    resizeSlider.addEventListener("change", (e) => {
+        hidePopup()
+    })
+
     swapWidthHeightButton.addEventListener("click", (event) => {
         let temp = widthField.value
         widthField.value = heightField.value

ui/plugins/ui/image-editor-improvements.plugin.js

@@ -191,19 +191,32 @@
 
     function createDropAreas(container) {
         // Create two drop areas
-        const dropAreaI2I = document.createElement("div")
+        const dropAreaI2I = createElement("div", {id: "drop-area-I2I"}, ["drop-area"], "Use as Image2Image source")
-        dropAreaI2I.setAttribute("id", "drop-area-I2I")
-        dropAreaI2I.setAttribute("class", "drop-area")
-        dropAreaI2I.innerHTML = "Use as Image2Image source"
         container.appendChild(dropAreaI2I)
         
-        const dropAreaMD = document.createElement("div")
+        const dropAreaMD = createElement("div", {id: "drop-area-MD"}, ["drop-area"], "Extract embedded metadata")
-        dropAreaMD.setAttribute("id", "drop-area-MD")
-        dropAreaMD.setAttribute("class", "drop-area")
-        dropAreaMD.innerHTML = "Extract embedded metadata"
         container.appendChild(dropAreaMD)
         
+        const dropAreaCN = createElement("div", {id: "drop-area-CN"}, ["drop-area"], "Use as Controlnet image")
+        container.appendChild(dropAreaCN)
+        
         // Add event listeners to drop areas
+        dropAreaCN.addEventListener("dragenter", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = 'darkGreen'
+        })
+        dropAreaCN.addEventListener("dragleave", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = ''
+        })
+        dropAreaCN.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+
+            getImageFromDropEvent(event, e => controlImagePreview.src=e)
+        })
+
         dropAreaI2I.addEventListener("dragenter", function(event) {
             event.preventDefault()
             dropAreaI2I.style.backgroundColor = 'darkGreen'
@@ -213,15 +226,11 @@
             dropAreaI2I.style.backgroundColor = ''
         })
        
-        dropAreaI2I.addEventListener("drop", function(event) {
+        function getImageFromDropEvent(event, callback) {
-            event.stopPropagation();
-            event.preventDefault();
-            hideDropAreas()
-            
             // Find the first image file, uri, or moz-url in the items list
-            let imageItem = null;
+            let imageItem = null
             for (let i = 0; i < event.dataTransfer.items.length; i++) {
-                let item = event.dataTransfer.items[i];
+                let item = event.dataTransfer.items[i]
                 if (item.kind === 'file' && item.type.startsWith('image/')) {
                     imageItem = item;
                     break;
@@ -258,18 +267,22 @@
                     // Create a FileReader object to read the dropped file as a data URL
                     let reader = new FileReader();
                     reader.onload = function(e) {
-                        // Set the src attribute of the img element to the data URL
+                        callback(e.target.result)
-                        imageObj.src = e.target.result;
                     };
                     reader.readAsDataURL(file);
                 } else {
                     // If the item is a URL, retrieve it and use it to load the image
-                    imageItem.getAsString(function(url) {
+                    imageItem.getAsString(callback)
-                        // Set the src attribute of the img element to the URL
-                        imageObj.src = url;
-                    });
                 }
             }
+        }
+
+        dropAreaI2I.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+            
+            getImageFromDropEvent(event, e => imageObj.src=e)
         })
         
         dropAreaMD.addEventListener("dragenter", function(event) {