Update app.py

app.py

@@ -3,18 +3,14 @@ from PIL import Image
 import google.generativeai as genai
 from gtts import gTTS
 import os
+import io
 
 # Configuración de la página de Streamlit
-st.set_page_config(page_title="✨ Soph-IA: Tu Asistente Inteligente", layout="centered", page_icon="🤖")
+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"]
+api_key = st.secrets["API_KEY"]  # Accede al secreto
 
-# Cargar y aplicar CSS personalizado
-with open("./style.css") as f:
-    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
-# Funciones de procesamiento
 def procesar_texto(texto):
     genai.configure(api_key=api_key)
     modelo = genai.GenerativeModel('gemini-1.5-pro-latest')
@@ -42,79 +38,38 @@ def hablar_texto(texto):
     except Exception as e:
         st.error(f"Error al generar el audio: {e}")
 
-# CSS adicional para centrar el contenido
-st.markdown("""
-    <style>
-        .centered-content {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            text-align: center;
-        }
-        .title-style {
-            font-size: 3em;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
-        .subtitle-style {
-            font-size: 1.5em;
-            margin-bottom: 40px;
-            color: #4CAF50;
-        }
-        .input-box {
-            width: 50%;
-            margin: 0 auto;
-        }
-    </style>
-""", unsafe_allow_html=True)
+st.title("🤖 ¡Bienvenido a ChatBot!")
 
-# Contenido principal centrado
-st.markdown('<div class="centered-content">', unsafe_allow_html=True)
-
-st.markdown('<div class="title-style">✨ ¡Bienvenido a Soph-IA! 💡</div>', unsafe_allow_html=True)
-
-# Introducción amigable con emojis y centrado
-st.markdown("""
-    <div class="subtitle-style"> 
-    Soy **Soph-IA**, tu asistente virtual inteligente 🤖. Estoy aquí para ayudarte a responder preguntas y analizar imágenes. 
-    ¡No dudes en preguntar lo que necesites! 😊
-    </div>
-""", unsafe_allow_html=True)
-
-# Espacio dinámico para respuestas
 espacio_contenido_generado = st.empty()
 
-# Elegir tipo de entrada: pregunta o imagen (centrado)
-st.markdown('<div class="input-box">', unsafe_allow_html=True)
-
-tipo_entrada = st.selectbox("Selecciona lo que quieres hacer:", ["❓ Hacer una pregunta", "🖼️ Subir una imagen"])
-
-if tipo_entrada == "❓ Hacer una pregunta":
-    entrada_texto = st.text_input("Escribe tu pregunta aquí:")
-    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)
-
-elif tipo_entrada == "🖼️ Subir una imagen":
-    entrada_imagen = st.file_uploader("Sube tu imagen aquí", type=["jpg", "png", "jpeg"])
-    if entrada_imagen:
-        imagen = Image.open(entrada_imagen)
-        st.image(imagen, caption='✨ Imagen cargada con éxito', use_column_width=True)
-        with st.spinner("✨ Analizando imagen..."):
-            respuesta = procesar_imagen(imagen)
-        espacio_contenido_generado.write(f"**Resultado del análisis de la imagen:** {respuesta}")
-
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Mensaje de cierre amigable y centrado
-st.markdown("""
-    <div class="subtitle-style"> 
-    🌟 ¡Gracias por usar **Soph-IA**! Estoy aquí para ti en cualquier momento. 😊
-    </div>
-""", unsafe_allow_html=True)
+# Cargar y aplicar CSS personalizado
+with open("./style.css") as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
 
-st.markdown('</div>', unsafe_allow_html=True)
+st.write("¡Hola! Soy tu asistente virtual. ¿Cómo puedo ayudarte hoy? 😊")
+
+col1, col2 = st.columns([1, 3])
+
+with col1:
+    tipo_entrada = st.selectbox("Selecciona el tipo de entrada", ["Haz una pregunta ❓", "🖼️ Subir imagen"])
+
+with col2:
+    if tipo_entrada == "Haz una pregunta ❓":
+        entrada_texto = st.text_input("Ingresa tu pregunta aquí:")
+        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)
+
+    elif tipo_entrada == "🖼️ Subir imagen":
+        entrada_imagen = st.file_uploader("Sube una imagen", type=["jpg", "png", "jpeg"])
+        if entrada_imagen:
+            imagen = Image.open(entrada_imagen)
+            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}")
+
+st.write("¡Gracias por usar el ChatBot! 😊")