From db07b9c69c224d1d64f9f70713b2908f2da29912 Mon Sep 17 00:00:00 2001
From: Fkunn1326 <92153597+fkunn1326@users.noreply.github.com>
Date: Sun, 10 Sep 2023 09:15:17 +0900
Subject: [PATCH] Fix: fix for new gradio version

---
 javascript/main.js | 14 ++++++++------
 scripts/main.py    |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/javascript/main.js b/javascript/main.js
index 31fb361..30a39d7 100755
--- a/javascript/main.js
+++ b/javascript/main.js
@@ -58,11 +58,13 @@ let flipped = false;
 const default_keypoints = [[241,77],[241,120],[191,118],[177,183],[163,252],[298,118],[317,182],[332,245],[225,241],[213,359],[215,454],[270,240],[282,360],[286,456],[232,59],[253,60],[225,70],[260,72]]
 
 async function fileToDataUrl(file) {
-    if (file.data) {
-        // Gradio version < 3.23
-        return file.data
-    }
-    return await new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(file.blob)}).then(e => e.target.result)
+    const elem = gradioApp().querySelector(`#${file}`)
+    const input = elem.previousElementSibling
+    return await new Promise(r => {
+        let a = new FileReader();
+        a.onload = r;
+        a.readAsDataURL(input.files[0])
+    }).then(e => e.target.result)
 }
 
 function calcResolution(width, height){
@@ -398,7 +400,7 @@ function initCanvas(elem){
             json.value = "";
         } catch(e){console.log(e)}
     })
-    json_observer.observe(gradioApp().querySelector("#jsonbox"), { "attributes": true })
+    json_observer.observe(gradioApp().querySelector("#jsonbox"), { attributes: true, subtree: true })
 
     // document.addEventListener('keydown', function(e) {
     //     if (e.key !== undefined) {
diff --git a/scripts/main.py b/scripts/main.py
index 77f6001..d41a56e 100644
--- a/scripts/main.py
+++ b/scripts/main.py
@@ -125,9 +125,9 @@ def savePreset(name, data):
     width.change(None, [width, height], None, _js="(w, h) => {resizeCanvas(w, h)}")
     height.change(None, [width, height], None, _js="(w, h) => {resizeCanvas(w, h)}")
     png_output.click(None, [], None, _js="savePNG")
-    bg_input.upload(None, [bg_input], [width, height], _js="addBackground")
+    bg_input.upload(None, [], [width, height], _js="() => {addBackground('openpose_bg_button')}")
     png_input.upload(estimate, png_input, jsonbox)
-    png_input.upload(None, png_input, [width, height], _js="addBackground")
+    png_input.upload(None, [], [width, height], _js="() => {addBackground('openpose_detect_button')}")
     add.click(None, [], None, _js="addPose")
     send_t2t.click(None, select_target_index, None, _js="(i) => {sendImage('txt2img', i)}")
     send_i2i.click(None, select_target_index, None, _js="(i) => {sendImage('img2img', i)}")