Update app.py

app.py

@@ -593,9 +593,6 @@ async(c, o, p, d, n, m, s)=>{
           }*/
           BABYLON.Engine.LastCreatedScene.getAnimationRatio();
         });
-        var CoT = new BABYLON.TransformNode("root");
-        BABYLON.Engine.LastCreatedScene.activeCamera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 1.0, new BABYLON.Vector3(0, 0, 0))
-        BABYLON.Engine.LastCreatedScene.activeCamera.target = CoT;
         
         if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
           BABYLON.Engine.LastCreatedScene.activeCamera.metadata = {
@@ -713,9 +710,6 @@ async(c, o, p, d, n, m, s)=>{
         if (md === true) {
           x = parseInt(evt.clientX - evt.target.getBoundingClientRect().x);
           y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
-          CoT.rotation.y = BABYLON.Engine.LastCreatedScene.activeCamera.alpha;
-          CoT.rotation.x = BABYLON.Engine.LastCreatedScene.activeCamera.beta;
-          CoT.position.z = BABYLON.Engine.LastCreatedScene.activeCamera.radius;
           
           if (Math.abs(x-xold)>16 || Math.abs(y-yold)>16) {
             if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > 16) {
@@ -1266,8 +1260,8 @@ 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:right;color:white' onclick='
+            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/>
+            <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 = { 
                   screenshot: true,
@@ -1287,7 +1281,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               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='
+            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\");
                 evt.initEvent(\"click\", true, false);
@@ -1298,7 +1292,7 @@ with gr.Blocks(css=css, js=js, head=head) 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></span>""")
-            contrast = gr.HTML(value="""<span style='max-width:50%;float:right'><label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            contrast = gr.HTML(value="""<span style='max-width:50%;float:right;clear:none;'><label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1307,7 +1301,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;
             '/> <span>1.0</span></span>""")
-            exposure = gr.HTML(value="""<span style='max-width:50%;float:right'><label for='exposure' style='width:8em'>Exposure</label><input id='exposure' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            exposure = gr.HTML(value="""<span style='max-width:50%;float:right;clear:none;'><label for='exposure' style='width:8em'>Exposure</label><input id='exposure' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1316,7 +1310,7 @@ 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>""")
-            snapshot = gr.HTML(value="""<span style='max-width:50%;float:right'>
+            snapshot = gr.HTML(value="""<span style='max-width:50%;float:right;clear:none;'>
               <a href='#' onclick='snapshot();'>Screenshot</a>
               <a href='#' onclick='record_video();'>Record</a>
               <a href='#' onclick='stop_recording();'>Stop rec.</a>