Aprender Streamlit Multimedia y elementos avanzados

Más allá de los widgets y gráficos, Streamlit ofrece un conjunto de componentes avanzados que permiten crear experiencias de usuario ricas: contenido multimedia variado, interfaces de chat para aplicaciones LLM, indicadores de progreso para operaciones largas y personalización visual completa mediante temas.

Imágenes, audio, vídeo y PDF

import streamlit as st

# Imagen desde URL, ruta local o array NumPy
st.image("https://ejemplo.com/foto.jpg", caption="Fotografía de muestra", use_container_width=True)

# Audio
st.audio("podcast.mp3", format="audio/mpeg", start_time=30)

# Vídeo
st.video("demo.mp4", start_time=10)

# PDF (Streamlit 1.38+)
with open("informe.pdf", "rb") as f:
    st.pdf(f)

Interfaces de chat con LLM

Los componentes de chat están diseñados para construir aplicaciones de IA conversacional:

import streamlit as st

if "mensajes" not in st.session_state:
    st.session_state.mensajes = []

for msg in st.session_state.mensajes:
    with st.chat_message(msg["role"]):
        st.write(msg["content"])

if prompt := st.chat_input("Escribe tu pregunta..."):
    st.session_state.mensajes.append({"role": "user", "content": prompt})
    with st.chat_message("assistant"):
        respuesta = f"Has preguntado: '{prompt}'"
        st.write_stream(iter(respuesta))  # Streaming de texto
    st.session_state.mensajes.append({"role": "assistant", "content": respuesta})

Indicadores de progreso y notificaciones

import time

# Barra de progreso
barra = st.progress(0, text="Iniciando procesamiento...")
for i in range(100):
    time.sleep(0.02)
    barra.progress(i + 1, text=f"Procesando... {i+1}%")

# Spinner durante operación larga
with st.spinner("Entrenando el modelo, puede tardar varios minutos..."):
    resultado = entrenar_modelo()

# Status con pasos detallados
with st.status("Cargando pipeline completo...") as status:
    st.write("Cargando datos...")
    cargar_datos()
    st.write("Preprocesando...")
    preprocesar()
    status.update(label="Pipeline completado", state="complete")

# Toast: notificación efímera
st.toast("Datos guardados correctamente", icon="✅")

Personalización de temas

# .streamlit/config.toml
[theme]
base = "dark"
primaryColor = "#FF4B4B"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#262730"
textColor = "#FAFAFA"
font = "monospace"

st.logo permite mostrar el logotipo de la empresa en la parte superior del sidebar y de la app:

st.logo("logo.png", link="https://empresa.com", icon_image="favicon.png")

st.balloons() y st.snow() añaden animaciones celebratorias para marcar hitos de la aplicación.