Update app.py

app.py

@@ -432,9 +432,16 @@ css = """
         border-color: var(--primary-color);
     }
     
-    .example-image.selected {
+    .example-thumb {
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+    
+    .example-thumb:hover {
         border-color: var(--primary-color);
-        box-shadow: 0 0 5px var(--primary-color);
+        transform: translateY(-2px);
     }
     """
 
@@ -478,20 +485,16 @@ with gr.Blocks(theme="bethecloud/storj_theme", css=css) as demo:
                 value=example_images[0] if example_images else None  # Set default image to in1.jpg
             )
             
-            # Example images section
+            # Example images section with buttons instead of images with style
             with gr.Row(elem_classes="example-images"):
+                # Create example buttons
+                example_buttons = []
                 for i in range(len(example_images)):
                     if example_images[i]:
-                        example_btn = gr.Image(
-                            value=example_images[i],
-                            show_label=False,
-                            interactive=False,
-                            height=90,
-                            width=120,
-                            elem_classes=f"example-image {'selected' if i == 0 else ''}"
-                        ).style(height=90, width=120)
-                        # Add click event for each example image
-                        example_btn.click(
+                        btn = gr.Button(f"Example {i+1}", elem_classes="example-thumb")
+                        example_buttons.append(btn)
+                        # Add click event for each example button
+                        btn.click(
                             fn=lambda idx=i: select_example(idx), 
                             outputs=image
                         )