feat: Add Drag & drop to set background image, also auto update width & height

javascript/main.js

@@ -47,6 +47,11 @@ function depth_resizeCanvas(width, height) {
     elem.nextElementSibling.style.height = resolution["height"] + "px"
     elem.parentElement.style.width = resolution["width"] + "px"
     elem.parentElement.style.height = resolution["height"] + "px"
+
+    document.querySelector('#depth_lib_width input[type=range]').value = width;
+    document.querySelector('#depth_lib_width input[type=number]').value = width;
+    document.querySelector('#depth_lib_height input[type=range]').value = height;
+    document.querySelector('#depth_lib_height input[type=number]').value = height;
 }
 
 function depth_addImg(path) {
@@ -70,6 +75,30 @@ function depth_initCanvas(elem) {
 
     window.depth_lib_elem = elem
 
+    depth_lib_canvas.wrapperEl.addEventListener('drop', function (e) {
+        e.preventDefault();
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            const file = files[0];
+            if (file.type.match('image.*')) {
+                const fileReader = new FileReader();
+                fileReader.onload = function (evt) {
+                    const dataUri = evt.target.result;
+                    const imgObj = new Image();
+                    imgObj.onload = function () {
+                        depth_lib_canvas.setBackgroundImage(dataUri, depth_lib_canvas.renderAll.bind(depth_lib_canvas), {
+                            opacity: 0.5,
+                            width: imgObj.width,
+                            height: imgObj.height,
+                        });
+                        depth_resizeCanvas(imgObj.width, imgObj.height);
+                    }
+                    imgObj.src = dataUri;
+                };
+                fileReader.readAsDataURL(file);
+            }
+        }
+    }, false);
 
     depth_resizeCanvas(...depth_obj.resolution)
 }
