update interface

app.py

@@ -243,11 +243,11 @@ tr:hover {
     background: #f7f9f8 !important;
 }
 
-#component-17{
+#component-19{
     justify-content: center !important;
 }
 
-#component-17 > button {
+#component-19 > button {
     flex: none !important;
     background-color : black !important;
         font-weight: bold !important;
@@ -346,23 +346,34 @@ with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
                 label="Sketch" , canvas_size=(512,512) , sources=['upload'], 
                 interactive=True , layers= False, transforms=[] )
             query_selector = 'button[aria-label="Upload button"]'
-
-            with gr.Row():
+            # with gr.Row():
 
                 # segment_btn.click(fn=run, inputs=[in_image, in_textbox, in_slider], outputs=[out_image])
-                upload_draw_btn = gr.HTML(f"""
+            upload_draw_btn = gr.HTML(f"""
                 <div id="upload_draw_group" class="svelte-15lo0d8 stretch">
                     <button class="sm black-text white-bg gray-border  border-radius own-shadow svelte-cmf5ev bold" id="upload_btn" onclick="return document.querySelector('.source-wrap button').click()"> Upload a new sketch</button>
                     <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=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' ")
+            
+            # 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( 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" ]  ,
+            #                       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():
+        with gr.Column():
+            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():   
             # 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" ]  ,
                                   info="Adjust AI agent confidence in guessing categories",
@@ -372,7 +383,7 @@ with gr.Blocks(js=scripts, css=css, theme='gstaff/xkcd') as demo:
     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.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> <span style='color: grey;'>you can click on any of the example sketches below</span> </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 to start segmenting them (or even drawing over them)</span> </div>")
 
     gallery= gr.HTML(f"""
         <div>