Spaces:
Runtime error
Runtime error
Change iframe interaction using postMessage
Browse files- app.py +2 -9
- index.html +22 -4
- js/mode.js +2 -2
- js/outpaint.js +12 -5
- js/upload.js +3 -2
app.py
CHANGED
@@ -192,15 +192,8 @@ def load_js(name):
|
|
192 |
return f"""
|
193 |
function (x)
|
194 |
{{
|
195 |
-
|
196 |
-
|
197 |
-
console.log(document.querySelector("#sdinfframe").contentWindow);
|
198 |
-
console.log(document.querySelector("#sdinfframe").contentWindow.document);
|
199 |
-
console.log(document.querySelector("#sdinfframe").contentWindow.document.querySelector("#{name}");
|
200 |
-
console.log(document.querySelector("#sdinfframe").contentDocument);
|
201 |
-
let frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow.document;
|
202 |
-
let button=frame.querySelector("#{name}");
|
203 |
-
button.click();
|
204 |
return x;
|
205 |
}}
|
206 |
"""
|
|
|
192 |
return f"""
|
193 |
function (x)
|
194 |
{{
|
195 |
+
let frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow;
|
196 |
+
frame.postMessage(["click","{name}"], "*");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
197 |
return x;
|
198 |
}}
|
199 |
"""
|
index.html
CHANGED
@@ -80,6 +80,7 @@ from js import (
|
|
80 |
Uint8ClampedArray,
|
81 |
CanvasRenderingContext2D as Context2d,
|
82 |
requestAnimationFrame,
|
|
|
83 |
)
|
84 |
|
85 |
|
@@ -129,7 +130,7 @@ async def export_func(event):
|
|
129 |
|
130 |
async def outpaint_func(event):
|
131 |
base=base_lst[0]
|
132 |
-
base64_str=
|
133 |
arr=base.base64_to_numpy(base64_str)
|
134 |
base.fill_selection(arr)
|
135 |
base.draw_selection_box()
|
@@ -151,12 +152,11 @@ async def transfer_func(event):
|
|
151 |
base.read_selection_from_buffer()
|
152 |
sel_buffer=base.sel_buffer
|
153 |
sel_buffer_str=base.numpy_to_base64(sel_buffer)
|
154 |
-
parent.
|
155 |
-
parent.document.querySelector("gradio-app").shadowRoot.querySelector("#proceed").click()
|
156 |
|
157 |
async def upload_func(event):
|
158 |
base=base_lst[0]
|
159 |
-
base64_str=
|
160 |
arr=base.base64_to_numpy(base64_str)
|
161 |
h,w,_=arr.shape
|
162 |
yo=(base.height-h)//2
|
@@ -181,6 +181,24 @@ document.querySelector("#draw").addEventListener("click",create_proxy(draw_canva
|
|
181 |
async def setup_func():
|
182 |
document.querySelector("#setup").value="1"
|
183 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
184 |
import asyncio
|
185 |
|
186 |
_ = await asyncio.gather(
|
|
|
80 |
Uint8ClampedArray,
|
81 |
CanvasRenderingContext2D as Context2d,
|
82 |
requestAnimationFrame,
|
83 |
+
window
|
84 |
)
|
85 |
|
86 |
|
|
|
130 |
|
131 |
async def outpaint_func(event):
|
132 |
base=base_lst[0]
|
133 |
+
base64_str=event.data[1]
|
134 |
arr=base.base64_to_numpy(base64_str)
|
135 |
base.fill_selection(arr)
|
136 |
base.draw_selection_box()
|
|
|
152 |
base.read_selection_from_buffer()
|
153 |
sel_buffer=base.sel_buffer
|
154 |
sel_buffer_str=base.numpy_to_base64(sel_buffer)
|
155 |
+
parent.postMessage(["transfer",sel_buffer_str],"*")
|
|
|
156 |
|
157 |
async def upload_func(event):
|
158 |
base=base_lst[0]
|
159 |
+
base64_str=event.data[1]
|
160 |
arr=base.base64_to_numpy(base64_str)
|
161 |
h,w,_=arr.shape
|
162 |
yo=(base.height-h)//2
|
|
|
181 |
async def setup_func():
|
182 |
document.querySelector("#setup").value="1"
|
183 |
|
184 |
+
async def message_func(event):
|
185 |
+
if event.data[0]=="click":
|
186 |
+
if event.data[1]=="export":
|
187 |
+
export_func(event)
|
188 |
+
elif event.data[1]=="commit":
|
189 |
+
commit_func(event)
|
190 |
+
elif event.data[1]=="undo":
|
191 |
+
undo_func(event)
|
192 |
+
elif event.data[0]=="upload":
|
193 |
+
upload_func(event)
|
194 |
+
elif event.data[0]=="outpaint":
|
195 |
+
outpaint_func(event)
|
196 |
+
elif event.data[0]=="mode":
|
197 |
+
document.querySelector("#mode").value=event.data[1]
|
198 |
+
elif event.data[0]=="transfer":
|
199 |
+
transfer_func(event)
|
200 |
+
|
201 |
+
window.addEventListener("message",create_proxy(message_func))
|
202 |
import asyncio
|
203 |
|
204 |
_ = await asyncio.gather(
|
js/mode.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1 |
function(mode){
|
2 |
let app=document.querySelector("gradio-app").shadowRoot;
|
3 |
-
let frame=app.querySelector("#sdinfframe").contentWindow
|
4 |
-
frame.
|
5 |
return mode;
|
6 |
}
|
|
|
1 |
function(mode){
|
2 |
let app=document.querySelector("gradio-app").shadowRoot;
|
3 |
+
let frame=app.querySelector("#sdinfframe").contentWindow;
|
4 |
+
frame.postMessage(["mode", mode], "*");
|
5 |
return mode;
|
6 |
}
|
js/outpaint.js
CHANGED
@@ -5,8 +5,9 @@ function(a){
|
|
5 |
window.my_observe_outpaint = new MutationObserver(function (event) {
|
6 |
console.log(event);
|
7 |
let app=document.querySelector("gradio-app").shadowRoot;
|
8 |
-
let frame=app.querySelector("#sdinfframe").contentWindow
|
9 |
-
|
|
|
10 |
});
|
11 |
window.my_observe_outpaint_target=document.querySelector("gradio-app").shadowRoot.querySelector("#output span")
|
12 |
window.my_observe_outpaint.observe(window.my_observe_outpaint_target, {
|
@@ -15,10 +16,16 @@ function(a){
|
|
15 |
childList: true,
|
16 |
characterData: true
|
17 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
18 |
}
|
19 |
let app=document.querySelector("gradio-app").shadowRoot;
|
20 |
-
let frame=app.querySelector("#sdinfframe").contentWindow
|
21 |
-
|
22 |
-
button.click();
|
23 |
return a;
|
24 |
}
|
|
|
5 |
window.my_observe_outpaint = new MutationObserver(function (event) {
|
6 |
console.log(event);
|
7 |
let app=document.querySelector("gradio-app").shadowRoot;
|
8 |
+
let frame=app.querySelector("#sdinfframe").contentWindow;
|
9 |
+
var str=document.querySelector("gradio-app").shadowRoot.querySelector("#output textarea").value;
|
10 |
+
frame.postMessage(["outpaint", str], "*");
|
11 |
});
|
12 |
window.my_observe_outpaint_target=document.querySelector("gradio-app").shadowRoot.querySelector("#output span")
|
13 |
window.my_observe_outpaint.observe(window.my_observe_outpaint_target, {
|
|
|
16 |
childList: true,
|
17 |
characterData: true
|
18 |
});
|
19 |
+
window.addEventListener("message", function(e){
|
20 |
+
if(e.data[0]=="transfer")
|
21 |
+
{
|
22 |
+
document.querySelector("gradio-app").shadowRoot.querySelector("#input textarea").value=e.data[1];
|
23 |
+
document.querySelector("gradio-app").shadowRoot.querySelector("#proceed").click();
|
24 |
+
}
|
25 |
+
});
|
26 |
}
|
27 |
let app=document.querySelector("gradio-app").shadowRoot;
|
28 |
+
let frame=app.querySelector("#sdinfframe").contentWindow;
|
29 |
+
frame.postMessage(["transfer"],"*")
|
|
|
30 |
return a;
|
31 |
}
|
js/upload.js
CHANGED
@@ -4,8 +4,9 @@ function(a,b){
|
|
4 |
console.log("setup upload here");
|
5 |
window.my_observe_upload = new MutationObserver(function (event) {
|
6 |
console.log(event);
|
7 |
-
var frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow
|
8 |
-
|
|
|
9 |
});
|
10 |
window.my_observe_upload_target = document.querySelector("gradio-app").shadowRoot.querySelector("#upload span");
|
11 |
window.my_observe_upload.observe(window.my_observe_upload_target, {
|
|
|
4 |
console.log("setup upload here");
|
5 |
window.my_observe_upload = new MutationObserver(function (event) {
|
6 |
console.log(event);
|
7 |
+
var frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow;
|
8 |
+
var str=document.querySelector("gradio-app").shadowRoot.querySelector("#upload textarea").value;
|
9 |
+
frame.postMessage(["upload", str], "*");
|
10 |
});
|
11 |
window.my_observe_upload_target = document.querySelector("gradio-app").shadowRoot.querySelector("#upload span");
|
12 |
window.my_observe_upload.observe(window.my_observe_upload_target, {
|