Update app.py

app.py

@@ -816,8 +816,8 @@ css = """
 """
 
 title = "# Depth Anything V2 Video"
-description = """**Depth Anything V2** on full video files.
-Please refer to our [paper](https://arxiv.org/abs/2406.09414), [project page](https://depth-anything-v2.github.io), and [github](https://github.com/DepthAnything/Depth-Anything-V2) for more details."""
+description = """**Depth Anything V2** on full video files, intended for Google Street View panorama slideshows.
+Please refer to their [paper](https://arxiv.org/abs/2406.09414), [project page](https://depth-anything-v2.github.io), and [github](https://github.com/DepthAnything/Depth-Anything-V2) for more details."""
 
     
 #transform = Compose([
@@ -851,11 +851,12 @@ with gr.Blocks(css=css, js=js) as demo:
             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.Row():
-              output_switch = gr.Checkbox(label="Show depths")
-              selected = gr.Number(label="Selected frame", 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():
+              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():
@@ -923,9 +924,10 @@ 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.Accordion(label="Blur levels", open=False):
+            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):
+              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}, 
@@ -936,9 +938,10 @@ with gr.Blocks(css=css, js=js) as demo:
                 ]"""
                 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")
-            
-            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='
+              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='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -949,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' 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,
@@ -965,7 +968,8 @@ with gr.Blocks(css=css, js=js) as demo:
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + Math.ceil(Math.log2(Math.PI/document.getElementById(\"zoom\").value))/2.0*Math.sqrt(2.0) + \"px)\";
               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>""")
+            '>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='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");