update style

app.py

@@ -36,13 +36,20 @@ def run(sketch, caption, threshold, seed):
     colors = plt.get_cmap("tab10").colors
     classes_colors = colors[3:len(classes) + 3]
 
-    sketch2 = sketch['composite']    
-    # sketch2 = sketch2[:, :, 1:4]
+    sketch2 = sketch['composite']   
+
+    # when the drawing tool is used
+    if sketch2[:,:,0:3].sum() == 0:
+        temp = sketch2[:,:,3]
+        # invert it
+        temp = 255 - temp
+        sketch2 = np.repeat(temp[:, :, np.newaxis], 3, axis=2)  
+        temp2= np.full_like(temp, 255)
+        sketch2 = np.dstack((sketch2, temp2))
+    
     sketch2 = np.array(sketch2)
-
     pil_img = Image.fromarray(sketch2).convert('RGB')
     sketch_tensor = preprocess(pil_img).unsqueeze(0).to(device)
-
     # torchvision.utils.save_image(sketch_tensor, 'sketch_tensor.png') 
     
     with torch.no_grad():
@@ -317,12 +324,12 @@ input[type=number][disabled] {
 
 
 with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
-    gr.HTML("<h1 class='black-text'>Open Vocabulary Scene Sketch Semantic Understanding</div>")
-    # gr.HTML("<div class='black-text'></div>")
+    gr.HTML("<h1 class='black-text' style='text-align: center;'>Open Vocabulary Scene Sketch Semantic Understanding</div>")
     gr.HTML("<div class='black-text'></div>")
-    gr.HTML("<div class='black-text'>Ahmed Bourouis, Judith Ellen Fan, Yulia Gryaditskaya</div>")
-    gr.HTML("<div class='black-text'>CVPR, 2024</p>")
-    gr.HTML("<a >Project page</p>")
+    # gr.HTML("<div class='black-text' style='text-align: center;'><a href='https://ahmedbourouis.github.io/ahmed-bourouis/'>Ahmed Bourouis</a>,<a href='https://profiles.stanford.edu/judith-fan'>Judith Ellen Fan</a>, <a href='https://yulia.gryaditskaya.com/'>Yulia Gryaditskaya</a></div>")
+    gr.HTML("<div class='black-text' style='text-align: center;'>Ahmed Bourouis,Judith Ellen Fan, Yulia Gryaditskaya</div>")
+    gr.HTML("<div class='black-text' style='text-align: center;' >CVPR, 2024</p>")
+    gr.HTML("<div style='text-align: center;'><p><a href='https://ahmedbourouis.github.io/Scene_Sketch_Segmentation/'>Project page</a></p></div>")
 
 
     # gr.Markdown(   "Scene Sketch Semantic Segmentation.", elem_classes=["black-txt" , "h1"] )
@@ -335,7 +342,7 @@ with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
         with gr.Column():
             # in_image = gr.Image( label="Sketch", type="pil", sources="upload" , height=512 )
             in_canvas_image = gr.Sketchpad(  brush=gr.Brush(colors=["#000000"], color_mode="fixed" , default_size=2), 
-                elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ] ,  
+                image_mode="RGBA",elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ] ,  
                 label="Sketch" , canvas_size=(512,512) , sources=['upload'], 
                 interactive=True , layers= False, transforms=[] )
             query_selector = 'button[aria-label="Upload button"]'
@@ -349,19 +356,23 @@ with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
                     <button class="sm black-text white-bg gray-border border-radius own-shadow svelte-cmf5ev bold" id="draw_btn" onclick="return document.querySelector('.controls-wrap button:nth-child(3)').click()"> Draw a new sketch</button>
                 </div>
                 """)
-            in_textbox = gr.Textbox( lines=3 , elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ]  ,label="Caption your Sketch!", placeholder="Include the categories that you want the AI to segment. \n e.g. 'giraffe, clouds' or 'a boy flying a kite' ")
+            in_textbox = gr.Textbox( lines=2, elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ]  ,label="Caption your Sketch!", placeholder="Include the categories that you want the AI to segment. \n e.g. 'giraffe, clouds' or 'a boy flying a kite' ")
 
         with gr.Column():
-            out_image = gr.Image(elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ]  , 
+            out_image = gr.Image( value=Image.new('RGB', (512, 512), color=(255, 255, 255)),
+                elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ]  , 
                                  type="pil", label="Segmented Sketch" ) #, height=512, width=512)
+            
+            # gr.HTML("<h3 class='black-text'> <span class='black-text underline'>Confidence:</span> Adjust AI agent confidence in guessing categories </div>")
             in_slider = gr.Slider(elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" ]  ,
-                                    label="Confidence: Adjust AI agent confidence in guessing categories", 
-                                    value=0.6 , interactive=True,  step=0.05, minimum=0, maximum=1)
+                                  info="Adjust AI agent confidence in guessing categories",
+                                    label="Confidence:",
+                                    value=0.5 , interactive=True,  step=0.05, minimum=0, maximum=1)
 
     with gr.Row():
-        segment_btn = gr.Button(   'Segment it !' , elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" , 'bold' , 'mt-mb-1' ] , size="sm")
+        segment_btn = gr.Button( 'Segment it !' , elem_classes=["white-bg", "gray-border" , "border-radius" ,"own-shadow" , 'bold' , 'mt-mb-1' ] , size="sm")
         segment_btn.click(fn=run, inputs=[in_canvas_image , in_textbox , in_slider  ], outputs=[out_image])
-    gallery_label = gr.HTML("<h3 class='black-text'> <span class='black-text underline'>Gallery :</span> you can drag and drop any of the example sketches below into the sketch field above </div>")
+    gallery_label = gr.HTML("<h3 class='black-text'> <span class='black-text underline'>Gallery:</span> <span style='color: grey;'>you can click on any of the example sketches below</span> </div>")
 
     gallery= gr.HTML(f"""
         <div>
@@ -389,6 +400,7 @@ with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
     """)
 
     examples = gr.Examples(
+        examples_per_page=30,
         examples=[
         ['demo/sketch_1.png', 'giraffe looking at you', 0.6],
         ['demo/sketch_2.png', 'tree on the right', 0.6],