Update ui.py

ui.py

@@ -1,16 +1,5 @@
-# ui.py
-
 import gradio as gr
 from config import SIMILARITY_THRESHOLD_DEFAULT, SYSTEM_PROMPT, MAX_LENGTH_DEFAULT
-import os
-
-# Define the theme (you can keep your custom theme)
-def get_theme():
-    theme = gr.themes.Default(
-        primary_hue="indigo",
-        # ... (rest of your theme configuration)
-    )
-    return theme
 
 # Load images and descriptions
 def load_images():
@@ -19,82 +8,81 @@ def load_images():
             {"image": "images/rld1.png", "description": "NASA"},
             {"image": "images/rld2.png", "description": "NASA"},
         ],
-        # Add more categories and images as needed
+        # Agrega más categorías y imágenes según sea necesario
     }
     return image_carousel_data
 
 # Build the interface
 def build_interface(process_input, send_preset_question, update_image):
-    theme = get_theme()
     image_carousel_data = load_images()
 
-    with gr.Blocks(theme='upsatwal/mlsc_tiet') as demo:
-        with gr.Row():
-            with gr.Column(scale=0.8):
-                # Add the video
+    with gr.Blocks(theme='upsatwal/mlsc_tiet', elem_id="main-container") as demo:
+        # Ajustar una fila contenedora con escala global para centrar todo
+        with gr.Row(elem_id="center-row", scale=0.8):
+            with gr.Column(scale=0.8):  # Columna única para centrar el contenido
+                # Video de introducción
                 video = gr.Video(value="video.mp4", label="Video de Introducción")
 
-                # Image Galleries
+                # Título para carruseles de imágenes
                 gr.Markdown("### Carruseles de Imágenes")
+
+                # Carruseles de imágenes
                 for category, images_list in image_carousel_data.items():
                     gr.Markdown(f"#### {category}")
-                    # Use gr.Gallery instead of gr.Carousel
-                    gallery_items = []
-                    for item in images_list:
-                        gallery_items.append((item["image"], item["description"]))
-                    gr.Gallery(
-                        value=gallery_items,
-                        label=category,
-                        show_label=False,
-                        elem_id=None
-                    )
+                    gallery_items = [(item["image"], item["description"]) for item in images_list]
+                    gr.Gallery(value=gallery_items, label=category, show_label=False)
+
+                # Botón de descarga de informe
+                gr.File(label="Descargar Informe", value="Reporte.pdf")
 
-                # Download button
-                download_button = gr.File(label="Descargar Informe", value="Reporte.pdf")
+                # ChatBot y entrada de texto
+                chatbot_output = gr.Chatbot(label="ChatBot", elem_id="chatbot_output")
+                chatbot_input = gr.Textbox(label="Tu mensaje", elem_id="chatbot_input")
+                submit_button = gr.Button("Enviar")
+                chatbot_history = gr.State(value=[])
 
-                # Chatbot
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        chatbot_output = gr.Chatbot(label="ChatBot", elem_id="chatbot_output")
-                        chatbot_input = gr.Textbox(label="Tu mensaje", elem_id="chatbot_input")
-                        submit_button = gr.Button("Enviar")
-                        chatbot_history = gr.State(value=[])
+                # Opciones de búsqueda
+                selection = gr.Radio(
+                    ["Solo Búsqueda Vectorial", "Solo Yi-Coder", "Ambos (basado en umbral de similitud)"],
+                    label="Seleccione el modo de búsqueda",
+                    value="Ambos (basado en umbral de similitud)"
+                )
+                # Sliders para umbral de similitud y longitud máxima
+                similarity_threshold_slider = gr.Slider(
+                    minimum=0.0, maximum=1.0, value=SIMILARITY_THRESHOLD_DEFAULT, step=0.01,
+                    label="Umbral de similitud (solo para 'Ambos')"
+                )
+                max_length_slider = gr.Slider(
+                    minimum=1, maximum=1000, value=MAX_LENGTH_DEFAULT,
+                    label="Longitud máxima de tokens (solo para Yi-Coder)"
+                )
+                # Instrucción del sistema
+                system_prompt_input = gr.Textbox(
+                    label="Instrucción del sistema", value=SYSTEM_PROMPT, lines=2
+                )
 
-                        # Add selection options
-                        selection = gr.Radio(
-                            ["Solo Búsqueda Vectorial", "Solo Yi-Coder", "Ambos (basado en umbral de similitud)"],
-                            label="Seleccione el modo de búsqueda",
-                            value="Ambos (basado en umbral de similitud)"
-                        )
-                        similarity_threshold_slider = gr.Slider(
-                            minimum=0.0, maximum=1.0, value=SIMILARITY_THRESHOLD_DEFAULT, step=0.01,
-                            label="Umbral de similitud (solo para 'Ambos')"
-                        )
-                        max_length_slider = gr.Slider(
-                            minimum=1, maximum=1000, value=MAX_LENGTH_DEFAULT,
-                            label="Longitud máxima de tokens (solo para Yi-Coder)"
-                        )
-                        system_prompt_input = gr.Textbox(
-                            label="Instrucción del sistema", value=SYSTEM_PROMPT, lines=2
-                        )
+                # Imagen asociada
+                image_url = gr.State(value=None)
+                image_output = gr.Image(label="Imagen asociada")
 
-                    with gr.Column(scale=1):
-                        image_url = gr.State(value=None)
-                        image_output = gr.Image(label="Imagen asociada")
+                # Definir funciones de procesamiento
+                def on_submit(message, history, selected_option, similarity_threshold, system_prompt, max_length):
+                    history, new_history, image = process_input(
+                        message, history, selected_option, similarity_threshold, system_prompt, max_length
+                    )
+                    return history, new_history, image
 
-                        # Define processing functions
-                        def on_submit(message, history, selected_option, similarity_threshold, system_prompt, max_length):
-                            history, new_history, image = process_input(
-                                message, history, selected_option, similarity_threshold, system_prompt, max_length
-                            )
-                            return history, new_history, image
+                # Configurar eventos de clic para el chatbot
+                submit_button.click(
+                    on_submit,
+                    inputs=[
+                        chatbot_input, chatbot_history, selection, 
+                        similarity_threshold_slider, system_prompt_input, max_length_slider
+                    ],
+                    outputs=[chatbot_output, chatbot_history, image_url]
+                )
 
-                        # Configure click events for the chatbot
-                        submit_button.click(
-                            on_submit,
-                            inputs=[chatbot_input, chatbot_history, selection, similarity_threshold_slider, system_prompt_input, max_length_slider],
-                            outputs=[chatbot_output, chatbot_history, image_url]
-                        )
-                        image_url.change(fn=update_image, inputs=image_url, outputs=image_output)
+                # Actualizar la imagen cuando se cambie la URL
+                image_url.change(fn=update_image, inputs=image_url, outputs=image_output)
 
     return demo