Streamlit: Interfaz UI

Streamlit destaca por la facilidad con la que permite crear interfaces de usuario interactivas con pocas líneas de código. En este módulo exploraremos los componentes disponibles para construir interfaces potentes y atractivas sin necesidad de conocimientos avanzados en desarrollo web.

La biblioteca ofrece un amplio conjunto de elementos de interfaz que permiten transformar rápidamente scripts de Python en aplicaciones web interactivas. Estos componentes se pueden clasificar en diferentes categorías según su funcionalidad.

Empecemos por los componentes básicos de texto, fundamentales para estructurar cualquier aplicación:

import streamlit as st

# Títulos y encabezados
st.title("Aplicación de demostración")
st.header("Sección principal")
st.subheader("Subsección")

# Texto simple
st.text("Este es un texto plano sin formato")

# Texto con formato Markdown
st.markdown("**Texto en negrita** y *texto en cursiva*")

# Texto con colores y estados
st.success("Operación completada con éxito")
st.info("Información importante")
st.warning("Advertencia: revisa los datos")
st.error("Error: no se pudo completar la operación")

# Código
st.code("import numpy as np\nnp.random.randn(10)")

# Fórmulas matemáticas con LaTeX
st.latex(r"Y = \alpha + \beta X + \epsilon")

# Notas al margen
st.caption("Nota: esto es una aplicación de ejemplo")

# Métricas con indicador de cambio
st.metric(label="Temperatura", value="24°C", delta="-1.2°C")

Los componentes st.metric son especialmente útiles para mostrar indicadores clave con su variación, utilizando colores automáticamente para señalar si el cambio es positivo o negativo.

Para visualizar datos estructurados, Streamlit ofrece varias opciones optimizadas:

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

# Crear un dataframe de ejemplo
df = pd.DataFrame({
    'Categoría': ['A', 'B', 'C', 'D'],
    'Valores': [10, 20, 30, 40],
    'Porcentaje': [25, 30, 15, 30]
})

# Mostrar como dataframe interactivo (con filtros y ordenación)
st.dataframe(df, use_container_width=True)

# Mostrar como tabla estática
st.table(df)

# Mostrar un diccionario o JSON
st.json({
    "nombre": "Aplicación Streamlit",
    "versión": 1.0,
    "características": ["fácil", "rápida", "interactiva"]
})

La función st.dataframe permite mostrar datos tabulares con opciones interactivas como ordenación y redimensionamiento de columnas. Para casos donde solo se necesita visualizar datos estáticos, st.table ofrece una alternativa más simple.

Uno de los aspectos más potentes de Streamlit es la variedad de widgets para capturar la entrada del usuario:

import streamlit as st
import datetime

# Entrada de texto
nombre = st.text_input("Nombre", placeholder="Escribe tu nombre")
contraseña = st.text_input("Contraseña", type="password")
comentario = st.text_area("Comentarios", placeholder="Escribe tus comentarios aquí")

# Entrada numérica
edad = st.number_input("Edad", min_value=0, max_value=120, value=25)
precio = st.number_input("Precio (€)", min_value=0.0, max_value=1000.0, 
                         value=19.99, step=0.01, format="%.2f")

# Deslizadores
nivel = st.slider("Nivel de satisfacción", 0, 10, 7)
rango = st.slider("Rango de precios", 0.0, 100.0, (25.0, 75.0))

# Fechas y horas
fecha = st.date_input("Fecha de nacimiento", datetime.date(2000, 1, 1))
hora = st.time_input("Hora de la cita", datetime.time(9, 0))

# Subir archivos
archivo = st.file_uploader("Sube un archivo", type=["csv", "txt", "xlsx"])
imagen = st.file_uploader("Sube una imagen", type=["jpg", "jpeg", "png"])
archivos_multiples = st.file_uploader("Sube varios documentos", 
                                      type=["pdf", "docx"], 
                                      accept_multiple_files=True)

# Selector de color
color = st.color_picker("Elige un color", "#00AABB")

# Botones y descargas
if st.button("Enviar formulario"):
    st.success(f"¡Hola {nombre}! Tu formulario ha sido enviado.")

# Generar archivo para descarga
if st.download_button(label="Descargar informe", 
                      data="Contenido del informe en texto plano",
                      file_name="informe.txt",
                      mime="text/plain"):
    st.success("Archivo descargado correctamente")

Estos componentes de entrada permiten recopilar diferentes tipos de datos de los usuarios. Cada widget devuelve el valor seleccionado o introducido, que puede ser utilizado directamente en la lógica de la aplicación.

Para permitir al usuario elegir entre varias opciones, Streamlit ofrece widgets específicos:

import streamlit as st

# Casilla de verificación
mostrar_grafico = st.checkbox("Mostrar gráfico", value=True)
if mostrar_grafico:
    st.write("Aquí se mostraría el gráfico")

# Toggle (interruptor)
modo_oscuro = st.toggle("Modo oscuro", value=False)
st.write(f"Modo oscuro: {'activado' if modo_oscuro else 'desactivado'}")

