import os
import gradio as gr
os.getenv("app_backend")
# Configuración de la interfaz de Gradio
supported_languages = ["es", "en"]
reference_audios = [
    "serio.wav",
    "neutral.wav",
    "alegre.wav",
    "neutral_ingles.wav"
]

theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="gray",
).set(
    body_background_fill='*neutral_100',
    body_background_fill_dark='*neutral_900',
)

description = """
# Sintetizador de voz de Pedro Labattaglia 🎙️

Sintetizador de voz con la voz del locutor argentino Pedro Labattaglia. 

## Cómo usarlo:
- Elija el idioma (Español o Inglés)
- Elija un audio de referencia de la lista 
- Escriba el texto que desea sintetizar
- Presione generar voz
"""

# Interfaz de Gradio
with gr.Blocks(theme=theme) as demo:
    gr.Markdown(description)

    # Fila para centrar la imagen
    with gr.Row():
        with gr.Column(equal_height=True):  # Esto centra la imagen en la fila
            gr.Image(
                "https://www.labattaglia.com.ar/images/about_me_pic2.jpg", 
                label="", 
                show_label=False,
                container=False,  # Esto permite que la imagen se ajuste al contenedor
                elem_id="image-container"  # Asigna un ID CSS para agregar estilos personalizados
            )

    # Fila para seleccionar idioma, referencia y generar voz
    with gr.Row():
        with gr.Column(scale=2):
            language_selector = gr.Dropdown(label="Idioma", choices=supported_languages)
            reference_audio = gr.Dropdown(label="Audio de referencia", choices=reference_audios)
            input_text = gr.Textbox(label="Texto a sintetizar", placeholder="Escribe aquí el texto que quieres convertir a voz...")
            generate_button = gr.Button("Generar voz", variant="primary")

        with gr.Column(scale=1):
            generated_audio = gr.Audio(label="Audio generado", interactive=False)
            metrics_output = gr.Textbox(label="Métricas", value="Tiempo de generación: -- segundos\nFactor de tiempo real: --")

    # Configuración del botón para generar voz
    generate_button.click(
        predict,
        inputs=[input_text, language_selector, reference_audio],
        outputs=[generated_audio, metrics_output]
    )

# Estilos CSS personalizados
demo.css = """
#image-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 256px;  /* Ancho máximo de 256px */
    height: auto;      /* Mantener la relación de aspecto */
}
"""

if __name__ == "__main__":
    demo.launch(share=True)