Update app.py

app.py

@@ -410,6 +410,46 @@ with gr.Blocks(css=css) as demo:
             output_switch = gr.Checkbox(label="Show depths")
             output_switch.input(fn=switch_rows, inputs=[output_switch], outputs=[output_frame])
             output_mask = gr.ImageEditor(layers=True, sources=None, type="numpy", interactive=True, transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(default_size=0, colors=['black', '#505050', '#a0a0a0', 'white']), elem_id="image_edit")
+            selector = gr.HTML(value="""<div id='select_frame' style='position:absolute;border:1px dashed #808080;width:0;height:0'></div>
+            <input type='number' id='mousedown' style='width:10em;color:auto;background-color:transparent;border:1px solid lightgray;'/>
+            <input type='number' id='mouseup' style='width:10em;color:auto;background-color:transparent;border:1px solid lightgray;'/>
+            <a href='#' id='selector' onclick='
+            document.body.appendChild(document.getElementById(\"select_frame\"));
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerdown = function(e) {
+              var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
+              var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
+              document.getElementById(\"mousedown\").value = x + y / 10000;
+
+              document.getElementById(\"select_frame\").style.left = 0;
+              document.getElementById(\"select_frame\").style.width = 0;
+              document.getElementById(\"select_frame\").style.top = 0;
+              document.getElementById(\"select_frame\").style.height = 0;
+            }
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerup = function(e) {
+              var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
+              var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
+              document.getElementById(\"mouseup\").value = x + y / 10000;
+
+              var x0 = parseInt(document.getElementById(\"mousedown\").value);
+              var x1 = parseInt(document.getElementById(\"mouseup\").value);
+              var y0 = parseInt((parseFloat(document.getElementById(\"mousedown\").value)-x0)*10000);
+              var y1 = parseInt((parseFloat(document.getElementById(\"mouseup\").value)-x1)*10000);
+              var x = Math.min(x0, x1);
+              var y = Math.min(y0, y1);
+              var w = Math.max(x0, x1)-x;
+              var h = Math.max(y0, y1)-y;
+              document.getElementById(\"select_frame\").style.left = e.target.getBoundingClientRect().x + x/e.target.width*e.target.getBoundingClientRect().width + \"px\";
+              document.getElementById(\"select_frame\").style.width = w/e.target.width*e.target.getBoundingClientRect().width + \"px\";
+              document.getElementById(\"select_frame\").style.top = e.target.getBoundingClientRect().y + y/e.target.height*e.target.getBoundingClientRect().height + \"px\";
+              document.getElementById(\"select_frame\").style.height = h/e.target.height*e.target.getBoundingClientRect().height + \"px\";
+
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = x + \", \" + y + \", \" + w + \", \" + h;
+              var evt = document.createEvent(\"Event\");
+              evt.initEvent(\"input\", true, false);
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
+            }' title='select'>⬚</a>""")
+            mouse = gr.Textbox(elem_id="mouse", value="""0, 0, 0, 0""")
+            output_mask.apply(fn=draw_mask, inputs=[mouse, output_mask], outputs=[output_mask])
             submit = gr.Button("Submit")
         with gr.Column():
             model_type = gr.Dropdown([("small", "vits"), ("base", "vitb"), ("large", "vitl")], type="value", value="vits", label='Model Type')
@@ -688,46 +728,6 @@ with gr.Blocks(css=css) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.gizmoManager.attachToMesh(BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1]);
 
             '>reset camera</a>""")
-            mouse = gr.Textbox(elem_id="mouse", value="""0, 0, 0, 0""")
-            output_mask.apply(fn=draw_mask, inputs=[mouse, output_mask], outputs=[output_mask])
-            selector = gr.HTML(value="""<div id='select_frame' style='position:absolute;border:1px dashed #808080;width:0;height:0'></div>
-            <input type='number' id='mousedown' style='color:auto;background-color:transparent;border:1px solid lightgray;'/>
-            <input type='number' id='mouseup' style='color:auto;background-color:transparent;border:1px solid lightgray;'/>
-            <a href='#' id='selector' onclick='
-            document.body.appendChild(document.getElementById(\"select_frame\"));
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerdown = function(e) {
-              var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
-              var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
-              document.getElementById(\"mousedown\").value = x + y / 10000;
-
-              document.getElementById(\"select_frame\").style.left = 0;
-              document.getElementById(\"select_frame\").style.width = 0;
-              document.getElementById(\"select_frame\").style.top = 0;
-              document.getElementById(\"select_frame\").style.height = 0;
-            }
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerup = function(e) {
-              var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
-              var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
-              document.getElementById(\"mouseup\").value = x + y / 10000;
-
-              var x0 = parseInt(document.getElementById(\"mousedown\").value);
-              var x1 = parseInt(document.getElementById(\"mouseup\").value);
-              var y0 = parseInt((parseFloat(document.getElementById(\"mousedown\").value)-x0)*10000);
-              var y1 = parseInt((parseFloat(document.getElementById(\"mouseup\").value)-x1)*10000);
-              var x = Math.min(x0, x1);
-              var y = Math.min(y0, y1);
-              var w = Math.max(x0, x1)-x;
-              var h = Math.max(y0, y1)-y;
-              document.getElementById(\"select_frame\").style.left = e.target.getBoundingClientRect().x + x/e.target.width*e.target.getBoundingClientRect().width + \"px\";
-              document.getElementById(\"select_frame\").style.width = w/e.target.width*e.target.getBoundingClientRect().width + \"px\";
-              document.getElementById(\"select_frame\").style.top = e.target.getBoundingClientRect().y + y/e.target.height*e.target.getBoundingClientRect().height + \"px\";
-              document.getElementById(\"select_frame\").style.height = h/e.target.height*e.target.getBoundingClientRect().height + \"px\";
-
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = x + \", \" + y + \", \" + w + \", \" + h;
-              var evt = document.createEvent(\"Event\");
-              evt.initEvent(\"input\", true, false);
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
-            }'>selector</a>""")
             contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' value='2.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");