update layout

app.py

@@ -38,10 +38,13 @@ def get_caption(image_in):
     data = response["data"][-1]
     return data
 
-def Image_similarity_search(image_in):
-    #Get image caption from Bip2 Gradio space
-    img_caption = get_caption(image_in)
-    print(f"Image caption from Blip2 Gradio Space is - {img_caption}")
+def Image_similarity_search(image_in, search_query):
+    if search_query == '':
+        #Get image caption from Bip2 Gradio space
+        img_caption = get_caption(image_in)
+    else:
+        img_caption = search_query
+    print(f"Image caption from Blip2 Gradio Space or the search_query is - {img_caption}")
     #Searching the vector space
     search_result = search_index.similarity_search(img_caption)[0]
     #Formatting the search results 
@@ -55,22 +58,46 @@ def Image_similarity_search(image_in):
 with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
                         #label_results {padding-top: 5px; padding-bottom: 1px;}
                         """) as demo:
-  with gr.Column(scale=2):
+  with gr.Row():
+    gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
+        <div
+        style="
+            display: inline-flex;
+            align-items: center;
+            gap: 0.8rem;
+            font-size: 1.75rem;
+        "
+        >
+        <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 5px;">
+            Using Gradio Demos as API</h1><br></div>
+        <div><h4 style="font-weight: 500; margin-bottom: 7px; margin-top: 5px;">
+            Get BLIP2 captions from <a href="https://langchain.readthedocs.io/en/latest/" target="_blank">Niels space</a> via API call,<br> 
+            Use LangChain to create vector space with PlaygroundAI prompts</h4><br>
+        </div>
+        <p style="margin-bottom: 10px; font-size: 90%">
+        Do you see the "view api" link located in the footer of this application? 
+        By clicking on this link, a page will open which provides documentation on the REST API that developers can use to query the Interface function / Block events.<br>
+        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(scale=1):
     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')
     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")
+    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=2):
+  with gr.Column(scale=3):
     pass
   
-  image_in.change(Image_similarity_search, image_in, [pai_prompt, img_search] )
+  image_in.change(Image_similarity_search, [image_in, search_query], [pai_prompt, img_search], api_name="PlaygroundAI search" )
   #b1.click(Image_similarity_search, image_in, [pai_prompt, img_search] ) 
 
 demo.launch(debug=True)