Update app.py

app.py

@@ -432,7 +432,9 @@ with gr.Blocks(css=css) as demo:
             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")
             ksize = gr.Slider(label="Kernel", value=128, minimum=0, maximum=1024, step=1)
             threshold = gr.Slider(label="Threshold", value=128, minimum=0, maximum=255, step=1)
-            selector = gr.HTML(value="""<a href='#' id='selector' onclick='
+            selector = gr.HTML(value="""<div id='select_cursor' style='width:1px;height:1px;position:absolute;border:1px dotted #ffffff;'></div>
+            <a href='#' id='selector' onclick='this.style.fontWeight=\"bold\";
+            document.body.appendChild(document.getElementById(\"select_cursor\"));
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
               
@@ -448,10 +450,16 @@ with gr.Blocks(css=css) as demo:
               var evt = document.createEvent(\"Event\");
               evt.initEvent(\"input\", true, false);
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
+
+              document.getElementById(\"select_cursor\").style.left = e.clientX;
+              document.getElementById(\"select_cursor\").style.top = e.clientY;
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointermove = function(e) {
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
-            }' title='select' style='text-decoration:none;color:white;font-weight:bold'>⬚</a>""")
+
+              document.getElementById(\"select_cursor\").style.left = 0;
+              document.getElementById(\"select_cursor\").style.top = 0;
+            }' title='select' style='text-decoration:none;color:white;'>⬚ Select polygon</a>""")
             mouse = gr.Textbox(elem_id="mouse", value="""[]""", interactive=False)
             output_mask.apply(fn=draw_mask, inputs=[ksize, threshold, mouse, output_mask], outputs=[output_mask])
             submit = gr.Button("Submit")