Formación corporativa en Streamlit

Streamlit ofrece un conjunto completo de elementos de texto para presentar información al usuario de forma estructurada y visualmente atractiva. Desde simples títulos hasta fórmulas matemáticas con LaTeX, pasando por bloques de código con resaltado de sintaxis, estos componentes permiten documentar y enriquecer cualquier aplicación de datos.

Jerarquía de encabezados

La jerarquía visual de la aplicación se establece con las funciones de encabezado:

import streamlit as st

st.title("Título principal de la aplicación")
st.header("Sección del dashboard")
st.subheader("Subsección o grupo de métricas")
st.text("Texto plano sin formato, tipografía monoespaciada")
st.caption("Texto pequeño para notas al pie o descripciones breves")

Cada función genera un nivel de encabezado HTML diferente, creando una jerarquía semántica correcta.

Texto enriquecido con Markdown y HTML

st.markdown acepta la sintaxis completa de Markdown, incluyendo negrita, cursiva, listas, tablas y enlacees. Además, st.html permite inyectar HTML arbitrario cuando se necesita un control total sobre el formato:

st.markdown("**Negrita**, *cursiva*, ~~tachado~~ y `código inline`")
st.markdown("## Encabezado dentro de markdown")
st.markdown("- Elemento 1\n- Elemento 2\n- Elemento 3")

# HTML directo (disponible desde Streamlit 1.31)
st.html("<p style='color: #FF4B4B; font-size: 18px'>Texto con estilo personalizado</p>")

Código y fórmulas matemáticas

Para mostrar bloques de código con resaltado de sintaxis y ecuaciones matemáticas:

st.code("import numpy as np\nresult = np.sqrt(16)", language="python")
st.echo()  # Muestra el código fuente del bloque siguiente
st.latex(r"E = mc^2")
st.latex(r"\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}")

Los widgets de entrada son los bloques de construcción fundamentales para crear aplicaciones interactivas en Streamlit. Cada widget captura un tipo de dato específico del usuario y devuelve su valor actual en cada ejecución del script, permitiendo que la aplicación reaccione en tiempo real.

Botones y acciones

Los botones ejecutan acciones puntuales. A diferencia de otros widgets, st.button devuelve True solo durante la ejecución en la que se pulsó:

import streamlit as st

if st.button("Generar informe", type="primary", icon="📊"):
    st.success("Informe generado correctamente.")

# Botón de descarga: no necesita if para funcionar
st.download_button(
    label="Descargar datos CSV",
    data="col1,col2\n1,2\n3,4",
    file_name="datos.csv",
    mime="text/csv"
)

Campos de texto y números

nombre = st.text_input("Nombre completo", placeholder="Ej: Ana García")
descripcion = st.text_area("Descripción del proyecto", height=150)
edad = st.number_input("Edad", min_value=0, max_value=120, value=25, step=1)

Selectores y opciones múltiples

lenguaje = st.selectbox("Lenguaje favorito", ["Python", "R", "Julia", "Scala"])
herramientas = st.multiselect("Herramientas conocidas", ["Pandas", "NumPy", "Scikit-learn", "TensorFlow"])
nivel = st.radio("Nivel de experiencia", ["Principiante", "Intermedio", "Avanzado"], horizontal=True)
# Nuevos en Streamlit 1.36+
opcion = st.pills("Categoría", ["Datos", "ML", "Visualización", "Deploy"])
modo = st.segmented_control("Modo de análisis", ["Rápido", "Completo", "Experto"])

La visualización de datos es el núcleo de la mayoría de aplicaciones Streamlit. La biblioteca ofrece desde gráficos nativos de uso inmediato hasta integraciones completas con las principales bibliotecas de visualización del ecosistema Python: Matplotlib, Seaborn, Plotly y Altair.

Gráficos nativos

Los gráficos nativos de Streamlit son la forma más rápida de visualizar datos desde un DataFrame de Pandas o un array de NumPy:

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(20, 3), columns=["Serie A", "Serie B", "Serie C"])

