Update app.py

app.py

@@ -458,7 +458,7 @@ load_model="""
 async()=>{
   var intv = setInterval(function(){
     if (document.getElementById("output_video").getElementsByTagName("video")) {
-      alert(document.getElementById("output_video").getElementsByTagName("video")[0].src);
+      document.getElementById("model3d").src = document.getElementById("model3d").src.split("#")[0] + "#" + document.getElementById("output_video").getElementsByTagName("video")[0].src;
       clearInterval(intv);
     }
   }, 40);
@@ -589,6 +589,19 @@ if (document.getElementById("image_edit") && document.getElementById("image_edit
 }
 }, 40);
 
+function fullscreen() {
+  if (document.getElementById("model3d").style.position != 'fixed') {
+    document.getElementById("model3d").style.position = 'fixed';
+    document.getElementById("model3d").style.width = window.innerWidth + 'px';
+    document.getElementById("model3d").style.height = window.innerHeight + 'px';
+  } else {
+    document.getElementById("model3d").style.position = 'relative';
+    document.getElementById("model3d").style.width = '100%';
+    document.getElementById("model3d").style.height = '320px';
+  }
+}
+window.fullscreen = fullscreen;
+
 }
 """
 
@@ -735,7 +748,10 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
                   {"lat": 50.073823157821664, "lng": 14.437124189538856, "heading": 152.95769, "pitch": 4.233024999999998}
                 ]"""
               coords = gr.Textbox(elem_id="coords", value=example_coords, label="Coordinates", interactive=False)
-              render = gr.Button("Render")
+            render = gr.Button("Render")
+            model3d = gr.HTML(value="""
+            <iframe id='model3d' src='https://freeali.se/freealise/transparent_video/' onclick='fullscreen();' style='position:relative;width:100%;height:320px;'></iframe>
+            """)
             input_json.input(show_json, inputs=[input_json], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, coords])