Update app.py

app.py

@@ -311,15 +311,6 @@ css = """
 """
 
 js = """
-var txtr = document.getElementsByTagName(\"textarea\")[1];
-txtr.parentNode.onclick = function(event) {
-  if (txtr.style.display != 'block')
-    txtr.style.display = 'block';
-  } else {
-    txtr.style.display = 'none';
-  }
-}
-txtr.style.display = 'none';
 """
 
 title = "# Depth Anything Video Demo"
@@ -450,7 +441,9 @@ with gr.Blocks(css=css, js=js) as demo:
             ' oninput='
               this.parentNode.childNodes[2].innerText = this.value;
             '/><span>1</span>""")
-            blur_in = gr.Textbox(value="", label="Blur kernel size")
+            with gr.Accordion(label="Blur levels", open=False):
+                blur_in = gr.Textbox(value="", label="Kernel size", show_label=False)
+                
             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\");
@@ -510,7 +503,6 @@ with gr.Blocks(css=css, js=js) as demo:
                   try {
                     BABYLON.Tools.CreateScreenshotUsingRenderTarget(BABYLON.Engine.LastCreatedScene.getEngine(), BABYLON.Engine.LastCreatedScene.activeCamera, 
                       { precision: 1.0 }, (durl) => { 
-                        document.getElementById(\"img_out\").src = durl;
                         document.getElementById(\"img_out\").onload = function() {
                           var svgd = `<svg id=\"svg_out\" viewBox=\"0 0 ` + document.getElementById(\"img_out\").width + ` ` + document.getElementById(\"img_out\").height + `\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
                             <defs>
@@ -520,20 +512,21 @@ with gr.Blocks(css=css, js=js) as demo:
                             </defs>
                             <image filter=\"url(#blur)\" id=\"svg_img\" x=\"0\" y=\"0\" width=\"` + document.getElementById(\"img_out\").width + `\" height=\"` + document.getElementById(\"img_out\").height + `\" xlink:href=\"` + durl + `\"/>
                           </svg>`;
-                          document.getElementById(\"img_out\").src = \"data:image/svg+xml;base64,\" + btoa(svgd); 
                           document.getElementById(\"img_out\").onload = function() {
                             document.getElementById(\"cnv_out\").width = document.getElementById(\"img_out\").width;
                             document.getElementById(\"cnv_out\").height = document.getElementById(\"img_out\").height;
                             document.getElementById(\"cnv_out\").getContext(\"2d\").drawImage(img_out, 0, 0); 
                           }
+                          document.getElementById(\"img_out\").src = \"data:image/svg+xml;base64,\" + btoa(svgd); 
                         }
+                        document.getElementById(\"img_out\").src = durl;
                       }
                     );
                   } catch(e) { alert(e); }
                   // https://forum.babylonjs.com/t/best-way-to-save-to-jpeg-snapshots-of-scene/17663/11
                 }
               });
-            '/>webgl2</a><br/><img src='' id='img_out'/><br/>
+            '/>snapshot</a><br/><img src='' id='img_out'/><br/>
             <canvas id='cnv_out'/>""")
             render = gr.Button("Render")