Update app.py

app.py

@@ -81,7 +81,6 @@ 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
@@ -125,36 +124,97 @@ Sintetizador de voz con la voz del locutor argentino Pedro Labattaglia.
 - Presione generar voz
 """
 
-# JavaScript para limpiar los datos de autenticación
+# JavaScript mejorado para limpiar los datos de autenticación
 clear_auth_js = """
 function clearAuthData() {
     localStorage.removeItem('gradio_auth_token');
     localStorage.removeItem('gradio_auth_expiration');
+    sessionStorage.removeItem('gradio_auth_token');
+    sessionStorage.removeItem('gradio_auth_expiration');
+    document.cookie = 'gradio_auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'gradio_auth_expiration=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
 }
 
-// Limpiar datos de autenticación cuando la página se refresca o se cierra
 window.addEventListener('beforeunload', clearAuthData);
 
-// Agregar un botón para limpiar manualmente los datos de autenticación
-document.addEventListener('DOMContentLoaded', (event) => {
-    const clearAuthButton = document.createElement('button');
-    clearAuthButton.textContent = 'Cerrar sesión';
-    clearAuthButton.style.position = 'fixed';
-    clearAuthButton.style.top = '10px';
-    clearAuthButton.style.right = '10px';
-    clearAuthButton.style.zIndex = '1000';
-    clearAuthButton.onclick = function() {
-        clearAuthData();
-        alert('Sesión cerrada. Por favor, recarga la página.');
-    };
-    document.body.appendChild(clearAuthButton);
-});
+function logout() {
+    clearAuthData();
+    window.location.reload();
+}
+"""
+
+# CSS personalizado
+custom_css = """
+#image-container img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 256px;
+    height: auto;
+}
+.logout-button {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    padding: 8px 16px;
+    background-color: #f44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.logout-button:hover {
+    background-color: #d32f2f;
+}
+.login-container {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    max-width: 400px;
+    width: 100%;
+}
+.login-container h1 {
+    margin-bottom: 1rem;
+    color: #4a4a4a;
+}
+.login-container input {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+.login-container button {
+    width: 100%;
+    padding: 0.5rem;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.login-container button:hover {
+    background-color: #2980b9;
+}
 """
 
 # Interfaz de Gradio
-with gr.Blocks(theme=theme) as demo:
+with gr.Blocks(theme=theme, css=custom_css) as demo:
     gr.Markdown(description)
 
+    # Botón de cerrar sesión
+    gr.HTML(
+        """
+        <button onclick="logout()" class="logout-button">Cerrar sesión</button>
+        <script>
+        """ + clear_auth_js + """
+        </script>
+        """
+    )
+
     # Fila para centrar la imagen
     with gr.Row():
         with gr.Column(equal_height=True):
@@ -185,19 +245,21 @@ with gr.Blocks(theme=theme) as demo:
         outputs=[generated_audio, metrics_output]
     )
 
-    # Agregar el JavaScript para limpiar los datos de autenticación
-    gr.HTML("<script>" + clear_auth_js + "</script>")
-
-# Estilos CSS personalizados
-demo.css = """
-#image-container img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 256px;
-    height: auto;
-}
+# Formulario de inicio de sesión personalizado (en español)
+login_form = """
+<div class="login-container">
+    <h1>Bienvenido al sintetizador de voz de Pedro Labattaglia</h1>
+    <p>Por favor, introduzca sus credenciales para acceder.</p>
+    <form id="login-form">
+        <input type="text" id="username" name="username" placeholder="Usuario" required>
+        <input type="password" id="password" name="password" placeholder="Contraseña" required>
+        <button type="submit">Iniciar sesión</button>
+    </form>
+</div>
 """
 
 if __name__ == "__main__":
-    demo.launch(auth=[("Pedro Labattaglia", "PL2024"), ("Invitado", "PLTTS2024")])
+    demo.launch(
+        auth=[("Pedro Labattaglia", "PL2024"), ("Invitado", "PLTTS2024")],
+        auth_message=login_form
+    )