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="""<input type='text' id='kbrd' onpointerdown='this.style.color = \"white\";' onpointerup='this.style.color = \"auto\";' onpointermove='
+                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='
                 try {
                 if (this.style.color!=\"auto\" && BABYLON) {
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
@@ -621,7 +621,6 @@ 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());
-                  //alert(angle);
                   const x = event.clientX-this.getBoundingClientRect().x-64;
                   const y = event.clientY-this.getBoundingClientRect().y-64;
                   const angle_ = Math.atan2(y, x);
@@ -641,6 +640,9 @@ 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;
                   }
+                  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());
                   switch(event.key) {
                     case \"w\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y += 1;
@@ -651,19 +653,27 @@ with gr.Blocks(css=css) as demo:
                       this.value = \"w ⬇ x\";
                       break;
                     case \"a\":
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z -= 1;
+                      const x = -1; const y = 0;
+                      const angle_ = Math.atan2(y, x);
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z += Math.sin(-angle_-angle);
                       this.value = \"a ⬅ d\";
                       break;
                     case \"d\":
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z += 1;
+                      const x = 1; const y = 0;
+                      const angle_ = Math.atan2(y, x);
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z += Math.sin(-angle_-angle);
                       this.value = \"a ➡ d\";
                       break;
                     case \"e\":
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x -= 1;
+                      const x = 0; const y = -1;
+                      const angle_ = Math.atan2(y, x);
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x += Math.cos(-angle_-angle);
                       this.value = \"z ↗ e\";
                       break;
                     case \"z\":
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x += 1;
+                      const x = 0; const y = 1;
+                      const angle_ = Math.atan2(y, x);
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x += Math.cos(-angle_-angle);
                       this.value = \"z ↙ e\";
                       break;
                     case \"s\":
@@ -736,13 +746,14 @@ with gr.Blocks(css=css) as demo:
                       this.value = \"\"; 
                   }
                 }
-                ' style='float:left;height:128px;width:128px;user-select:none;touch-action:none;color:auto;background-color:transparent;border:1px solid gray;'/><pre id='keymap' style='float:right'>
+                ' style='height:128px;width:128px;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>""")
+                </pre></div>""")
                 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 = """[