Update app.py

app.py

@@ -771,7 +771,7 @@ async(c, o, p, d, n, m, s)=>{
         videoDome.videoTexture.video.oncanplaythrough = function () {
           document.getElementById('seek').innerHTML = '';
           for (var i=0; i<videoDome.videoTexture.video.duration; i++) {
-            document.getElementById('seek').innerHTML += '<a href="#" style="position:absolute;right:'+(56-coords[i].lng/2)+'px;top:'+(56-coords[i].lat/2)+'px;" onclick="seek('+i+');">('+i+')</a> ';
+            document.getElementById('seek').innerHTML += '<a href="#" style="position:absolute;right:'+(56-coords[i].lng/2)+'px;top:'+(56-coords[i].lat/2)+'px;" onclick="seek('+i+');">-'+i+'-</a> ';
           }
           play();
           videoDome.videoTexture.video.oncanplaythrough = null;
@@ -1249,8 +1249,9 @@ 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;position:absolute;' id='seek'></div>
-            <a href='#' id='reset_cam' style='width:12em;float:right;clear:none;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>
+            <span style='max-width:50%;float:right;clear:none;'>
+            <a href='#' id='reset_cam' style='width:8em;float:right;clear:none;color:white' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
                   screenshot: true,
@@ -1269,8 +1270,8 @@ 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><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='
+            '>Reset camera</a><br/>
+            <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);
@@ -1280,8 +1281,8 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
 
               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;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='
+            '/> <span>0.8</span><br/>
+            <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);
@@ -1289,8 +1290,8 @@ 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;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='
+            '/> <span>1.0</span><br/>
+            <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);