Update app.py

app.py

@@ -845,25 +845,26 @@ with gr.Blocks(css=css, js=js) as demo:
 
     with gr.Row():
         with gr.Column():
-            input_json = gr.Textbox(elem_id="json_in", value="{}", label="JSON", interactive=False)
-            input_url = gr.Textbox(elem_id="url_in", value="./examples/streetview.mp4", label="URL")
-            input_video = gr.Video(label="Input Video", format="mp4")
-            input_url.input(fn=loadfile, inputs=[input_url], outputs=[input_video])
-            submit = gr.Button("Submit")
+            with gr.Group():
+              input_json = gr.Textbox(elem_id="json_in", value="{}", label="JSON", interactive=False)
+              input_url = gr.Textbox(elem_id="url_in", value="./examples/streetview.mp4", label="URL")
+              input_video = gr.Video(label="Input Video", format="mp4")
+              input_url.input(fn=loadfile, inputs=[input_url], outputs=[input_video])
+              submit = gr.Button("Submit")
             with gr.Group():
               output_frame = gr.Gallery(label="Frames", preview=True, columns=8192, interactive=False)
               output_switch = gr.Checkbox(label="Show depths")
               output_switch.input(fn=switch_rows, inputs=[output_switch], outputs=[output_frame])
               selected = gr.Number(label="Selected frame", visible=False, elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
-            with gr.Accordion(label="Depths", open=False):
-              output_depth = gr.Files(label="Depth files", interactive=False)
+              with gr.Accordion(label="Depths", open=False):
+                output_depth = gr.Files(label="Depth files", interactive=False)
             with gr.Group():
-              output_mask = gr.ImageEditor(layers=False, sources=('upload', 'clipboard'), show_download_button=True, type="numpy", interactive=True, transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(default_size=0, colors=['black', '#505050', '#a0a0a0', 'white']), elem_id="image_edit")
-              reset = gr.Button("Reset", size='sm')
+              output_mask = gr.ImageEditor(layers=False, sources=('clipboard'), show_download_button=True, type="numpy", interactive=False, transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(default_size=0, colors=['black', '#505050', '#a0a0a0', 'white']), elem_id="image_edit")
               with gr.Accordion(label="Border", open=False):
                 boffset = gr.Slider(label="Offset", value=1, maximum=256, minimum=0, step=1)
                 bsize = gr.Slider(label="Size", value=32, maximum=256, minimum=0, step=1)
                 mouse = gr.Textbox(label="Mouse x,y", elem_id="mouse", value="""[]""", interactive=False)
+              reset = gr.Button("Reset", size='sm')
               mouse.input(fn=draw_mask, show_progress="minimal", inputs=[boffset, bsize, mouse, output_mask], outputs=[output_mask])
               reset.click(fn=reset_mask, inputs=[output_mask], outputs=[output_mask])
 
@@ -940,8 +941,8 @@ with gr.Blocks(css=css, js=js) as demo:
               mesh_order = gr.Textbox(elem_id="order", value="", label="Order", interactive=False)
             load_all = gr.Checkbox(label="Load all")
 
-            with gr.Group():
-              html = gr.HTML(value="""<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='
+          with gr.Group():
+            html = gr.HTML(value="""<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -952,7 +953,7 @@ with gr.Blocks(css=css, js=js) as demo:
 
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].material.pointSize/2.0*Math.sqrt(2.0) + \"px)\";
             '/><span>0.8</span>""")
-              camera = gr.HTML(value="""<a href='#' id='reset_cam' style='color:white' onclick='
+            camera = gr.HTML(value="""<a href='#' id='reset_cam' style='color:white' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
                   screenshot: true,
@@ -969,7 +970,7 @@ with gr.Blocks(css=css, js=js) as demo:
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
             '>Reset camera</a>""")
-              contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -978,7 +979,7 @@ with gr.Blocks(css=css, js=js) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;
             '/><span>1.0</span>""")
-              exposure = gr.HTML(value="""<label for='exposure'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            exposure = gr.HTML(value="""<label for='exposure'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);