st.line_chart(df)
st.bar_chart(df)
st.area_chart(df)
st.scatter_chart(df, x="Serie A", y="Serie B", size="Serie C")

Todos los gráficos nativos son interactivos por defecto (zoom, selección de series) y responden a los temas de la aplicación.

Mapas geoespaciales

import pandas as pd
import streamlit as st

# Mapa de puntos básico con lat/lon
df_mapa = pd.DataFrame({
    "lat": [40.416, 41.385, 39.470],
    "lon": [-3.703, 2.173, -0.376]
})
st.map(df_mapa)

# Mapa avanzado con PyDeck
import pydeck as pdk
st.pydeck_chart(pdk.Deck(
    map_style="mapbox://styles/mapbox/light-v9",
    initial_view_state=pdk.ViewState(latitude=40.416, longitude=-3.703, zoom=5),
    layers=[pdk.Layer("ScatterplotLayer", data=df_mapa, get_position=["lon", "lat"])]
))

Matplotlib y Seaborn

import matplotlib.pyplot as plt
import seaborn as sns

fig, ax = plt.subplots(figsize=(10, 5))
sns.histplot(df["Serie A"], kde=True, ax=ax)
ax.set_title("Distribución de Serie A")
st.pyplot(fig)

Un layout bien estructurado es determinante para que una aplicación Streamlit sea usable y profesional. Streamlit ofrece un conjunto de componentes de layout que permiten organizar el contenido en columnas, pestañas, paneles laterales y contenedores de forma declarativa con Python puro.

Columnas: disposición horizontal

st.columns divide el espacio horizontal en columnas de igual tamaño o proporciones personalizadas:

import streamlit as st

col1, col2, col3 = st.columns(3)
with col1:
    st.metric("Ventas", "€ 12.450", "+8,3%")
with col2:
    st.metric("Clientes", "1.230", "+12")
with col3:
    st.metric("Conversión", "3,4%", "-0,2%")

# Proporciones personalizadas
col_lateral, col_principal = st.columns([1, 3])

Pestañas y expansores

tab_resumen, tab_detalle, tab_config = st.tabs(["Resumen", "Detalle", "Configuración"])
with tab_resumen:
    st.write("Vista resumida del análisis")
with tab_detalle:
    st.dataframe(df)

with st.expander("Ver parámetros avanzados", expanded=False):
    alpha = st.slider("Alpha", 0.0, 1.0, 0.05)
    n_iter = st.number_input("Iteraciones", 100, 10000, 1000)

with st.popover("Información adicional"):
    st.write("Este parámetro controla la regularización L2.")

Sidebar: panel de control lateral

with st.sidebar:
    st.title("Configuración")
    dataset = st.selectbox("Dataset", ["Iris", "Titanic", "Housing"])
    n_features = st.slider("Número de características", 2, 10, 5)
    st.divider()
    if st.button("Aplicar cambios"):
        st.rerun()

La visualización y edición de datos estructurados es uno de los puntos fuertes de Streamlit. El módulo cubre desde la presentación de DataFrames de Pandas hasta la conexión a bases de datos SQL reales mediante la API unificada st.connection.

st.dataframe: tabla interactiva

st.dataframe renderiza un DataFrame de Pandas como una tabla HTML interactiva con ordenación, redimensionamiento de columnas y scroll:

import streamlit as st
import pandas as pd

df = pd.read_csv("ventas.csv")
st.dataframe(
    df,
    use_container_width=True,
    column_config={
        "precio": st.column_config.NumberColumn("Precio (€)", format="€%.2f"),
        "fecha": st.column_config.DateColumn("Fecha", format="DD/MM/YYYY"),
        "activo": st.column_config.CheckboxColumn("Activo"),
        "web": st.column_config.LinkColumn("URL")
    },
    hide_index=True
)

st.data_editor: edición in-place

st.data_editor permite al usuario editar celdas directamente en la tabla y devuelve el DataFrame modificado:

df_editado = st.data_editor(
    df,
    num_rows="dynamic",  # Permite añadir/eliminar filas
    column_config={"precio": st.column_config.NumberColumn(min_value=0)}
)
st.write("Datos actualizados:", df_editado)

Métricas, tablas estáticas y JSON

col1, col2 = st.columns(2)
col1.metric("Ingresos totales", "€ 45.230", delta="€ +3.210 vs mes anterior")
col2.metric("Tasa de error", "0,32%", delta="-0,05%", delta_color="inverse")

st.table(df.head(5))  # Tabla estática sin interactividad
st.json({"modelo": "RandomForest", "accuracy": 0.94, "features": ["edad", "salario"]})

Comprender cómo Streamlit gestiona el estado y el rendimiento es esencial para construir aplicaciones robustas y eficientes. Este módulo cubre los mecanismos fundamentales: st.session_state para persistir datos entre reruns, st.form para agrupar entradas, st.fragment para reruns parciales y los decoradores de caché @st.cache_data y @st.cache_resource.

st.session_state: persistencia entre reruns

Por defecto, cada rerun reinicia todas las variables Python. st.session_state es un diccionario mutable que persiste entre reruns:

import streamlit as st

if "contador" not in st.session_state:
    st.session_state.contador = 0

if st.button("Incrementar"):
    st.session_state.contador += 1

st.write(f"Contador: {st.session_state.contador}")

Callbacks: on_change y on_click

Los callbacks permiten ejecutar lógica cuando un widget cambia, antes de que se re-ejecute el script:

def actualizar_total():
    st.session_state.total = st.session_state.precio * st.session_state.cantidad

precio = st.number_input("Precio", key="precio", on_change=actualizar_total)
cantidad = st.number_input("Cantidad", key="cantidad", on_change=actualizar_total)
st.metric("Total", f"€ {st.session_state.get('total', 0):.2f}")

st.form: envío por lotes

Los formularios agrupan varios widgets y los envían todos de una vez, evitando reruns intermedios:

with st.form("filtros"):
    fecha_inicio = st.date_input("Desde")
    fecha_fin = st.date_input("Hasta")
    categoria = st.selectbox("Categoría", ["Todas", "A", "B", "C"])
    enviado = st.form_submit_button("Aplicar filtros")

if enviado:
    st.success(f"Filtros aplicados: {fecha_inicio} - {fecha_fin}, {categoria}")

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="✅")

El último módulo del curso cubre todo lo necesario para llevar las aplicaciones Streamlit a producción: arquitectura multipágina con la API moderna st.navigation, autenticación de usuarios con st.login, despliegue gratuito en Streamlit Community Cloud y containerización con Docker.

Aplicaciones multipágina con st.navigation

Desde Streamlit 1.36, la forma recomendada de crear apps multipágina es con st.navigation y st.Page:

# app.py (punto de entrada)
import streamlit as st

inicio = st.Page("pages/inicio.py", title="Inicio", icon="🏠")
analisis = st.Page("pages/analisis.py", title="Análisis", icon="📊")
configuracion = st.Page("pages/configuracion.py", title="Configuración", icon="⚙️")

pg = st.navigation([inicio, analisis, configuracion])
st.set_page_config(page_title="Mi Dashboard", page_icon="📈")
pg.run()

Para navegar programáticamente entre páginas:

st.switch_page("pages/analisis.py")

Autenticación con st.login

import streamlit as st

st.login()  # Muestra botón de login con el proveedor configurado

if st.user.is_logged_in:
    st.write(f"Bienvenido, {st.user.name}!")
    st.logout()
else:
    st.stop()

Streamlit Community Cloud

El despliegue en Streamlit Community Cloud es gratuito para repositorios públicos de GitHub:

1. Subir el proyecto a GitHub con app.py y requirements.txt en la raíz.
2. Acceder a share.streamlit.io e iniciar sesión con GitHub.
3. Seleccionar el repositorio, la rama y el archivo principal.
4. Añadir secretos en la sección "Secrets" del panel de la app.
5. Hacer clic en "Deploy" y esperar unos segundos.

# requirements.txt
streamlit>=1.42.0
pandas>=2.2.0
plotly>=5.22.0
scikit-learn>=1.5.0