Update app.py

app.py

@@ -369,12 +369,6 @@ def draw_mask(f, n, c, k, v, d, evt: gr.EventData):
     else:
         d["background"] = cv2.imread(masks[frame_selected]).astype(np.uint8)
 
-    #indices = np.arange(0,256)   # List of all colors 
-    #divider = np.linspace(0,255,n+1)[1] # we get a divider
-    #quantiz = np.int0(np.linspace(0,255,n)) # we get quantization colors
-    #color_levels = np.clip(np.int0(indices/divider),0,n-1) # color levels 0,1,2..
-    #palette = quantiz[color_levels]
-
     bg = cv2.cvtColor(d["background"], cv2.COLOR_RGBA2GRAY)
     gd = cv2.cvtColor(gradient, cv2.COLOR_RGBA2GRAY)
 
@@ -383,9 +377,15 @@ def draw_mask(f, n, c, k, v, d, evt: gr.EventData):
     kernel = np.ones((k,k),np.float32)/(k*k)
     mask = cv2.filter2D(mask,-1,kernel)
 
-    for i in range(n):
-        bg[(bg >= i*255/n) & (bg < (i+1)*255/n)] = i*255/(n-1)
-    bg = cv2.convertScaleAbs(bg).astype(np.uint8) #palette[bg]) # Converting image back to uint
+    indices = np.arange(0,256)   # List of all colors 
+    divider = np.linspace(0,255,n+1)[1] # we get a divider
+    quantiz = np.int0(np.linspace(0,255,n)) # we get quantization colors
+    color_levels = np.clip(np.int0(indices/divider),0,n-1) # color levels 0,1,2..
+    palette = quantiz[color_levels]
+
+    #for i in range(n):
+    #    bg[(bg >= i*255/n) & (bg < (i+1)*255/n)] = i*255/(n-1)
+    bg = cv2.convertScaleAbs(palette[bg]).astype(np.uint8) # Converting image back to uint
 
     scale = 1
     delta = 0
@@ -468,18 +468,20 @@ with gr.Blocks(css=css) as demo:
             output_frame = gr.Gallery(label="Frames", preview=True, columns=8192, type="numpy")
             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")
+            output_mask = gr.ImageEditor(layers=True, sources=None, type="numpy", interactive=True, show_progress='hidden', transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(default_size=0, colors=['black', '#505050', '#a0a0a0', 'white']), elem_id="image_edit")
             with gr.Accordion(label="Edge", open=False):
               gradients = gr.Files(visible=False, value=['./gradient_large.png', './gradient.png', './gradient_small.png'])
               levels = gr.Number(label="Color levels", value=16, maximum=32, minimum=2, step=1)
               contour = gr.Number(label="Contour width", value=3, maximum=15, minimum=1, step=2)
               kernel = gr.Number(label="Average", value=7, maximum=16, minimum=0, step=1)
-              selector = gr.HTML(value="""<div id='select_cursor' style='width:1px;height:1px;position:absolute;border:8px dotted #ffffff;opacity:50%;'></div>
+              mouse = gr.Textbox(elem_id="mouse", value="""[]""", interactive=False)
+              mouse.input(fn=draw_mask, inputs=[gradients, levels, contour, kernel, mouse, output_mask], outputs=[output_mask])
+            selector = gr.HTML(value="""
             <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();}
-              
+            
             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);
@@ -492,12 +494,9 @@ 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-8 + \"px\";
-              document.getElementById(\"select_cursor\").style.top = e.clientY-8 + \"px\";
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointermove = function(e) {
-              if (document.getElementById(\"select_cursor\").style.borderColor != \"#ffffff\") {
+              if (document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].style.borderColor != \"#ffffff\") {
                 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);
 
@@ -513,24 +512,22 @@ 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-8 + \"px\";
-                document.getElementById(\"select_cursor\").style.top = e.clientY-8 + \"px\";
               }
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerdown = function(e) {
-              document.getElementById(\"select_cursor\").style.borderColor = \"#a0a0a0\";
+              
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].style.borderColor = \"#a0a0a0\";
+            
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerup = function(e) {
-              document.getElementById(\"select_cursor\").style.borderColor = \"#ffffff\";
-            }' title='Select polygon' style='text-decoration:none;color:white;'>⬚ Select polygon</a> <a href='#' id='clear_select' onclick='
+              
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].style.borderColor = \"#ffffff\";
+            
+            }' title='Select point' style='text-decoration:none;color:white;'>⬚ Select point</a> <a href='#' id='clear_select' onclick='
+              
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
-
-              document.getElementById(\"select_cursor\").style.left = 0;
-              document.getElementById(\"select_cursor\").style.top = 0;
+            
             ' title='Clear selection' style='text-decoration:none;color:white;'>[x] Clear selection</a>""")
-              mouse = gr.Textbox(elem_id="mouse", value="""[]""", interactive=False)
-              mouse.input(fn=draw_mask, inputs=[gradients, levels, contour, kernel, 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')