# Botones de opción
opcion = st.radio(
    "Selecciona una opción",
    ["Opción A", "Opción B", "Opción C"],
    index=0,
    horizontal=True
)

# Lista desplegable
ciudad = st.selectbox(
    "Selecciona tu ciudad",
    ["Madrid", "Barcelona", "Valencia", "Sevilla", "Bilbao"],
    index=0,
    placeholder="Elige una ciudad"
)

# Selección múltiple
intereses = st.multiselect(
    "Selecciona tus intereses",
    ["Deportes", "Música", "Cine", "Tecnología", "Viajes", "Gastronomía"],
    default=["Tecnología"]
)

Estos componentes de selección son esenciales para crear interfaces que permitan a los usuarios elegir opciones de manera intuitiva. Los widgets como st.selectbox o st.multiselect incluyen funcionalidades avanzadas como búsqueda y filtrado, que facilitan la navegación en listas extensas.

La organización del layout es fundamental para crear interfaces de usuario efectivas. Streamlit proporciona varias opciones:

import streamlit as st

# Columnas para organizar elementos en horizontal
col1, col2 = st.columns(2)
with col1:
    st.header("Primera columna")
    st.write("Contenido de la primera columna")
    
with col2:
    st.header("Segunda columna")
    st.write("Contenido de la segunda columna")

# Columnas con diferentes proporciones
col1, col2, col3 = st.columns([1, 2, 1])
with col1:
    st.write("Columna pequeña")
with col2:
    st.write("Columna grande")
with col3:
    st.write("Columna pequeña")

# Tabs (pestañas)
tab1, tab2, tab3 = st.tabs(["Pestaña 1", "Pestaña 2", "Pestaña 3"])
with tab1:
    st.write("Contenido de la primera pestaña")
with tab2:
    st.write("Contenido de la segunda pestaña")
with tab3:
    st.write("Contenido de la tercera pestaña")

# Contenedores para agrupar elementos
with st.container():
    st.write("Este es un contenedor")
    st.checkbox("Un checkbox dentro del contenedor")

# Expansores para ocultar/mostrar contenido
with st.expander("Haz clic para ver más información"):
    st.write("Este contenido está inicialmente oculto")
    st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png", width=200)

# Barra lateral (sidebar)
with st.sidebar:
    st.title("Configuración")
    st.slider("Parámetro", 0, 100, 50)
    opciones = st.radio("Modo", ["Básico", "Avanzado"])

# Dividir la pantalla verticalmente
st.divider()

Los componentes de layout permiten crear interfaces más organizadas y estructuradas. Las columnas y pestañas son fundamentales para aprovechar el espacio disponible, mientras que los expansores ayudan a ocultar información secundaria que el usuario puede desplegar cuando la necesite.

Los formularios permiten agrupar varios componentes de entrada para procesarlos todos a la vez:

import streamlit as st

# Formulario básico
with st.form(key="formulario_contacto"):
    nombre = st.text_input("Nombre")
    email = st.text_input("Email")
    mensaje = st.text_area("Mensaje")
    enviado = st.form_submit_button("Enviar mensaje")
    
    if enviado:
        if nombre and email and mensaje:
            st.success(f"Gracias {nombre}, hemos recibido tu mensaje.")
        else:
            st.error("Por favor, completa todos los campos.")

# Formulario con columnas
st.write("## Registro de usuario")
with st.form(key="formulario_registro"):
    col1, col2 = st.columns(2)
    
    with col1:
        nombre_usuario = st.text_input("Nombre de usuario")
        contraseña = st.text_input("Contraseña", type="password")
    
    with col2:
        email_usuario = st.text_input("Email")
        repetir_contraseña = st.text_input("Repetir contraseña", type="password")
    
    acepto_terminos = st.checkbox("Acepto los términos y condiciones")
    registro_enviado = st.form_submit_button("Registrarme")
    
    if registro_enviado:
        if nombre_usuario and contraseña and email_usuario and repetir_contraseña:
            if contraseña == repetir_contraseña and acepto_terminos:
                st.success(f"Usuario {nombre_usuario} registrado correctamente.")
            else:
                st.error("Revisa los datos: las contraseñas no coinciden o no has aceptado los términos.")
        else:
            st.error("Todos los campos son obligatorios.")

Los formularios (st.form) son especialmente útiles cuando se necesita recopilar varios datos antes de procesarlos. A diferencia de los widgets normales, que se ejecutan inmediatamente con cada interacción, los formularios solo envían los datos cuando se pulsa el botón de envío (st.form_submit_button).

Streamlit facilita la inclusión de elementos multimedia como imágenes, audio y vídeo:

import streamlit as st
import numpy as np
from PIL import Image

# Mostrar imágenes
st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png", 
         caption="Logo de Streamlit",
         width=300)

# También puedes crear y mostrar imágenes generadas
array_imagen = np.random.randint(0, 255, (100, 100, 3), dtype=np.uint8)
st.image(array_imagen, caption="Imagen generada a