Update app.py

app.py

@@ -302,7 +302,7 @@ def select_frame(evt: gr.SelectData):
     global frame_selected
     if evt.index != frame_selected:
         frame_selected = evt.index
-    return gr.Gallery(selected_index=evt.index, preview=True)
+    return gr.Gallery(selected_index=evt.index, preview=True), frame_selected
 
 
 css = """
@@ -352,8 +352,8 @@ with gr.Blocks(css=css) as demo:
             input_url.change(fn=loadurl, inputs=[input_url], outputs=[input_video])
             output_frame = gr.Gallery(label="Frame", type='numpy', preview=True, columns=8192)
             output_depth = gr.Gallery(label="Depth", type='numpy', preview=True, columns=8192, interactive=False)
-            output_frame.select(fn=select_frame, inputs=None, outputs=[output_depth], show_progress='hidden')
-            output_depth.select(fn=select_frame, inputs=None, outputs=[output_frame], show_progress='hidden')
+            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')
             submit = gr.Button("Submit")
         with gr.Column():
             model_type = gr.Dropdown([("small", "vits"), ("base", "vitb"), ("large", "vitl")], type="value", value="vits", label='Model Type')
@@ -463,117 +463,37 @@ 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)
                 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_x = gr.HTML(value="""<label for='offsetx'>x</label><input id='offsetx' type='range' style='width:256px;height:1em;' value='0' min='-256' max='256' oninput='
+                offset_x = gr.HTML(value="""<label for='offsetx'>x</label><input id='offsetx' type='number' value='0' min='-256' max='256' oninput='
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                     var evt = document.createEvent(\"Event\");
                     evt.initEvent(\"click\", true, false);
                     document.getElementById(\"reset_cam\").dispatchEvent(evt);
                   } 
-                  BABYLON.Engine.LastCreatedScene.getNodes()[1].position.x = this.value;
+                  BABYLON.Engine.LastCreatedScene.getNodes()[document.getElementById(\"fnum\").value+1].position.x = this.value;
                   this.parentNode.childNodes[2].innerText = this.value;
                 '/><span>0</span>""")
-                offset_y = gr.HTML(value="""<label for='offsety'>y</label><input id='offsety' type='range' style='width:256px;height:1em;' value='0' min='-256' max='256' oninput='
+                offset_y = gr.HTML(value="""<label for='offsety'>y</label><input id='offsety' type='number' value='0' min='-256' max='256' oninput='
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                     var evt = document.createEvent(\"Event\");
                     evt.initEvent(\"click\", true, false);
                     document.getElementById(\"reset_cam\").dispatchEvent(evt);
                   } 
-                  BABYLON.Engine.LastCreatedScene.getNodes()[1].position.z = this.value;
+                  BABYLON.Engine.LastCreatedScene.getNodes()[document.getElementById(\"fnum\").value+1].position.z = this.value;
                   this.parentNode.childNodes[2].innerText = this.value;
                 '/><span>0</span>""")
-                rotate_y = gr.HTML(value="""<label for='rotatey'>rotate y</label><input id='rotatey' type='range' style='width:256px;height:1em;' value='0' min='-180' max='180' oninput='
+                rotate_y = gr.HTML(value="""<label for='rotatey'>rotate y</label><input id='rotatey' type='number' value='0' min='-180' max='180' oninput='
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                     var evt = document.createEvent(\"Event\");
                     evt.initEvent(\"click\", true, false);
                     document.getElementById(\"reset_cam\").dispatchEvent(evt);
                   } 
-                  BABYLON.Engine.LastCreatedScene.getNodes()[1].rotation.y = this.value;
+                  BABYLON.Engine.LastCreatedScene.getNodes()[document.getElementById(\"fnum\").value+1].rotation.y = this.value;
                   this.parentNode.childNodes[2].innerText = this.value;
                 '/><span>0</span>""")
 
-            gizmo = gr.HTML(value="""<a href='#' id='gizmo' onclick='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                var evt = document.createEvent(\"Event\");
-                evt.initEvent(\"click\", true, false);
-                document.getElementById(\"reset_cam\").dispatchEvent(evt);
-              } 
-              try {
-                BABYLON.Engine.LastCreatedScene.onKeyboardObservable.add((kbInfo) => {
-                  switch (kbInfo.type) {
-                    case BABYLON.KeyboardEventTypes.KEYDOWN:
-                      console.log("KEY DOWN: ", kbInfo.event.key);
-                      break;
-                    case BABYLON.KeyboardEventTypes.KEYUP:
-                      console.log("KEY UP: ", kbInfo.event.code);
-                      break;
-                  }
-                });
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata.gizmoManager) {
-                var metadata = BABYLON.Engine.LastCreatedScene.activeCamera.metadata;
-                metadata.gizmoManager = new BABYLON.GizmoManager(BABYLON.Engine.LastCreatedScene, 8);
-                metadata.gizmo_on = 0;
-                metadata.mesh_on = 0;
-
-                var gizmoManager = metadata.gizmoManager;
-                gizmoManager.positionGizmoEnabled = true;
-                gizmoManager.rotationGizmoEnabled = false;
-                gizmoManager.scaleGizmoEnabled = false;
-                gizmoManager.boundingBoxGizmoEnabled = false;
-
-                gizmoManager.usePointerToAttachGizmos = false;
-                gizmoManager.attachToMesh(BABYLON.Engine.LastCreatedScene.getNodes()[1]);
-
-                BABYLON.Engine.LastCreatedScene.onPointerObservable.add((pointerInfo) => {
-                  try {
-                  switch (pointerInfo.type) {
-                    case BABYLON.PointerEventTypes.POINTERDOWN:
-                      console.log("POINTER DOWN");
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERUP:
-                      console.log("POINTER UP");
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERMOVE:
-                      console.log("POINTER MOVE");
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERWHEEL:
-                      console.log("POINTER WHEEL");
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERPICK:
-                      console.log("POINTER PICK");
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERTAP:
-                      console.log("POINTER TAP");
-                      if (metadata.gizmo_on > 1) {metadata.gizmo_on = 0;}
-
-                      if (metadata.gizmo_on == 0) {
-                        gizmoManager.positionGizmoEnabled = true;
-                        gizmoManager.rotationGizmoEnabled = false;
-                      } else if (metadata.gizmo_on == 1) {
-                        gizmoManager.positionGizmoEnabled = false;
-                        gizmoManager.rotationGizmoEnabled = true;
-                      }
-                  
-                      metadata.gizmo_on++;
-                      break;
-                    case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
-                      console.log("POINTER DOUBLE-TAP");
-                      if (metadata.mesh_on > 1) {metadata.mesh_on = 0;}
-
-                      if (metadata.mesh_on == 0) {
-                        gizmoManager.attachToMesh(BABYLON.Engine.LastCreatedScene.getNodes()[1]);
-                      } else if (metadata.mesh_on == 1) {
-                        gizmoManager.attachToMesh(BABYLON.Engine.LastCreatedScene.getNodes()[2]);
-                      }
-
-                      metadata.mesh_on++;
-                      break;
-                  }
-                  }catch(e){alert(e);}
-                });
-                }catch(e){alert(e);}
-            '>gizmo</a>""")
             camera = gr.HTML(value="""<a href='#' id='reset_cam' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = {