Update app.py

app.py

@@ -1281,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="""<label for='zoom' style='width:5em'>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='
+            html = gr.HTML(value="""<span style='float:left'><label for='zoom' style='width:5em'>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);
@@ -1291,8 +1291,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>""")
-            contrast = gr.HTML(value="""<label for='contrast' style='width:5em'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            '/><span>0.8</span></span>""")
+            contrast = gr.HTML(value="""<span style='float:left'><label for='contrast' style='width:5em'>Contrast</label><input id='contrast' type='range' style='width:256px;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);
@@ -1300,8 +1300,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>""")
-            exposure = gr.HTML(value="""<label for='exposure' style='width:5em'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            '/><span>1.0</span></span>""")
+            exposure = gr.HTML(value="""<span style='float:left'><label for='exposure' style='width:5em'>Exposure</label><input id='exposure' type='range' style='width:256px;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);
@@ -1309,14 +1309,15 @@ 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>""")
-            snapshot = gr.HTML(value="""
+            '/><span>1.0</span></span>""")
+            snapshot = gr.HTML(value="""<span style='float:left'>
               <a href='#' onclick='snapshot();'>Screenshot</a>
               <a href='#' onclick='record_video();'>Record</a>
               <a href='#' onclick='stop_recording();'>Stop rec.</a>
               <a href='#' onclick='play();'>Play</a><br/>
               <img src='' id='img_out' onload='var ctxt = document.getElementById(\"cnv_out\").getContext(\"2d\");ctxt.drawImage(this, 0, 0);'/><br/>
               <canvas id='cnv_out'></canvas>
+              </span>
               <div id='compass_box'><div id='compass'><a id='fullscreen' onclick='
                 const model3D = document.getElementById(\"model3D\");
                 if (model3D.parentNode.tagName != \"BODY\") {