Update app.py

app.py

@@ -5,7 +5,7 @@ from gtts import gTTS
 import os
 
 # Configuración de la página de Streamlit
-st.set_page_config(page_title="✨ Soph-IA: Tu Asistente Inteligente", layout="wide", page_icon="🤖")
+st.set_page_config(page_title="✨ Soph-IA: Tu Asistente Inteligente", layout="centered", page_icon="🤖")
 
 # Obtener la API key desde los secretos de Hugging Face
 api_key = st.secrets["API_KEY"]
@@ -42,43 +42,79 @@ def hablar_texto(texto):
     except Exception as e:
         st.error(f"Error al generar el audio: {e}")
 
-# Contenido principal
-st.title("✨ ¡Bienvenido a Soph-IA! 💡")
-
-# Introducción amigable con emojis
-st.write("""
-### 🤖 ¿Quién soy?
-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! 😊
-""")
+# 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)
+
+# 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
-col1, col2 = st.columns([1, 3])
-
-with col1:
-    tipo_entrada = st.selectbox("Selecciona lo que quieres hacer:", ["❓ Hacer una pregunta", "🖼️ Subir una imagen"])
-
-with col2:
-    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}")
-
-# Mensaje de cierre amigable
-st.write("🌟 ¡Gracias por usar **Soph-IA**! Estamos aquí para ti en cualquier momento. 😊")
-
+# 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)
+
+st.markdown('</div>', unsafe_allow_html=True)