Use Gradio Examples component with image thumbnails

- Replace button-based examples with gr.Examples
- Show image thumbnails for each example
- Click to load image and prompt into chatbot

app.py

@@ -454,72 +454,40 @@ def _launch_demo(args, model, processor):
                     regen_btn = gr.Button('Regenerate')
                     empty_bin = gr.Button('Clear')
             
-            # Examples section
-            gr.Markdown("### Quick Examples - Click to load")
-
-            with gr.Row():
-                example_1_btn = gr.Button("Text Detection")
-                example_2_btn = gr.Button("Document Parsing")
-                example_3_btn = gr.Button("Info Extraction")
-                example_4_btn = gr.Button("Visual Q&A")
-                example_5_btn = gr.Button("Translation")
-        
-        task_history = gr.State([])
-        
-        
-        # Example 1: Text Detection
-        def load_example_1(history, task_hist):
-            prompt = "Detect and recognize all text in this image. Output the text with bounding box coordinates."
-            image_path = EXAMPLE_IMAGES["spotting"]
-            history = [((image_path,), None)]
-            task_hist = [((image_path,), None)]
-            return history, task_hist, prompt
-
-        # Example 2: Document Parsing
-        def load_example_2(history, task_hist):
-            prompt = "Extract all text from this document in markdown format. Use HTML for tables and LaTeX for equations. Parse in reading order."
-            image_path = EXAMPLE_IMAGES["parsing"]
-            history = [((image_path,), None)]
-            task_hist = [((image_path,), None)]
-            return history, task_hist, prompt
-
-        # Example 3: Information Extraction
-        def load_example_3(history, task_hist):
-            prompt = "Extract the following fields from this receipt and return as JSON: ['total', 'subtotal', 'tax', 'date', 'items']"
-            image_path = EXAMPLE_IMAGES["ie"]
-            history = [((image_path,), None)]
-            task_hist = [((image_path,), None)]
-            return history, task_hist, prompt
-
-        # Example 4: Visual Q&A
-        def load_example_4(history, task_hist):
-            prompt = "Look at this chart and answer: Which quarter had the highest revenue? What was the Sales value in Q4?"
-            image_path = EXAMPLE_IMAGES["vqa"]
-            history = [((image_path,), None)]
-            task_hist = [((image_path,), None)]
-            return history, task_hist, prompt
-
-        # Example 5: Translation
-        def load_example_5(history, task_hist):
-            prompt = "Translate all text in this image to English."
-            image_path = EXAMPLE_IMAGES["translation"]
-            history = [((image_path,), None)]
-            task_hist = [((image_path,), None)]
-            return history, task_hist, prompt
-        
-        # Bind events
-        example_1_btn.click(load_example_1, [chatbot, task_history], [chatbot, task_history, query])
-        example_2_btn.click(load_example_2, [chatbot, task_history], [chatbot, task_history, query])
-        example_3_btn.click(load_example_3, [chatbot, task_history], [chatbot, task_history, query])
-        example_4_btn.click(load_example_4, [chatbot, task_history], [chatbot, task_history, query])
-        example_5_btn.click(load_example_5, [chatbot, task_history], [chatbot, task_history, query])
-        
-        submit_btn.click(add_text, [chatbot, task_history, query],
-                         [chatbot, task_history]).then(predict, [chatbot, task_history], [chatbot], show_progress=True)
-        submit_btn.click(reset_user_input, [], [query])
-        empty_bin.click(reset_state, [chatbot, task_history], [chatbot], show_progress=True)
-        regen_btn.click(regenerate, [chatbot, task_history], [chatbot], show_progress=True)
-        addfile_btn.upload(add_file, [chatbot, task_history, addfile_btn], [chatbot, task_history], show_progress=True)
+            # Examples section with image thumbnails
+            gr.Markdown("### Examples - Click to load")
+
+            # Hidden image input for examples
+            example_image = gr.Image(type="filepath", visible=False)
+
+            def load_example(image_path, prompt):
+                """Load example into chatbot"""
+                history = [((image_path,), None)]
+                return history, history, prompt
+
+            gr.Examples(
+                examples=[
+                    [EXAMPLE_IMAGES["spotting"], "Detect and recognize all text in this image. Output the text with bounding box coordinates."],
+                    [EXAMPLE_IMAGES["parsing"], "Extract all text from this document in markdown format. Use HTML for tables and LaTeX for equations."],
+                    [EXAMPLE_IMAGES["ie"], "Extract the following fields from this receipt and return as JSON: ['total', 'subtotal', 'tax', 'date', 'items']"],
+                    [EXAMPLE_IMAGES["vqa"], "Look at this chart and answer: Which quarter had the highest revenue? What was the Sales value in Q4?"],
+                    [EXAMPLE_IMAGES["translation"], "Translate all text in this image to English."],
+                ],
+                inputs=[example_image, query],
+                outputs=[chatbot, task_history, query],
+                fn=load_example,
+                cache_examples=False,
+                examples_per_page=5,
+            )
+
+            task_history = gr.State([])
+
+            submit_btn.click(add_text, [chatbot, task_history, query],
+                             [chatbot, task_history]).then(predict, [chatbot, task_history], [chatbot], show_progress=True)
+            submit_btn.click(reset_user_input, [], [query])
+            empty_bin.click(reset_state, [chatbot, task_history], [chatbot], show_progress=True)
+            regen_btn.click(regenerate, [chatbot, task_history], [chatbot], show_progress=True)
+            addfile_btn.upload(add_file, [chatbot, task_history, addfile_btn], [chatbot, task_history], show_progress=True)
 
         # Feature descriptions
         with gr.Row():