Update app.py

app.py

@@ -4,6 +4,7 @@ import google.generativeai as genai
 from gtts import gTTS
 import os
 import io
+import base64
 
 # Configuración de la página de Streamlit
 st.set_page_config(page_title="🤖 Soph-IA", layout="wide")
@@ -11,10 +12,44 @@ st.set_page_config(page_title="🤖 Soph-IA", layout="wide")
 # Obtener la API key desde los secretos de Hugging Face
 api_key = st.secrets["API_KEY"]  # Accede al secreto
 
+# Estilo CSS para diseño atractivo
+st.markdown("""
+    <style>
+        body {
+            background-color: #1a1a1a;
+            color: #ffffff;
+            font-family: 'Arial', sans-serif;
+        }
+        h1 {
+            color: #ffcc00;
+            text-align: center;
+        }
+        .response {
+            background-color: #333333;
+            border-radius: 5px;
+            padding: 10px;
+            margin-top: 10px;
+        }
+        .footer {
+            text-align: center;
+            color: #ffcc00;
+            margin-top: 20px;
+        }
+        .audio-button {
+            background-color: #ffcc00;
+            color: #1a1a1a;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            margin-top: 5px;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
 # Respuestas automatizadas basadas en palabras clave
 def respuestas_automatizadas(texto):
     texto = texto.lower()
-    # Respuestas para preguntas específicas
     respuestas = {
         "quien te creo": "Fui creada por un Bioingeniero llamado Jeysshon Bustos Jimenez, mi creador.",
         "quien es tu creador": "Fui creada por un Bioingeniero llamado Jeysshon Bustos Jimenez, mi creador.",
@@ -58,18 +93,18 @@ def procesar_imagen(imagen):
 
 def hablar_texto(texto):
     try:
-        tts = gTTS(text=texto, lang='es')
-        tts.save("respuesta.mp3")
-        os.system("mpg321 respuesta.mp3")
+        tts = gTTS(text=texto, lang='es', slow=False)
+        with io.BytesIO() as audio_file:
+            tts.save(audio_file)
+            audio_file.seek(0)
+            audio_base64 = base64.b64encode(audio_file.read()).decode()
+            return f"data:audio/mp3;base64,{audio_base64}"
     except Exception as e:
         st.error("Hubo un error al generar el audio. Por favor, recarga la página y vuelve a intentar.")
-
-# Cargar y aplicar CSS personalizado
-with open("./style.css") as f:
-    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+        return None
 
 # Título centrado
-st.markdown("<h1 style='text-align: center;'>🤖 ¡Bienvenido a Soph-IA!</h1>", unsafe_allow_html=True)
+st.markdown("<h1>🤖 ¡Bienvenido a Soph-IA!</h1>", unsafe_allow_html=True)
 
 # Explicación técnica de Soph-IA
 st.markdown("""
@@ -86,6 +121,7 @@ espacio_contenido_generado = st.empty()
 
 st.write("¡Hola! Soy Soph-IA, tu asistente virtual. ¿Cómo puedo ayudarte hoy? 😊")
 
+# Columnas para selección de entrada
 col1, col2 = st.columns([1, 3])
 
 with col1:
@@ -97,9 +133,15 @@ with col2:
         if entrada_texto:
             with st.spinner("Generando respuesta..."):
                 resultado = procesar_texto(entrada_texto)
-            espacio_contenido_generado.write(f"**Respuesta:** {resultado}")
-            if st.button("🔊 Escuchar respuesta"):
-                hablar_texto(resultado)
+            espacio_contenido_generado.markdown(f"<div class='response'>**Respuesta:** {resultado}</div>", unsafe_allow_html=True)
+            audio_data = hablar_texto(resultado)
+            if audio_data:
+                st.markdown(f"""
+                    <audio controls>
+                        <source src="{audio_data}" type="audio/mpeg">
+                        Tu navegador no soporta el elemento de audio.
+                    </audio>
+                """, unsafe_allow_html=True)
 
     elif tipo_entrada == "🖼️ Subir imagen":
         entrada_imagen = st.file_uploader("Sube una imagen", type=["jpg", "png", "jpeg"])
@@ -108,10 +150,9 @@ with col2:
             st.image(imagen, caption='Imagen subida.', use_column_width=True)
             with st.spinner("Procesando imagen..."):
                 respuesta = procesar_imagen(imagen)
-            espacio_contenido_generado.write(f"**Respuesta de la imagen:** {respuesta}")
+            espacio_contenido_generado.markdown(f"<div class='response'>**Respuesta de la imagen:** {respuesta}</div>", unsafe_allow_html=True)
 
 st.write("¡Gracias por usar Soph-IA! 😊")
 
 # Pie de página
-st.markdown("<p style='text-align: center;'>© 2024 Jeysshon</p>", unsafe_allow_html=True)
-
+st.markdown("<p class='footer'>© 2024 Jeysshon</p>", unsafe_allow_html=True)