update gallery code

app.py

@@ -20,6 +20,12 @@ hf = HuggingFaceEmbeddings(model_name=model_name)
 #PlaygrondAI open-sourced dataset is a collection of around 1.3 mil generated images and caption pairs
 with open("search_index0.pickle", "rb") as f:
     search_index = pickle.load(f)
+with open("search_index1.pickle", "rb") as f:
+    search_index1 = pickle.load(f)
+with open("search_index2.pickle", "rb") as f:
+    search_index2 = pickle.load(f)
+with open("search_index3.pickle", "rb") as f:
+    search_index3 = pickle.load(f)
 
 #Defining methods for inference
 def encode(img):
@@ -45,14 +51,36 @@ def Image_similarity_search(image_in, search_query):
     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]
+    search_result1 = search_index1.similarity_search(img_caption)[0]
+    search_result2 = search_index2.similarity_search(img_caption)[0]
+    search_result3 = search_index3.similarity_search(img_caption)[0]
+
     #Formatting the search results 
     pai_prompt = list(search_result)[0][1]
+    pai_prompt1 = list(search_result1)[0][1]
+    pai_prompt2 = list(search_result2)[0][1]
+    pai_prompt3 = list(search_result3)[0][1]
     pai_img_link = list(search_result)[-2][-1]['source']
+    pai_img_link1 = list(search_result1)[-2][-1]['source']
+    pai_img_link2 = list(search_result2)[-2][-1]['source']
+    pai_img_link3 = list(search_result3)[-2][-1]['source']
+    
     #formatting html output for displaying image
-    html_tag = "<img src='"+pai_img_link+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>"
-    return pai_prompt, html_tag 
+    #html_tag = "<img src='"+pai_img_link+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>"
+    #html_tag1 = "<img src='"+pai_img_link1+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>"
+    #html_tag2 = "<img src='"+pai_img_link2+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>"
+    #html_tag3 = "<img src='"+pai_img_link3+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>"
+    html_tag = """<div class='gallery'>
+                <img src='"+pai_img_link+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>
+                <img src='"+pai_img_link1+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>
+                <img src='"+pai_img_link2+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>
+                <img src='"+pai_img_link3+"' alt='"+img_caption+"' height='512' style='display: block; margin: auto;'>
+                </div>"""
+    
+    return pai_prompt, html_tag #[pai_prompt, pai_prompt1, pai_prompt2, pai_prompt3], [html_tag, html_tag1, html_tag2, html_tag3] 
 
 
 #Defining Gradio Blocks
@@ -60,6 +88,8 @@ 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;}
+                        #img_search.gallery {display: flex; flex-wrap: wrap; justify-content: center;}
+                        #img_search.gallery img {margin: 10px; max-width: 300px; max-height: 300px;}
                         """) as demo:
   gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
         <div
@@ -95,7 +125,6 @@ with gr.Blocks(css = """#label_mid {padding-top: 2px; padding-bottom: 2px;}
     search_query = gr.Textbox(placeholder="Example: A small cat sitting", label="", elem_id="search_query", value='')
     label_results = gr.HTML(value= "<p style='text-align: center; color: blue; font-weight: bold;'>👇These Search results are from PlaygroundAI 'Liked_Images' dataset available on <a href='https://github.com/playgroundai/liked_images' _target='blank'>github</a></center></p>", elem_id="label_results")
     img_search = gr.HTML(label = 'Image search results from PlaygroundAI dataset', elem_id="img_search")
-  #with gr.Row():
     pai_prompt = gr.Textbox(label="Image prompt from PlaygroundAI dataset", elem_id="pai_prompt")
     #b1 = gr.Button("Retry").style(full_width=False)