Update ui.py

ui.py

@@ -1,5 +1,16 @@
+# 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():
@@ -8,81 +19,82 @@ def load_images():
             {"image": "images/rld1.png", "description": "NASA"},
             {"image": "images/rld2.png", "description": "NASA"},
         ],
-        # Agrega más categorías y imágenes según sea necesario
+        # Add more categories and images as needed
     }
     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', 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
+    with gr.Blocks(theme='upsatwal/mlsc_tiet') as demo:
+        with gr.Row():
+            with gr.Column(scale=0.8):
+                # Add the video
                 video = gr.Video(value="video.mp4", label="Video de Introducción")
 
-                # Título para carruseles de imágenes
+                # Image Galleries
                 gr.Markdown("### Carruseles de Imágenes")
-
-                # Carruseles de imágenes
                 for category, images_list in image_carousel_data.items():
                     gr.Markdown(f"#### {category}")
-                    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")
+                    # 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
+                    )
 
-                # 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=[])
+                # Download button
+                download_button = gr.File(label="Descargar Informe", value="Reporte.pdf")
 
-                # 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
-                )
+                # 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=[])
 
-                # Imagen asociada
-                image_url = gr.State(value=None)
-                image_output = gr.Image(label="Imagen asociada")
+                        # 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
+                        )
 
-                # 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
+                    with gr.Column(scale=1):
+                        image_url = gr.State(value=None)
+                        image_output = gr.Image(label="Imagen asociada")
 
-                # 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]
-                )
+                        # 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
 
-                # Actualizar la imagen cuando se cambie la URL
-                image_url.change(fn=update_image, inputs=image_url, outputs=image_output)
+                        # 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)
 
     return demo