Update app.py

app.py

@@ -692,11 +692,7 @@ async(c, o, p, d, n, m, s)=>{
         BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].alphaIndex = 1;
         BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].visibility = 0.9999;
 
-        window.CoT = CoT;
         window.md = false;
-        window.r_old = 1.0;
-        window.a_old = 0;
-        window.b_old = Math.PI / 2;
         window.compass = document.getElementById("compass");
         window.x = 0;
         window.y = 0;
@@ -712,17 +708,10 @@ async(c, o, p, d, n, m, s)=>{
           y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
           
           if (Math.abs(x-xold)>16 || Math.abs(y-yold)>16) {
-            if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > 16) {
-              BABYLON.Engine.LastCreatedScene.activeCamera.radius = r_old;
+            if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > (1.57-0.157)*16) {
+              BABYLON.Engine.LastCreatedScene.activeCamera.radius = (1.57-0.157)*16;
             } else {
-              r_old = BABYLON.Engine.LastCreatedScene.activeCamera.radius;
-            }
-            BABYLON.Engine.LastCreatedScene.activeCamera.fov = 0.8 * BABYLON.Engine.LastCreatedScene.activeCamera.radius;
-    
-            if (BABYLON.Engine.LastCreatedScene.activeCamera.fov < 0.157) {
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = 0.157;
-            } else if (BABYLON.Engine.LastCreatedScene.activeCamera.fov > 1.57) {
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = 1.57;
+              BABYLON.Engine.LastCreatedScene.activeCamera.fov = BABYLON.Engine.LastCreatedScene.activeCamera.radius/16 + 0.157;
             }
             document.getElementById('zoom').value = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
             document.getElementById('zoom').parentNode.childNodes[2].innerText = document.getElementById('zoom').value;
@@ -1260,7 +1249,7 @@ 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;clear:none;' id='seek'></div><br/>
+            camera = gr.HTML(value="""<div style='width:128px;height:128px;border:1px dotted gray;padding:0;margin:0;position:absolute;' id='seek'></div>
             <a href='#' id='reset_cam' style='width:12em;float:right;clear:none;color:white' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
@@ -1280,7 +1269,7 @@ with gr.Blocks(css=css, js=js, head=head) 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><br/>""")
             html = gr.HTML(value="""<span style='max-width:50%;float:right;clear:none;'><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\");