Update app.py

app.py

@@ -45,7 +45,7 @@ translations = {
         "low_confidence": "Low confidence prediction. Results may not be accurate.",
         "not_a_bird": "The image may not contain a bird. Please upload a clear image of a bird.",
         "other_message": "This image is not in our trained dataset or the image may not be of a bird. Please try uploading a different image.",
-        "example_images": "Example Images - Click on any image to use it"
+        "examples_title": "Examples"
     },
     "sw": {
         "app_title": "Mtafiti wa Ndege: Utambuzi wa Kiotomatiki kwa Watafiti",
@@ -69,7 +69,7 @@ translations = {
         "low_confidence": "Utabiri wa uhakika mdogo. Matokeo yanaweza kuwa si sahihi.",
         "not_a_bird": "Picha inaweza isiwe ya ndege. Tafadhali pakia picha wazi ya ndege.",
         "other_message": "Ndege huyu haipatikani katika hifadhidata yetu au picha inaweza isiwe ya ndege. Tafadhali jaribu kupakia picha nyingine.",
-        "example_images": "Mifano ya Picha - Bofya picha yoyote kutumia"
+        "examples_title": "Mifano"
     }
 }
 
@@ -606,32 +606,38 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     with gr.Row():
         with gr.Column(scale=1):
             input_image = gr.Image(type="pil", label=translations['en']['upload_label'])
-            
-            # Example images section with actual image display
-            example_header = gr.Markdown(f"### {translations['en']['example_images']}")
-            
-            # Create example images gallery
-            available_examples = get_available_examples()
-            if available_examples:
-                example_images = gr.Gallery(
-                    value=[(example["path"], example["name"]) for example in available_examples],
-                    label="Click any image to use it",
-                    show_label=False,
-                    elem_id="example-gallery",
-                    columns=2,
-                    rows=2,
-                    height="auto",
-                    allow_preview=False
-                )
-            else:
-                example_images = gr.Markdown("*No example images available*")
-            
             submit_btn = gr.Button(translations['en']['identify_button'], variant="primary")
         
         with gr.Column(scale=2):
             prediction_output = gr.Label(label=translations['en']['predictions_label'], num_top_classes=5)
             bird_info_output = gr.HTML(label=translations['en']['bird_info_label'])
     
+    # Examples section - horizontal layout below main content
+    examples_header = gr.Markdown(f"### {translations['en']['examples_title']}")
+    
+    # Create horizontal row of example images
+    available_examples = get_available_examples()
+    if available_examples:
+        with gr.Row():
+            example_buttons = []
+            for example in available_examples:
+                with gr.Column(scale=1):
+                    example_image = gr.Image(
+                        value=example["path"],
+                        label=example["name"],
+                        show_label=True,
+                        interactive=False,
+                        height=150
+                    )
+                    example_btn = gr.Button(
+                        f"Use {example['name']}", 
+                        size="sm",
+                        variant="secondary"
+                    )
+                    example_buttons.append((example_btn, example["path"]))
+    else:
+        gr.Markdown("*No example images available*")
+    
     # Clear divider
     gr.Markdown("---")
     
@@ -685,10 +691,10 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
             f"# {t['app_title']}", 
             f"{t['app_description']}", 
             t['upload_label'],
-            f"### {t['example_images']}",
             t['identify_button'],
             t['predictions_label'],
             t['bird_info_label'],
+            f"### {t['examples_title']}",
             f"## {t['research_questions']}",
             t['question_label'],
             t['question_placeholder'],
@@ -696,14 +702,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
             t['clear_conversation']
         )
     
-    def handle_example_select(evt: gr.SelectData):
-        """Handle selection of example images"""
-        if evt.index is not None:
-            available_examples = get_available_examples()
-            if evt.index < len(available_examples):
-                selected_example = available_examples[evt.index]
-                return load_example_image(selected_example["path"])
-        return None
+    def use_example_image(image_path):
+        """Load and return example image"""
+        return load_example_image(image_path)
     
     # Set up event handlers
     language_selector.change(
@@ -714,10 +715,10 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
             title_md,
             description_md,
             input_image,
-            example_header,
             submit_btn,
             prediction_output,
             bird_info_output,
+            examples_header,
             questions_header,
             follow_up_input,
             follow_up_input,
@@ -726,12 +727,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
         ]
     )
     
-    # Handle example image selection
+    # Set up example button event handlers
     if available_examples:
-        example_images.select(
-            handle_example_select,
-            outputs=[input_image]
-        )
+        for example_btn, image_path in example_buttons:
+            example_btn.click(
+                use_example_image,
+                inputs=[gr.State(image_path)],
+                outputs=[input_image]
+            )
     
     # Add loading state for better UX
     submit_btn.click(