update layout with acordion

app.py

@@ -58,8 +58,9 @@ def Image_similarity_search(image_in, search_query):
 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;}
+                        #accordion {max-width: 580px; margin-left: auto; margin-right: auto;}
                         """) as demo:
-  with gr.Row():
+  with gr.Accordion(label="Details about the working of the App", open=False, elem_id='accordion'):
     gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
         <div
         style="
@@ -81,22 +82,22 @@ with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
         In this demo, the first step involves making an API call to the BLIP2 Gradio demo to retrieve image captions. 
         Next, Langchain is used to create an embedding and vector space for the image prompts and their respective "source" from the PlaygroundAI dataset.
         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(elem_id = "col-container"):
-    label_top = gr.HTML(value= "<center>🖼️Upload an Image for your search📷</center>", elem_id="label_top")
+    label_top = gr.HTML(value= "<center>🖼️ Please upload an Image here 👇 that will be used as your search query</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')
-    label_bottom = gr.HTML(value= "<center>🔍Type in your serch query and press Enter</center>", elem_id="label_bottom")
+    label_bottom = gr.HTML(value= "<center>🔍Type in your serch query and press Enter 👇</center>", elem_id="label_bottom")
     search_query = gr.Textbox(placeholder="Example: A small cat sitting", label="", elem_id="search_query", value='')
     #b1 = gr.Button("Search").style(full_width=False)
     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
+    
+    gr.HTML('''<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>'''))
   
   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' )