Update app.py

app.py

@@ -606,7 +606,7 @@ with gr.Blocks(css=css) as demo:
             with gr.Accordion(label="Blur levels", open=False):
                 blur_in = gr.Textbox(label="Kernel size", show_label=False, value="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1")
             with gr.Accordion(label="Locations", open=False):
-                offset = gr.HTML(value="""<div style='text-align:center;width:100%;'><input type='text' id='kbrd' onpointerdown='this.style.color = \"white\";' onpointerup='this.style.color = \"auto\";' onpointermove='
+                offset = gr.HTML(value="""<input type='text' id='kbrd' onpointerdown='this.style.color = \"white\";' onpointerup='this.style.color = \"auto\";' onpointermove='
                 try {
                 if (this.style.color!=\"auto\" && BABYLON) {
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
@@ -621,7 +621,7 @@ with gr.Blocks(css=css) as demo:
                   const dir = BABYLON.Engine.LastCreatedScene.activeCamera.getForwardRay().direction;
                   dir.y = 0; dir.normalize();
                   const angle = BABYLON.Vector3.GetAngleBetweenVectors(dir, BABYLON.Vector3.Forward(), BABYLON.Vector3.Up());
-                  const x = event.clientX-this.getBoundingClientRect().x-64;
+                  const x = event.clientX-this.getBoundingClientRect().x-128;
                   const y = event.clientY-this.getBoundingClientRect().y-64;
                   const angle_ = Math.atan2(y, x);
                   const r = Math.sqrt(Math.pow(y,2) + Math.pow(x,2));
@@ -640,6 +640,7 @@ with gr.Blocks(css=css) as demo:
                   if (BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion) {
                     BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion = null;
                   }
+                  try {
                   const dir = BABYLON.Engine.LastCreatedScene.activeCamera.getForwardRay().direction;
                   dir.y = 0; dir.normalize();
                   const angle = BABYLON.Vector3.GetAngleBetweenVectors(dir, BABYLON.Vector3.Forward(), BABYLON.Vector3.Up());
@@ -745,15 +746,16 @@ with gr.Blocks(css=css) as demo:
                     default:
                       this.value = \"\"; 
                   }
+                  } catch(e) {alert(e)}
                 }
-                ' style='height:128px;width:128px;user-select:none;touch-action:none;color:auto;background-color:transparent;border:1px solid gray;'/>
+                ' style='height:128px;width:256px;user-select:none;touch-action:none;color:auto;background-color:transparent;border:1px solid gray;'/>
                 <pre id='keymap'>
 `  1  2  3  4  5  6  7  8  9  0  -  =  
        W  E     T  Y     I  O     {  }
      A-`S´-D  F-`G´-H  J-`K´-L  ;  '
       Z´ X̀     V´ B̀     M´ `,  .  /
       <a id='move' href='#'>move</a>    <a id='rotate' href='#'>rotate</a>    <a id='scale' href='#'>scale</a>
-                </pre></div>""")
+                </pre>""")
                 selected = gr.Number(elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
                 output_frame.select(fn=select_frame, inputs=[output_mask], outputs=[output_mask, selected])
                 example_coords = """[