app.py

import streamlit as st
from PIL import Image
import google.generativeai as genai
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="centered", page_icon="🤖")

# Obtener la API key desde los secretos de Hugging Face
api_key = st.secrets["API_KEY"]

# 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')
    respuesta = modelo.generate_content(texto)
    return respuesta.text

def procesar_imagen(imagen):
    genai.configure(api_key=api_key)
    modelo = genai.GenerativeModel('gemini-1.5-pro-latest')

    if isinstance(imagen, Image.Image):
        try:
            respuesta = modelo.generate_content(imagen)
            return respuesta.text
        except Exception as e:
            return f"Error al procesar la imagen: {e}"
    else:
        return "La imagen no es del tipo esperado."

def hablar_texto(texto):
    try:
        tts = gTTS(text=texto, lang='es')
        tts.save("respuesta.mp3")
        os.system("mpg321 respuesta.mp3")
    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)

# 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)

st.markdown('</div>', unsafe_allow_html=True)