@@ -101,14 +130,23 @@ function depth_addBackground() {
     input.accept = "image/*"
     input.addEventListener("change", function (e) {
         const file = e.target.files[0];
-        var fileReader = new FileReader();
-        fileReader.onload = function () {
-            var dataUri = this.result;
-            depth_lib_canvas.setBackgroundImage(dataUri, depth_lib_canvas.renderAll.bind(depth_lib_canvas), {
-                opacity: 0.5
-            });
+        if (file.type.match('image.*')) {
+            const fileReader = new FileReader();
+            fileReader.onload = function (evt) {
+                const dataUri = evt.target.result;
+                const imgObj = new Image();
+                imgObj.onload = function () {
+                    depth_lib_canvas.setBackgroundImage(dataUri, depth_lib_canvas.renderAll.bind(depth_lib_canvas), {
+                        opacity: 0.5,
+                        width: imgObj.width,
+                        height: imgObj.height,
+                    });
+                    depth_resizeCanvas(imgObj.width, imgObj.height);
+                }
+                imgObj.src = dataUri;
+            }
+            fileReader.readAsDataURL(file);
         }
-        fileReader.readAsDataURL(file);
     })
     input.click()
 }
@@ -117,7 +155,21 @@ function depth_removeBackground() {
     depth_lib_canvas.setBackgroundImage(0, depth_lib_canvas.renderAll.bind(depth_lib_canvas));
 }
 
-function depth_sendImage() {
+function depth_sendImageTxt2Img() {
+    depth_sendImage(
+        '#txt2img_controlnet',
+        switch_to_txt2img,
+    );
+}
+
+function depth_sendImageImg2Img() {
+    depth_sendImage(
+        '#img2img_controlnet',
+        switch_to_img2img,
+    );
+}
+
+function depth_sendImage(controlNetDivId, switchFn) {
     if (depth_lib_canvas.backgroundImage) depth_lib_canvas.backgroundImage.opacity = 0;
     depth_lib_canvas.discardActiveObject();
     depth_lib_canvas.renderAll();
@@ -127,9 +179,9 @@ function depth_sendImage() {
         dt.items.add(file);
         const list = dt.files;
 
-        const divControlNet = depth_gradioApp().querySelector("#txt2img_controlnet");
+        const divControlNet = depth_gradioApp().querySelector(controlNetDivId);
         if (divControlNet) {
-            switch_to_txt2img();
+            switchFn();
 
             // open the ControlNet accordion if it's not already open
             // but give up if it takes longer than 5 secs
@@ -139,10 +191,10 @@ function depth_sendImage() {
                 let waitUntilHasClassOpenCount = 0;
                 const waitUntilHasClassOpen = async () => {
                     waitUntilHasClassOpenCount++;
-                    if (waitUntilHasClassOpenCount > 50) {
-                        return false;
-                    } else if (labelControlNet.classList.contains("open")) {
+                    if (labelControlNet.classList.contains("open")) {
                         return true;
+                    } else if (waitUntilHasClassOpenCount > 50) {
+                        return false;
                     } else {
                         setTimeout(() => waitUntilHasClassOpen(), 100)
                     }
@@ -158,9 +210,10 @@ function depth_sendImage() {
             const event = new Event('change', { 'bubbles': true, "composed": true });
             input.dispatchEvent(event);
         }
+
+        if (depth_lib_canvas.backgroundImage) depth_lib_canvas.backgroundImage.opacity = 0.5
+        depth_lib_canvas.renderAll()
     });
-    if (depth_lib_canvas.backgroundImage) depth_lib_canvas.backgroundImage.opacity = 0.5
-    depth_lib_canvas.renderAll()
 }
 
 function depth_setBrightness(br) {

scripts/main.py

@@ -30,8 +30,8 @@ def on_ui_tabs():
   with gr.Blocks(analytics_enabled=False) as depth_lib:
     with gr.Row():
       with gr.Column():
-        width = gr.Slider(label="width", minimum=64, maximum=2048, value=512, step=64, interactive=True)
-        height = gr.Slider(label="height", minimum=64, maximum=2048, value=512, step=64, interactive=True)
+        width = gr.Slider(label="width", elem_id="depth_lib_width", minimum=64, maximum=2048, value=512, step=64, interactive=True)
+        height = gr.Slider(label="height", elem_id="depth_lib_height", minimum=64, maximum=2048, value=512, step=64, interactive=True)
         base = gr.Slider(label="Base Depth", minimum=0, maximum=255, value=0, step=1, interactive=True)
         with gr.Row():
           add = gr.Button(value="Add", variant="primary")
@@ -50,11 +50,11 @@ def on_ui_tabs():
             opacity = gr.Slider(label="Opacity", minimum=0.01, maximum=1, value=1, step=0.01, interactive=True)
 
       with gr.Column():
-        # gradioooooo...
         canvas = gr.HTML('<canvas id="depth_lib_canvas" width="512" height="512" style="margin: 0.25rem; border-radius: 0.25rem; border: 0.5px solid"></canvas><style>#examples .gr-sample-image {background-color: #e5e7eb}</style>')
         with gr.Row():
           png_output = gr.Button(value="Save PNG")
-          send_output = gr.Button(value="Send to ControlNet")
+          send_output_txt2img = gr.Button(value="Send to Txt2Img")
+          send_output_img2img = gr.Button(value="Send to Img2Img")
 
 
     width.change(None, [width, height], None, _js="(w, h) => {depth_resizeCanvas(w, h)}")
@@ -66,7 +66,8 @@ def on_ui_tabs():
     bg_remove.click(None, [], None, _js="depth_removeBackground")
     add.click(None, [png_input_area], None, _js="(path) => {depth_addImg(path)}")
     remove.click(None, [], None, _js="depth_removeSelection")
-    send_output.click(None, [], None, _js="depth_sendImage")
+    send_output_txt2img.click(None, [], None, _js="() => depth_sendImageTxt2Img()")
+    send_output_img2img.click(None, [], None, _js="() => depth_sendImageImg2Img()")
     reset_btn.click(None, [], None, _js="depth_resetCanvas")
 
   return [(depth_lib, "Depth Library", "depth_lib")]