Update app.py

app.py

@@ -358,6 +358,66 @@ with gr.Blocks(css=css) as demo:
             processed_video = gr.Video(label="Output Video", format="mp4")
             processed_zip = gr.File(label="Output Archive")
             result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0], interactive=True, elem_id="model3D")
+            with gr.Accordion(label="Locations", open=False):
+                selected = gr.Number(elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
+                output_frame.select(fn=select_frame, inputs=None, outputs=[output_depth, selected], show_progress='hidden')
+                output_depth.select(fn=select_frame, inputs=None, outputs=[output_frame, selected], show_progress='hidden')
+                example_coords = '50.07379596793083,14.437146122950555 50.073799567020004,14.437146774240507 50.07377647505558,14.437161000659017 50.07379496839027,14.437148958238538 50.073823157821664,14.437124189538856'
+                coords = gr.Textbox(elem_id="coords", value=example_coords, label="Precise coordinates", show_label=False)
+                offset = gr.HTML(value="""<svg id='offset' height='256' width='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;background-color:transparent;' onpointerdown='
+                  if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
+                    var evt = document.createEvent(\"Event\");
+                    evt.initEvent(\"click\", true, false);
+                    document.getElementById(\"reset_cam\").dispatchEvent(evt);
+                  } 
+                if (this.style.backgroundColor != \"#808080\") {
+                  this.style.backgroundColor = \"#808080\";
+                  this.onpointermove = function(event) {
+                    if (this.title != \"\") {
+                    try{
+                      x = parseInt(event.clientX - this.getBoundingClientRect().x);
+                      y = parseInt(event.clientY - this.getBoundingClientRect().y);
+                      if (x < 0) { x = 0; } else if (x > 255) { x = 255; }
+                      if (y < 0) { y = 0; } else if (y > 255) { y = 255; }
+                      
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x = x-128;
+                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y = y-128;
+                      
+                      xold = x;
+                      yold = y;
+                      document.getElementById(\"cr\").setAttribute(\"cx\", x);
+                      document.getElementById(\"cr\").setAttribute(\"cy\", y);
+                    }catch(e){alert(e);}
+                    }
+                  }
+                  this.onpointerup = function(event) {
+                    this.title = \"\";
+                  }
+                  this.onpointerleave = function(event) {
+                    this.title = \"\";
+                  }
+                  this.onpointerdown = function(event) {
+                    xold = parseInt(event.clientX - event.target.getBoundingClientRect().x);
+                    yold = parseInt(event.clientY - event.target.getBoundingClientRect().y);
+                    this.title = xold+\",\"+yold;
+                  }
+                  this.onclick = function(event) {
+                  alert(BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation);
+                  try{
+                    BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y = parseInt(event.clientX - this.getBoundingClientRect().x-128)/128*Math.PI;
+                  }catch(e){alert(e);}
+                  }
+                }
+              '>
+                <defs>
+                  <linearGradient id='lg' x1='0%' x2='100%' y1='0%' y2='0%'>
+                    <stop offset='0%' stop-color='white'/>
+                    <stop offset='100%' stop-color='black'/>
+                  </linearGradient>
+                </defs>
+                <circle cx="127" cy="127" r="32" id='cr' stroke='none' fill='url(#lg)'/>
+              </svg>""")
+                            
             svg_in = gr.HTML(value="""<svg id='svg_in' height='32' width='256' viewBox='0 0 256 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;background-color:#808080;' onpointerdown='
               try{
                 if (document.getElementById(\"pl\").getAttribute(\"points\").length < 256) {
@@ -374,8 +434,8 @@ with gr.Blocks(css=css) as demo:
                   
                   this.onpointermove = function(event) {
                     if (this.title != \"\") {
-                      x = parseInt(event.clientX - event.target.getBoundingClientRect().x);
-                      y = parseInt(event.clientY - event.target.getBoundingClientRect().y);
+                      x = parseInt(event.clientX - this.getBoundingClientRect().x);
+                      y = parseInt(event.clientY - this.getBoundingClientRect().y);
                       if (x < 0) { x = 0; } else if (x > 255) { x = 255; }
                       if (y < 0) { y = 0; } else if (y > 31) { y = 31; }
                       var pl_a = document.getElementById(\"pl\").getAttribute(\"points\").split(\" \");
@@ -404,8 +464,8 @@ with gr.Blocks(css=css) as demo:
                     this.title = \"\";
                   }
                   this.onpointerdown = function(event) {
-                    xold = parseInt(event.clientX - event.target.getBoundingClientRect().x);
-                    yold = parseInt(event.clientY - event.target.getBoundingClientRect().y);
+                    xold = parseInt(event.clientX - this.getBoundingClientRect().x);
+                    yold = parseInt(event.clientY - this.getBoundingClientRect().y);
                     this.title = xold+\",\"+yold;
                   }
                 }
@@ -460,66 +520,6 @@ with gr.Blocks(css=css) as demo:
 
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/2.0*Math.sqrt(2.0) + \"px)\";
             '/><span>0.8</span>""")
-            with gr.Accordion(label="Locations", open=False):
-                selected = gr.Number(elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
-                output_frame.select(fn=select_frame, inputs=None, outputs=[output_depth, selected], show_progress='hidden')
-                output_depth.select(fn=select_frame, inputs=None, outputs=[output_frame, selected], show_progress='hidden')
-                example_coords = '50.07379596793083,14.437146122950555 50.073799567020004,14.437146774240507 50.07377647505558,14.437161000659017 50.07379496839027,14.437148958238538 50.073823157821664,14.437124189538856'
-                coords = gr.Textbox(elem_id="coords", value=example_coords, label="Precise coordinates", show_label=False)
-                offset = gr.HTML(value="""<svg id='offset' height='256' width='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;background-color:transparent;' onpointerdown='
-                  if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                    var evt = document.createEvent(\"Event\");
-                    evt.initEvent(\"click\", true, false);
-                    document.getElementById(\"reset_cam\").dispatchEvent(evt);
-                  } 
-                if (this.style.backgroundColor != \"#808080\") {
-                  this.style.backgroundColor = \"#808080\";
-                  this.onpointermove = function(event) {
-                    if (this.title != \"\") {
-                    try{
-                      x = parseInt(event.clientX - event.target.getBoundingClientRect().x);
-                      y = parseInt(event.clientY - event.target.getBoundingClientRect().y);
-                      if (x < 0) { x = 0; } else if (x > 255) { x = 255; }
-                      if (y < 0) { y = 0; } else if (y > 255) { y = 255; }
-                      
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x = x-128;
-                      BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y = y-128;
-                      
-                      xold = x;
-                      yold = y;
-                      document.getElementById(\"cr\").setAttribute(\"cx\", x);
-                      document.getElementById(\"cr\").setAttribute(\"cy\", y);
-                    }catch(e){alert(e);}
-                    }
-                  }
-                  this.onpointerup = function(event) {
-                    this.title = \"\";
-                  }
-                  this.onpointerleave = function(event) {
-                    this.title = \"\";
-                  }
-                  this.onpointerdown = function(event) {
-                    xold = parseInt(event.clientX - event.target.getBoundingClientRect().x);
-                    yold = parseInt(event.clientY - event.target.getBoundingClientRect().y);
-                    this.title = xold+\",\"+yold;
-                  }
-                  this.onclick = function(event) {
-                  alert(BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1]);
-                  try{
-                    BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y = parseInt(event.clientX - event.target.getBoundingClientRect().x-128)/128*Math.PI;
-                  }catch(e){alert(e);}
-                  }
-                }
-              '>
-                <defs>
-                  <linearGradient id='lg' x1='0%' x2='100%' y1='0%' y2='0%'>
-                    <stop offset='0%' stop-color='white'/>
-                    <stop offset='100%' stop-color='black'/>
-                  </linearGradient>
-                </defs>
-                <circle cx="127" cy="127" r="32" id='cr' stroke='none' fill='url(#lg)'/>
-              </svg>""")
-
             camera = gr.HTML(value="""<a href='#' id='reset_cam' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = {