Update app.py

app.py

@@ -1260,6 +1260,27 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
             load_all = gr.Checkbox(label="Load all")
 
           with gr.Group():
+            camera = gr.HTML(value="""<div style='width:128px;height:128px;border:1px dotted gray;padding:0;margin:0;float:left;' id='seek'></div><br/>
+            <a href='#' id='reset_cam' style='width:12em;float:left;color:white' 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.activeCamera.alpha = 0;
+              BABYLON.Engine.LastCreatedScene.activeCamera.beta = Math.PI / 2;
+    
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
+              BABYLON.Engine.LastCreatedScene.activeCamera.fov = document.getElementById(\"zoom\").value;
+              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.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>""")
             html = gr.HTML(value="""<span style='max-width:50%;float:right'><label for='zoom' style='width:8em'>Zoom</label><input id='zoom' type='range' style='width:128px;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\");
@@ -1289,27 +1310,6 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
             '/> <span>1.0</span></span>""")
-            camera = gr.HTML(value="""<div style='width:128px;height:128px;border:1px dotted gray;padding:0;margin:0;float:left;' id='seek'></div>
-            <a href='#' id='reset_cam' style='width:12em;float:left;color:white' 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.activeCamera.alpha = 0;
-              BABYLON.Engine.LastCreatedScene.activeCamera.beta = Math.PI / 2;
-    
-              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = document.getElementById(\"zoom\").value;
-              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.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>""")
             snapshot = gr.HTML(value="""<span style='max-width:50%;float:right'>
               <a href='#' onclick='snapshot();'>Screenshot</a>
               <a href='#' onclick='record_video();'>Record</a>