Update app.py

app.py

@@ -257,17 +257,76 @@ def update_image(image_url):
     else:
         return None
 
+
+images = [
+    {"id": "rId101", "path": "images/rId101.png", "description": "Descripción 1"},
+    {"id": "rId105", "path": "images/rId105.png", "description": "Descripción 2"},
+    {"id": "rId109", "path": "images/rId109.png", "description": "Descripción 3"},
+    {"id": "rId113", "path": "images/rId113.png", "description": "Descripción 4"},
+    {"id": "rId117", "path": "images/rId117.png", "description": "Descripción 5"},
+    {"id": "rId121", "path": "images/rId121.png", "description": "Descripción 6"},
+    {"id": "rId125", "path": "images/rId125.png", "description": "Descripción 7"},
+    {"id": "rId129", "path": "images/rId129.png", "description": "Descripción 8"},
+    {"id": "rId133", "path": "images/rId133.png", "description": "Descripción 9"},
+    {"id": "rId136", "path": "images/rId136.png", "description": "Descripción 10"},
+    {"id": "rId139", "path": "images/rId139.png", "description": "Descripción 11"},
+    {"id": "rId142", "path": "images/rId142.png", "description": "Descripción 12"},
+    {"id": "rId145", "path": "images/rId145.png", "description": "Descripción 13"},
+    {"id": "rId149", "path": "images/rId149.png", "description": "Descripción 14"},
+    {"id": "rId153", "path": "images/rId153.png", "description": "Descripción 15"},
+    {"id": "rId157", "path": "images/rId157.png", "description": "Descripción 16"},
+    {"id": "rId161", "path": "images/rId161.png", "description": "Descripción 17"},
+    {"id": "rId165", "path": "images/rId165.png", "description": "Descripción 18"},
+    {"id": "rId169", "path": "images/rId169.png", "description": "Descripción 19"},
+    {"id": "rId173", "path": "images/rId173.png", "description": "Descripción 20"},
+    {"id": "rId177", "path": "images/rId177.png", "description": "Descripción 21"},
+    {"id": "rId180", "path": "images/rId180.png", "description": "Descripción 22"},
+    {"id": "rId184", "path": "images/rId184.png", "description": "Descripción 23"},
+    {"id": "rId187", "path": "images/rId187.png", "description": "Descripción 24"},
+    {"id": "rId192", "path": "images/rId192.png", "description": "Descripción 25"},
+    {"id": "rId195", "path": "images/rId195.png", "description": "Descripción 26"},
+    {"id": "rId40", "path": "images/rId40.png", "description": "Descripción 27"},
+    {"id": "rId44", "path": "images/rId44.png", "description": "Descripción 28"},
+    {"id": "rId47", "path": "images/rId47.png", "description": "Descripción 29"},
+    {"id": "rId50", "path": "images/rId50.png", "description": "Descripción 30"},
+    {"id": "rId53", "path": "images/rId53.png", "description": "Descripción 31"},
+    {"id": "rId56", "path": "images/rId56.png", "description": "Descripción 32"},
+    {"id": "rId59", "path": "images/rId59.png", "description": "Descripción 33"},
+    {"id": "rId63", "path": "images/rId63.png", "description": "Descripción 34"},
+    {"id": "rId66", "path": "images/rId66.png", "description": "Descripción 35"},
+    {"id": "rId70", "path": "images/rId70.png", "description": "Descripción 36"},
+    {"id": "rId73", "path": "images/rId73.png", "description": "Descripción 37"},
+    {"id": "rId76", "path": "images/rId76.png", "description": "Descripción 38"},
+    {"id": "rId80", "path": "images/rId80.png", "description": "Descripción 39"},
+    {"id": "rId83", "path": "images/rId83.png", "description": "Descripción 40"},
+    {"id": "rId87", "path": "images/rId87.png", "description": "Descripción 41"},
+    {"id": "rId90", "path": "images/rId90.png", "description": "Descripción 42"},
+    {"id": "rId94", "path": "images/rId94.png", "description": "Descripción 43"},
+    {"id": "rId97", "path": "images/rId97.png", "description": "Descripción 44"},
+]
+
+
 # Gradio layout setup
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column(scale=1):
             # Agregar el video al inicio
             video = gr.Video(value="video.mp4", label="Video de Introducción")
+
+            # Agregar las imágenes en un grid de 3 columnas por fila
+            for i in range(0, len(images), 3):
+                with gr.Row():
+                    for j in range(3):
+                        if i + j < len(images):
+                            with gr.Column(scale=1):
+                                gr.Image(value=images[i + j]["path"])
+                                gr.Markdown(images[i + j]["description"])
+            
             chatbot_input = gr.Textbox(label="Tu mensaje")
+            submit_button = gr.Button("Enviar")
             chatbot_output = gr.Chatbot(label="ChatBot")
             chatbot_history = gr.State(value=[])
             image_url = gr.State(value=None)
-            submit_button = gr.Button("Enviar")
 
             # Main accordion for categories
             # Main accordion for categories