Update app.py

app.py

@@ -36,10 +36,9 @@ def set_and_generate(url):
     generated_paragraph = generate_paragraph(url)
     return url, generated_paragraph
 
-
 # Create the Gradio Blocks interface
 
-with gr.Blocks(css=".thumbnail {width: 150px !important; height: 150px !important; object-fit: cover;}") as demo:
+with gr.Blocks(css=".thumbnail { width: 150px; height: 150px; object-fit: cover; }") as demo:
 
     gr.Markdown(title)
 
@@ -52,45 +51,31 @@ with gr.Blocks(css=".thumbnail {width: 150px !important; height: 150px !importan
         with gr.Column():
 
             image_url_input = gr.Textbox(label="Image URL")
-
             generate_button = gr.Button("Generate Paragraph")
 
 
 
-            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)
+            # Image thumbnails acting as buttons
 
-            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)
+            example_1 = gr.Button(" ", elem_id="example_1", label=None)
+            example_2 = gr.Button(" ", elem_id="example_2", label=None)
+            example_3 = gr.Button(" ", elem_id="example_3", label=None)
 
         
 
         with gr.Column():
 
-            generated_paragraph_output = gr.Textbox(label="Generated Paragraph")
+            generated_paragraph_output = gr.Textbox(label="🦅Falcon Vision👁️")
 
 
 
     # 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]
 
     )
@@ -98,7 +83,6 @@ with gr.Blocks(css=".thumbnail {width: 150px !important; height: 150px !importan
     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]
 
     )
@@ -106,52 +90,41 @@ with gr.Blocks(css=".thumbnail {width: 150px !important; height: 150px !importan
     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: url("https://www.animalspot.net/wp-content/uploads/2020/01/Types-of-Falcons.jpg") no-repeat center center;
     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: url("https://www.leaders-mena.com/leaders/uploads/2023/01/The-Traditional-Camel-Racing-In-Saudi-Arabia-Unique-Sport-Activity-1024x576.jpg") no-repeat center center;
     background-size: cover;
 
-    height: 150px;
-
 }
 
-
-
 #example_3 {
 
-    background: url("http://embed.robertharding.com/embed/1161-4342.jpg");
-
+    background: url("http://embed.robertharding.com/embed/1161-4342.jpg") no-repeat center center;
     background-size: cover;
-
-    height: 150px;
-
 }
 
+"""
 
 
-
-"""
 # Launch the Gradio interface
+
 demo.launch()