Update app.py

app.py

@@ -310,17 +310,6 @@ css = """
     }
 """
 
-js = """
-var iv = setInterval(function() {
-    try {
-        if (BABYLON && BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize) {
-            alert(BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize);
-            clearInterval(iv);
-        }
-    } catch(e) {}
-}, 1000);
-"""
-
 title = "# Depth Anything Video Demo"
 description = """Depth Anything on full video files.  
 Please refer to our [paper](https://arxiv.org/abs/2401.10891), [project page](https://depth-anything.github.io), or [github](https://github.com/LiheYoung/Depth-Anything) for more details.  
@@ -344,7 +333,7 @@ transform = Compose([
 # def predict_depth(model, image):
 #     return model(image)
 
-with gr.Blocks(css=css, js=js) as demo:
+with gr.Blocks(css=css) as demo:
     gr.Markdown(title)
     gr.Markdown(description)
     gr.Markdown("### Video Depth Prediction demo")
@@ -434,50 +423,54 @@ with gr.Blocks(css=css, js=js) as demo:
               this.parentNode.childNodes[2].innerText = this.value;
             '/><span>1</span>""")
             blur_in = gr.Textbox(value="", label="Blur kernel size")
-            html = gr.HTML(value="""<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' min='0.157' max='1.57' step='0.001' oninput='
+            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);
+                document.getElementById(\"reset_cam\").dispatchEvent(evt);
+              } 
               BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize = Math.ceil(Math.log2(Math.PI/this.value));
-              
+              BABYLON.Engine.LastCreatedScene.activeCamera.fov = this.value;
+              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
+            '/><span>0.8</span>""")
+            camera = gr.HTML(value="""<a href='#' id='reset_cam' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
                   screenshot: true,
                   pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
                 }
               } 
+              BABYLON.Engine.LastCreatedScene.activeCamera.radius = 0;
+              BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize = Math.ceil(Math.log2(Math.PI/document.getElementById(\"zoom\").value));
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = this.value;
-              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = document.getElementById(\"contrast\").value;
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = document.getElementById(\"exposure\").value;
               
               document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0)/2.0 + \"px)\";
-            '/><span>0.8</span>""")
-            camera = gr.HTML(value="<a href='#' onclick=\"BABYLON.Engine.LastCreatedScene.activeCamera.radius=0;\">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='2.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
-                  screenshot: true,
-                  pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
-                }
+                var evt = document.createEvent(\"Event\");
+                evt.initEvent(\"click\", true, false);
+                document.getElementById(\"reset_cam\").dispatchEvent(evt);
               } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;
             '/><span>2.0</span>""")
             exposure = gr.HTML(value="""<label for='exposure'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' value='0.5' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
-                  screenshot: true,
-                  pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
-                }
+                var evt = document.createEvent(\"Event\");
+                evt.initEvent(\"click\", true, false);
+                document.getElementById(\"reset_cam\").dispatchEvent(evt);
               } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
             '/><span>0.5</span>""")
             canvas = gr.HTML(value="""<a href='#' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
-                  screenshot: true,
-                  pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
-                }
+                var evt = document.createEvent(\"Event\");
+                evt.initEvent(\"click\", true, false);
+                document.getElementById(\"reset_cam\").dispatchEvent(evt);
               } 
               //var cntxt = document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].getContext(\"webgl2\");
               //this.innerText = cntxt;