Update app.py

app.py

@@ -37,46 +37,117 @@ def set_and_generate(url):
     return url, generated_paragraph
 
 
-with gr.Blocks() as demo:
+# Create the Gradio Blocks interface
+
+with gr.Blocks(css=".thumbnail {width: 150px !important; height: 150px !important; object-fit: cover;}") as demo:
 
     gr.Markdown(title)
+
     gr.Markdown(description)
 
 
+
     with gr.Row():
 
         with gr.Column():
 
             image_url_input = gr.Textbox(label="Image URL")
+
             generate_button = gr.Button("Generate Paragraph")
 
-            example_1 = gr.Image(value="https://www.animalspot.net/wp-content/uploads/2020/01/Types-of-Falcons.jpg", label="Types of Falcons", interactive=True, shape=(150, 150))
-            example_2 = gr.Image(value="https://www.leaders-mena.com/leaders/uploads/2023/01/The-Traditional-Camel-Racing-In-Saudi-Arabia-Unique-Sport-Activity-1024x576.jpg", label="Camel Racing - Saudi Arabia", interactive=True, shape=(150, 150))
-            example_3 = gr.Image(value="http://embed.robertharding.com/embed/1161-4342.jpg", label="Urban Street Scene - India", interactive=True, shape=(150, 150))
 
 
+            example_1 = gr.Button("Types of Falcons", elem_id="example_1")
+
+            example_2 = gr.Button("Camel Racing - Saudi Arabia", elem_id="example_2")
+
+            example_3 = gr.Button("Urban Street Scene - India", elem_id="example_3")
+
+
+
+            # Attach CSS classes for making them look like thumbnails
+
+            demo.load(lambda: None, every=2, target=example_1, inputs=(), outputs=[], ajax=False)
+
+            demo.load(lambda: None, every=2, target=example_2, inputs=(), outputs=[], ajax=False)
+
+            demo.load(lambda: None, every=2, target=example_3, inputs=(), outputs=[], ajax=False)
+
+        
+
         with gr.Column():
+
             generated_paragraph_output = gr.Textbox(label="Generated Paragraph")
 
+
+
+    # Wire click events
+
     generate_button.click(generate_paragraph, inputs=image_url_input, outputs=generated_paragraph_output)
 
-    
+
 
     example_1.click(
+
         lambda: set_and_generate("https://www.animalspot.net/wp-content/uploads/2020/01/Types-of-Falcons.jpg"), 
+
         outputs=[image_url_input, generated_paragraph_output]
+
     )
 
     example_2.click(
+
         lambda: set_and_generate("https://www.leaders-mena.com/leaders/uploads/2023/01/The-Traditional-Camel-Racing-In-Saudi-Arabia-Unique-Sport-Activity-1024x576.jpg"), 
+
         outputs=[image_url_input, generated_paragraph_output]
+
     )
 
     example_3.click(
+
         lambda: set_and_generate("http://embed.robertharding.com/embed/1161-4342.jpg"), 
+
         outputs=[image_url_input, generated_paragraph_output]
+
     )
 
+# Configure the CSS for thumbnails
+
+demo.css += """
+
+#example_1 {
+
+    background: url("https://www.animalspot.net/wp-content/uploads/2020/01/Types-of-Falcons.jpg");
+
+    background-size: cover;
+
+    height: 150px;
+
+}
+
+
+
+#example_2 {
+
+    background: url("https://www.leaders-mena.com/leaders/uploads/2023/01/The-Traditional-Camel-Racing-In-Saudi-Arabia-Unique-Sport-Activity-1024x576.jpg");
+
+    background-size: cover;
+
+    height: 150px;
+
+}
+
+
+
+#example_3 {
+
+    background: url("http://embed.robertharding.com/embed/1161-4342.jpg");
+
+    background-size: cover;
+
+    height: 150px;
+
+}
 
 # Launch the Gradio interface
 demo.launch()