Update app.py

app.py

@@ -13,10 +13,6 @@ from TTS.tts.models.xtts import Xtts
 from TTS.utils.generic_utils import get_user_data_dir
 from huggingface_hub import hf_hub_download
 
-HF_TOKEN = os.environ.get("HF_TOKEN")
-if not HF_TOKEN:
-    raise ValueError("No se ha proporcionado el token de Hugging Face. Por favor, configura la variable de entorno HF_TOKEN.")
-
 # Configuración inicial
 os.environ["COQUI_TOS_AGREED"] = "1"
 
@@ -85,6 +81,7 @@ def predict(prompt, language, reference_audio):
         
         output_path = "pedro_labattaglia_TTS.wav"
         # Guardar el audio directamente desde el output del modelo
+        import scipy.io.wavfile as wavfile
         wavfile.write(output_path, config.audio["output_sample_rate"], out["wav"])
 
         audio_length = len(out["wav"]) / config.audio["output_sample_rate"]  # duración del audio en segundos
@@ -99,21 +96,79 @@ def predict(prompt, language, reference_audio):
         print(f"Error detallado: {str(e)}")
         return None, f"Error: {str(e)}"
 
-# Interfaz de Gradio para el backend
-iface = gr.Interface(
-    fn=predict,
-    inputs=[
-        gr.Textbox(label="Texto a sintetizar"),
-        gr.Dropdown(label="Idioma", choices=["es", "en"]),
-        gr.Dropdown(label="Audio de referencia", choices=["serio.wav", "neutral.wav", "alegre.wav", "neutral_ingles.wav"])
-    ],
-    outputs=[
-        gr.Audio(label="Audio generado"),
-        gr.Textbox(label="Métricas")
-    ],
-    title="Backend API para Sintetizador de Voz de Pedro Labattaglia",
-    description="API para generar voz sintética usando el modelo de Pedro Labattaglia"
+# 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__":
-    iface.launch()
+    demo.launch(share=True)