update layout

app.py

@@ -57,6 +57,7 @@ def Image_similarity_search(image_in, search_query):
 #Defining Gradio Blocks
 with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
                         #label_results {padding-top: 5px; padding-bottom: 1px;}
+                        #col-container {max-width: 580px; margin-left: auto; margin-right: auto;}
                         """) as demo:
   with gr.Row():
     gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
@@ -82,9 +83,9 @@ with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
         Finally, a similarity search is performed over the vector space and the top result is returned.        
         <center><a href="https://huggingface.co/spaces/ysharma/Blip_PlaygroundAI?duplicate=true"><img src="https://bit.ly/3gLdBN6" alt="Duplicate Space"></a></center> 
         </p></div>""")
-  with gr.Column(scale=3):
-    pass
-  with gr.Column(scale=1):
+  #with gr.Column(scale=3):
+  #  pass
+  with gr.Column(elem_id = "col-container"):
     label_top = gr.HTML(value= "<center>🖼️Upload an Image for your search📷</center>", elem_id="label_top")
     image_in = gr.Image(label="Upoload an Image for search", type='filepath', elem_id="image_in")
     label_mid = gr.HTML(value= "<p style='text-align: center; color: red;'>Or</center></p>", elem_id='label_mid')
@@ -94,10 +95,11 @@ with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
     label_results = gr.HTML(value= "<p style='text-align: center; color: blue; font-weight: bold;'>Search results from PlaygroundAI</center></p>", elem_id="label_results")
     img_search = gr.HTML(label = 'Image search results from PlaygroundAI dataset', elem_id="img_search")
     pai_prompt = gr.Textbox(label="Image prompt from PlaygroundAI dataset", elem_id="pai_prompt")
-  with gr.Column(scale=3):
-    pass
+  #with gr.Column(scale=3):
+  #  pass
   
-  image_in.change(Image_similarity_search, [image_in, search_query], [pai_prompt, img_search], api_name="PlaygroundAI search" )
+  image_in.change(Image_similarity_search, [image_in, search_query], [pai_prompt, img_search], api_name="PlaygroundAI_image_search" )
+  search_query.submit(Image_similarity_search, image_in, [pai_prompt, img_search], api_name='PlaygroundAI_text_search' )
   #b1.click(Image_similarity_search, image_in, [pai_prompt, img_search] ) 
 
 demo.launch(debug=True)