Update app.py

app.py

@@ -850,29 +850,29 @@ with gr.Blocks(css=css, js=js) as demo:
             input_video = gr.Video(label="Input Video", format="mp4")
             input_url.input(fn=loadfile, inputs=[input_url], outputs=[input_video])
             submit = gr.Button("Submit")
-            output_frame = gr.Gallery(label="Frames", preview=True, columns=8192, interactive=False)
             with gr.Group():
-              with gr.Row():
-                output_switch = gr.Checkbox(label="Show depths")
-                selected = gr.Number(label="Selected frame", show_label=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)
-            output_switch.input(fn=switch_rows, inputs=[output_switch], outputs=[output_frame])
-            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")
-            with gr.Row():
+              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.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')
-            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)
+              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)
               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])
 
         with gr.Column():
-            model_type = gr.Dropdown([("small", "vits"), ("base", "vitb"), ("large", "vitl"), ("giant", "vitg")], type="value", value="vits", label='Model Type')
-            processed_video = gr.Video(label="Output Video", format="mp4", interactive=False)
-            processed_zip = gr.File(label="Output Archive", interactive=False)
-            result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0], zoom_speed=2.0, pan_speed=2.0, interactive=True, elem_id="model3D") #, display_mode="point_cloud"
+          model_type = gr.Dropdown([("small", "vits"), ("base", "vitb"), ("large", "vitl"), ("giant", "vitg")], type="value", value="vits", label='Model Type')
+          processed_video = gr.Video(label="Output Video", format="mp4", interactive=False)
+          processed_zip = gr.File(label="Output Archive", interactive=False)
+          result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0], zoom_speed=2.0, pan_speed=2.0, interactive=False, elem_id="model3D")
+          with gr.Tab("Blur"):
             chart_c = gr.HTML(elem_id="chart_c", value="""<div id='chart' onpointermove='window.drawLine(event.clientX, event.clientY);' onpointerdown='window.pointerDown(event.clientX, event.clientY);' onpointerup='window.pointerUp();' onpointerleave='window.pointerUp();' onpointercancel='window.pointerUp();' onclick='window.resetLine();'></div>
             <style>
   body {
@@ -924,24 +924,24 @@ with gr.Blocks(css=css, js=js) as demo:
             ' oninput='
               this.parentNode.childNodes[2].innerText = this.value;
             ' onchange='this.click();'/><span>1</span>""")
-            with gr.Group():
-              with gr.Accordion(label="Blur levels", open=False):
-                blur_in = gr.Textbox(elem_id="blur_in", label="Kernel size", show_label=False, interactive=False, value=blurin)
-              with gr.Accordion(label="Locations", open=False):
-                output_frame.select(fn=select_frame, inputs=[output_mask], outputs=[output_mask, selected])
-                example_coords = """[
+            with gr.Accordion(label="Blur levels", open=False):
+              blur_in = gr.Textbox(elem_id="blur_in", label="Kernel size", show_label=False, interactive=False, value=blurin)
+          with gr.Group():
+            with gr.Accordion(label="Locations", open=False):
+              output_frame.select(fn=select_frame, inputs=[output_mask], outputs=[output_mask, selected])
+              example_coords = """[
                   {"lat": 50.07379596793083, "lng": 14.437146122950555, "heading": 152.70303, "pitch": 2.607833999999997}, 
                   {"lat": 50.073799567020004, "lng": 14.437146774240507, "heading": 151.12973, "pitch": 2.8672300000000064}, 
                   {"lat": 50.07377647505558, "lng": 14.437161000659017, "heading": 151.41025, "pitch": 3.4802200000000028}, 
                   {"lat": 50.07379496839027, "lng": 14.437148958238538, "heading": 151.93391, "pitch": 2.843050000000005}, 
                   {"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)
-                mesh_order = gr.Textbox(elem_id="order", value="", label="Order", interactive=False)
-              load_all = gr.Checkbox(label="Load all")
+              coords = gr.Textbox(elem_id="coords", value=example_coords, label="Coordinates", interactive=False)
+              mesh_order = gr.Textbox(elem_id="order", value="", label="Order", interactive=False)
+            load_all = gr.Checkbox(label="Load all")
 
-            with gr.Row():
-                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 +952,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,8 +969,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);
@@ -979,7 +978,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);