Update app.py

app.py

@@ -338,11 +338,10 @@ def switch_rows(v):
 
 def draw_mask(ksize, th, v, d, evt: gr.EventData):
     print(v)
-    vv = v.split(", ")
-    x = int(vv[0])
-    y = int(vv[1])
-    w = int(vv[2])
-    h = int(vv[3])
+    vv = json.loads(v)
+    pts = np.array(vv, np.int32)
+    pts = pts.reshape((-1,1,2))
+    cv2.polylines(d["background"],[pts],True,(0,0,0))
 
     img = cv2.cvtColor(d["background"], cv2.COLOR_RGB2GRAY)
     rows, cols = img.shape
@@ -368,7 +367,8 @@ def draw_mask(ksize, th, v, d, evt: gr.EventData):
     #abs_grad_y = cv2.convertScaleAbs(grad_y)
 
     #grad = cv2.addWeighted(abs_grad_x, 0.5, abs_grad_y, 0.5, 0)
-    bw = cv2.cvtColor(cv2.threshold(255-img_back, th, 255, cv2.THRESH_BINARY)[1], cv2.COLOR_GRAY2RGB)
+    #bw = cv2.cvtColor(cv2.threshold(255-img_back, th, 255, cv2.THRESH_BINARY)[1], cv2.COLOR_GRAY2RGB)
+    bw = cv2.cvtColor(255-img_back, cv2.COLOR_GRAY2RGB)
 
     d["background"] = bw
     d["composite"] = bw
@@ -428,45 +428,27 @@ 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="""<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) {
+            selector = gr.HTML(value="""<a href='#' id='selector' onclick='
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
+              
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onclick = 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 p = document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value.slice(1, -1);
+              if (p != \"\") { p += \", \"; }
+              p += \"[\" + x + \", \" + y + \"]\";
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[\" + p + \"]\";
+              
               var evt = document.createEvent(\"Event\");
               evt.initEvent(\"input\", true, false);
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
+            }
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].ondblclick = function(e) {
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
             }' title='select'>⬚</a>""")
-            mouse = gr.Textbox(elem_id="mouse", value="""0, 0, 0, 0""")
+            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")
         with gr.Column():