Update app.py

app.py

@@ -102,7 +102,20 @@ class GalleryUI:
             
     def create_interface(self) -> gr.Blocks:
         """Create the Gradio interface."""
-        with gr.Blocks(css=self.load_css(), theme=gr.themes.Soft(text_size='lg')) as demo:
+        custom_theme = gr.themes.Soft(
+            text_size='lg',
+            primary_hue="purple",
+            secondary_hue="gray",
+            font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+            font_mono=["IBM Plex Mono", "monospace"]
+        ).set(
+            button_primary_background_fill="*primary_300",
+            button_primary_background_fill_hover="*primary_200",
+            block_shadow="*shadow_drop_lg",
+            block_border_width="2px"
+        )
+        # with gr.Blocks(css=self.load_css(), theme=gr.themes.Soft(text_size='lg')) as demo:
+        with gr.Blocks(css=self.load_css(), theme=custom_theme) as demo:
             with gr.Column(elem_classes="container"):
                 self._create_header()
                 self._create_search_section()
@@ -116,23 +129,29 @@ class GalleryUI:
         with gr.Column(elem_classes="header"):
             gr.Markdown("# Gallery Search")
             gr.Markdown("Search through your collection of photos with AI")
+            gr.Markdown("`in this demo, you are searching COCO dataset images`")
+
     
     def _create_search_section(self) -> None:
         """Create the search interface section."""
         with gr.Column():
             self.query_text = gr.Textbox(
-                placeholder="Example: Riding my horse",
+                placeholder="Example: Riding my horse [Enter]",
                 label="Search Query",
                 elem_classes="search-input",
                 autofocus=True,
                 container=False,
                 interactive=True
             )
-                
+            
+        with gr.Column(elem_classes="gallery"):
+        
             self.gallery = gr.Gallery(
                 label="Search Results",
-                columns=[4],
-                height=600,
+                columns=6,
+                # min_height=800,
+                # rows=3,
+                # height=800,
                 object_fit="cover",
                 elem_classes="gallery",
                 container=False,
@@ -156,7 +175,6 @@ class GalleryUI:
         )
 
 
-
 search_engine = ImageSearchEngine(
         model_name = "sentence-transformers/all-MiniLM-L6-v2",
         output_dim = 64,