lnyan commited on
Commit
3c14aef
1 Parent(s): 697536c

Change iframe interaction using postMessage

Browse files
Files changed (5) hide show
  1. app.py +2 -9
  2. index.html +22 -4
  3. js/mode.js +2 -2
  4. js/outpaint.js +12 -5
  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
- console.log(document.querySelector("gradio-app"));
196
- console.log(document.querySelector("iframe"));
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=parent.document.querySelector("gradio-app").shadowRoot.querySelector("#output textarea").value
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.document.querySelector("gradio-app").shadowRoot.querySelector("#input textarea").value=sel_buffer_str
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=parent.document.querySelector("gradio-app").shadowRoot.querySelector("#upload textarea").value
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.document;
4
- frame.querySelector("#mode").value=mode;
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.document;
9
- frame.querySelector("#outpaint").click();
 
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.document;
21
- let button=frame.querySelector("#transfer");
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.document;
8
- frame.querySelector("#upload").click();
 
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, {