diff --git a/javascript/main.js b/javascript/main.js
index 1e029d7..9d5fa86 100644
--- a/javascript/main.js
+++ b/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) {
diff --git a/maps/hands/curled_45_a.png b/maps/hands/curled_45_a.png
new file mode 100644
index 0000000..4d18fd4
Binary files /dev/null and b/maps/hands/curled_45_a.png differ
diff --git a/maps/hands/curled_back.png b/maps/hands/curled_back.png
new file mode 100644
index 0000000..d3aeefc
Binary files /dev/null and b/maps/hands/curled_back.png differ
diff --git a/maps/hands/relaxed_45_a.png b/maps/hands/relaxed_45_a.png
new file mode 100644
index 0000000..3519ae8
Binary files /dev/null and b/maps/hands/relaxed_45_a.png differ
diff --git a/maps/hands/relaxed_45_b.png b/maps/hands/relaxed_45_b.png
new file mode 100644
index 0000000..2d1a1df
Binary files /dev/null and b/maps/hands/relaxed_45_b.png differ
diff --git a/maps/hands/relaxed_back.png b/maps/hands/relaxed_back.png
new file mode 100644
index 0000000..dd7adfe
Binary files /dev/null and b/maps/hands/relaxed_back.png differ
diff --git a/maps/hands/relaxed_front.png b/maps/hands/relaxed_front.png
new file mode 100644
index 0000000..d82f58d
Binary files /dev/null and b/maps/hands/relaxed_front.png differ
diff --git a/maps/hands/relaxed_side_a.png b/maps/hands/relaxed_side_a.png
new file mode 100644
index 0000000..49275b3
Binary files /dev/null and b/maps/hands/relaxed_side_a.png differ
diff --git a/maps/hands/relaxed_side_b.png b/maps/hands/relaxed_side_b.png
new file mode 100644
index 0000000..860bc42
Binary files /dev/null and b/maps/hands/relaxed_side_b.png differ
diff --git a/scripts/main.py b/scripts/main.py
index 9a53519..69e6763 100644
--- a/scripts/main.py
+++ b/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")]