Update app.py

app.py

@@ -45,7 +45,11 @@ examples = [
 ]
 
 # Construir interfaz
-with gr.Blocks(theme=gr.themes.Soft(), css=".example-image {margin: auto; display: block}") as app:
+with gr.Blocks(theme=gr.themes.Soft(), css="""
+    .examples-grid {display: flex !important; flex-direction: column; gap: 1rem}
+    .examples-row {display: flex !important; gap: 1rem; justify-content: center}
+    """) as app:
+    
     gr.Markdown("# 📷 Clasificador CIFAR-10")
     
     with gr.Row():
@@ -67,31 +71,31 @@ with gr.Blocks(theme=gr.themes.Soft(), css=".example-image {margin: auto; displa
                 show_label=True
             )
     
-    # Sección de ejemplos en 2 filas de 5 columnas
+    # Sección de ejemplos con interacción
     gr.Markdown("## Ejemplos de categorías")
-    with gr.Column():
+    with gr.Column(elem_classes=["examples-grid"]):
         # Primera fila
-        with gr.Row():
-            for i in range(5):
-                with gr.Column(min_width=150):
-                    gr.Image(
-                        examples[i][0],
-                        label=cifar10_labels[i].capitalize(),
-                        height=120,
-                        width=120,
-                        elem_classes=["example-image"]
-                    )
+        with gr.Row(elem_classes=["examples-row"]):
+            for example, label in zip(examples[:5], cifar10_labels[:5]):
+                gr.Examples(
+                    examples=example,
+                    inputs=[input_image],
+                    label=label.capitalize(),
+                    examples_per_page=1,
+                    fn=predict,
+                    outputs=[output_label],
+                )
         # Segunda fila
-        with gr.Row():
-            for i in range(5, 10):
-                with gr.Column(min_width=150):
-                    gr.Image(
-                        examples[i][0],
-                        label=cifar10_labels[i].capitalize(),
-                        height=120,
-                        width=120,
-                        elem_classes=["example-image"]
-                    )
+        with gr.Row(elem_classes=["examples-row"]):
+            for example, label in zip(examples[5:], cifar10_labels[5:]):
+                gr.Examples(
+                    examples=example,
+                    inputs=[input_image],
+                    label=label.capitalize(),
+                    examples_per_page=1,
+                    fn=predict,
+                    outputs=[output_label],
+                )
 
     # Conectar eventos
     submit_btn.click(