Introducción a los componentes de Streamlit

Name: Olaf Källström

Updated on 24/7/2023

Streamlit es una potente biblioteca de código abierto que permite a los científicos de datos y desarrolladores crear aplicaciones web interactivas y fáciles de usar para el aprendizaje automático y la ciencia de datos. En el corazón de estas aplicaciones se encuentran los componentes de Streamlit, un conjunto de widgets interactivos que permiten a los usuarios manipular e interactuar con los datos presentados.

Los componentes de Streamlit son los bloques de construcción de las aplicaciones de Streamlit. Proporcionan la interfaz de usuario, lo que permite a los usuarios interactuar con la aplicación de diversas formas. Desde simples botones y casillas de verificación hasta formularios y tablas más complejas, los componentes de Streamlit ofrecen una amplia gama de posibilidades para crear aplicaciones interactivas y dinámicas de ciencia de datos.

¿Has oído hablar de esta increíble herramienta de análisis y visualización de datos que convierte tu aplicación de Streamlit en Tableau?

PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo alguno. Echa un vistazo a este increíble video producido por Cómo explorar datos con PyGWalker en Python (opens in a new tab) que demuestra los pasos detallados para potenciar tu aplicación de Streamlit con esta poderosa biblioteca de visualización de datos en Python!

Un agradecimiento especial a Sven y su gran contribución (opens in a new tab) a la comunidad de PyGWalker.

Además, también puedes visitar la página de GitHub de PyGWalker (opens in a new tab) para obtener más ejemplos de PyGWalker.

Widgets interactivos en Streamlit

En Streamlit, los widgets son el medio principal de interacción del usuario. Permiten a los usuarios ingresar datos, hacer selecciones y controlar el comportamiento de la aplicación. Streamlit ofrece una variedad de widgets, incluyendo botones, casillas de verificación, inputs de texto, deslizadores y más. Cada widget tiene un propósito específico y se puede personalizar para adaptarse a las necesidades de la aplicación.

Los widgets en Streamlit no solo se utilizan para la entrada de datos del usuario. También se pueden utilizar para mostrar datos y otra información. Por ejemplo, un widget de tabla se puede utilizar para mostrar un marco de datos, mientras que un widget de markdown se puede utilizar para mostrar texto formateado. Esta flexibilidad hace que los widgets sean una herramienta poderosa para crear aplicaciones interactivas y dinámicas de ciencia de datos.

Profundidad en los componentes de Streamlit

Botón de Streamlit

Un botón de Streamlit es un componente simple pero poderoso. Permite a los usuarios activar acciones en la aplicación, como ejecutar un script o actualizar una visualización. El componente de botón se define utilizando la función st.button, que toma un argumento de tipo string para la etiqueta del botón.

import streamlit as st
 
if st.button('Haz clic aquí'):
    st.write('¡Botón clickeado!')

En este ejemplo, cuando se hace clic en el botón etiquetado como 'Haz clic aquí', se muestra el mensaje '¡Botón clickeado!' en la pantalla. Este mecanismo simple se puede utilizar para activar acciones más complejas, lo que hace que el botón sea un componente versátil en las aplicaciones de Streamlit.

Columnas de Streamlit

Las columnas de Streamlit te permiten organizar el diseño de tu aplicación de manera más efectiva. Con la función st.columns, puedes dividir tu aplicación en varias columnas y colocar diferentes componentes en cada columna.

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('Esta es la columna 1')
 
with col2:
    st.write('Esta es la columna 2')

En este ejemplo, la aplicación se divide en dos columnas. La primera columna muestra el texto 'Esta es la columna 1' y la segunda columna muestra 'Esta es la columna 2'. Esto te permite crear diseños más complejos y mejorar la experiencia del usuario de tu aplicación.

Formulario de Streamlit

Los formularios de Streamlit son una forma de agrupar widgets de entrada relacionados y enviar sus valores todos juntos. Esto es particularmente útil cuando tienes varios inputs que deben enviarse juntos.

import streamlit as st
 
with st.form(key='mi_formulario'):
    texto_input = st.text_input(label='Ingresa algo de texto')
    boton_submit = st.form_submit_button(label='Enviar')

En este ejemplo, se crea un formulario con un campo de entrada de texto y un botón de envío. Cuando se hace clic en el botón de envío, todos los inputs dentro del formulario se envían juntos.

Tabla de Streamlit

Las tablas de Streamlit ofrecen una forma de mostrar datos en un formato estructurado. Puedes crear una tabla en Streamlit utilizando la función st.table, que toma como entrada un marco de datos (data frame) o un diccionario.

import streamlit as st
import pandas as pd
 
data = {'Nombre': ['John', 'Anna', 'Peter'],
        'Edad': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

En este ejemplo, se crea un marco de datos con la biblioteca pandas y se muestra como una tabla en la aplicación de Streamlit. La tabla muestra claramente los datos en filas y columnas, lo que facilita su comprensión por parte de los usuarios.

Casilla de verificación de Streamlit

Una casilla de verificación de Streamlit es un componente que permite a los usuarios alternar entre dos opciones binarias. Se puede utilizar para controlar el comportamiento de la aplicación, como mostrar u ocultar información adicional. El componente de casilla de verificación se define utilizando la función st.checkbox, que toma un argumento de tipo string para la etiqueta de la casilla de verificación.

import streamlit as st
 
if st.checkbox('Mostrar detalles'):

st.write('Aquí están los detalles...')


En este ejemplo, cuando se marca la casilla de verificación etiquetada como 'Mostrar detalles', se muestra en la pantalla el mensaje 'Aquí están los detalles...'. Este mecanismo se puede utilizar para controlar la visibilidad de información adicional basada en la preferencia del usuario.

### Streamlit Entrada de Texto

La entrada de texto de Streamlit es un componente que permite a los usuarios ingresar una línea de texto. Se puede utilizar para capturar la entrada del usuario, como una consulta de búsqueda o una respuesta de formulario. El componente de entrada de texto se define utilizando la función `st.text_input`, que toma un argumento de cadena para la etiqueta de entrada.

```python
import streamlit as st

titulo = st.text_input('Título de la película', 'La vida de Brian')
st.write('El título de la película actual es', titulo)

En este ejemplo, se crea un campo de entrada de texto etiquetado como 'Título de la película' con un valor predeterminado de 'La vida de Brian'. Se puede acceder al valor del campo de entrada de texto y utilizarlo en la aplicación, como se muestra en el mensaje que muestra el título de la película actual.

Streamlit Markdown

El markdown de Streamlit es un componente que te permite mostrar texto formateado de acuerdo con la sintaxis de Markdown. Esto se puede utilizar para mostrar encabezados, texto en negrita o cursiva, listas, enlaces y más. El componente de markdown se define utilizando la función st.markdown, que toma un argumento de cadena que contiene el texto formateado con Markdown.

import streamlit as st
 
st.markdown('## Este es un encabezado')
st.markdown('Este es un texto en **negrita**')

En este ejemplo, se muestra un encabezado y un texto en negrita utilizando la sintaxis de Markdown. Esto te permite crear un texto enriquecido y formateado en tus aplicaciones de Streamlit.

Streamlit Multiselect

El multiselect de Streamlit es un componente que permite a los usuarios seleccionar múltiples opciones de una lista. Se puede utilizar para filtrar datos, controlar la visualización de información y más. El componente de multiselect se define utilizando la función st.multiselect, que toma un argumento de cadena para la etiqueta de entrada y una lista de opciones.

import streamlit as st
 
opciones = st.multiselect(
    '¿Cuáles son tus colores favoritos?',
    ['Verde', 'Amarillo', 'Rojo', 'Azul'],
    ['Amarillo', 'Rojo']
)
st.write('Has seleccionado:', opciones)

En este ejemplo, se crea un campo de multiselect etiquetado como '¿Cuáles son tus colores favoritos?' con cuatro opciones. El usuario puede seleccionar múltiples opciones, y las opciones seleccionadas se muestran en la pantalla.

Streamlit Contenedor

Los contenedores de Streamlit son una forma de agrupar componentes relacionados. Se pueden usar para crear diseños más complejos y para gestionar la visualización de componentes de manera más organizada. El componente de contenedor se define utilizando la función st.container, que no toma ningún argumento.

import streamlit as st
 
with st.container():
    st.write('Esto está dentro del contenedor')
    st.button('Haz clic')

En este ejemplo, se crea un contenedor con un componente de texto y un botón dentro de él. Los componentes dentro del contenedor se muestran juntos, lo que te permite crear diseños más complejos y mejorar la organización de tu aplicación.

Mejores Prácticas para Utilizar Componentes Streamlit

Cuando incorpores componentes de Streamlit en tus aplicaciones, es crucial seguir ciertas mejores prácticas para garantizar un rendimiento y una experiencia de usuario óptimos. Aquí te mostramos algunos puntos clave a considerar:

Experiencia de Usuario: Siempre prioriza la experiencia de usuario. Organiza tus componentes de manera intuitiva y proporciona etiquetas e instrucciones claras. Esto no solo mejora la usabilidad, sino que también agrega contexto a cada componente.

## Buena práctica: etiquetas e instrucciones claras
st.markdown('### Por favor, ingresa tus datos')
nombre = st.text_input('Nombre')
email = st.text_input('Email')

Rendimiento: Ten en cuenta las posibles implicaciones de rendimiento de tus componentes. Algunos componentes, como formularios y tablas, pueden consumir muchos recursos y pueden ralentizar tu aplicación si no se usan de manera prudente. Esfuerzate por optimizar tus componentes y usarlos de manera moderada para mantener una experiencia de usuario fluida y receptiva.

## Mala práctica: tabla grande
st.table(dataframe_grande)
 
## Buena práctica: tabla optimizada con paginación
for i in range(0, len(dataframe_grande), 100):
    st.table(dataframe_grande[i:i+100])

Pruebas: Asegúrate de probar exhaustivamente tus componentes. Deben funcionar como se espera y manejar la entrada del usuario de manera elegante. Esto incluye realizar pruebas para casos extremos y manejar los errores de manera apropiada.

## Buena práctica: manejo de errores
try:
    resultado = alguna_funcion(entrada_usuario)
except AlgúnError as e:
    st.error(f'Ha ocurrido un error: {e}')

Aplicaciones del Mundo Real de los Componentes Streamlit

Los componentes de Streamlit se utilizan en una multitud de aplicaciones del mundo real, mejorando la interactividad y la participación del usuario. Aquí hay algunos ejemplos:

Ciencia de Datos: Los componentes de Streamlit se utilizan a menudo para crear paneles interactivos y herramientas de exploración de datos. Los usuarios pueden usar controles deslizantes, casillas de verificación y menús desplegables para filtrar y manipular datos, mientras que las tablas y los gráficos se utilizan para mostrar los resultados.

## Ejemplo: herramienta de exploración de datos
datos_seleccionados = datos[st.multiselect('Seleccionar columnas', datos.columns)]
st.line_chart(datos_seleccionados)

Aprendizaje Automático: Los componentes de Streamlit se utilizan para crear herramientas interactivas de exploración de modelos. Los usuarios pueden ingresar parámetros, ejecutar modelos y ver resultados, todo dentro de la misma aplicación. Esto facilita la comprensión e interpretación de los modelos de aprendizaje automático.

## Ejemplo: herramienta de exploración de modelos
params = st.sidebar.slider('Parámetro del modelo', 0, 10)
modelo = entrenar_modelo(params)
st.write('Puntuación del modelo:', modelo.score(X, y))

Desarrollo Web: Los componentes de Streamlit se utilizan para crear aplicaciones web dinámicas e interactivas. Desde formularios y botones simples hasta diseños complejos con múltiples contenedores, los componentes de Streamlit ofrecen una amplia gama de posibilidades para crear experiencias web atractivas.

## Ejemplo: aplicación web
with st.container():
st.header('¡Bienvenido a mi aplicación!')
    if st.button('Haz clic en mí'):
        st.balloons()

En todas estas aplicaciones, la clave es utilizar los componentes de Streamlit de una manera que mejore la experiencia del usuario, haga que la aplicación sea más interactiva y permita al usuario interactuar con los datos de manera significativa.

Aplicaciones del mundo real de los componentes de Streamlit

Los componentes de Streamlit se utilizan en una amplia gama de aplicaciones del mundo real. Por ejemplo, en ciencia de datos, se utilizan con frecuencia para crear paneles interactivos y herramientas de exploración de datos. Los usuarios pueden utilizar deslizadores, casillas de verificación y menús desplegables para filtrar y manipular datos, mientras que las tablas y gráficas se utilizan para mostrar los resultados.

En aprendizaje automático, los componentes de Streamlit se utilizan para crear herramientas interactivas de exploración de modelos. Los usuarios pueden introducir parámetros, ejecutar modelos y ver resultados, todo dentro de la misma aplicación. Esto facilita la comprensión e interpretación de los modelos de aprendizaje automático.
En desarrollo web, los componentes de Streamlit se utilizan para crear aplicaciones web dinámicas e interactivas. Desde formularios y botones simples hasta diseños complejos con múltiples contenedores, los componentes de Streamlit ofrecen una amplia gama de posibilidades para crear experiencias web atractivas.

Conclusión

Los componentes de Streamlit son los bloques de construcción de aplicaciones interactivas de ciencia de datos. Ofrecen una amplia gama de posibilidades para crear interfaces de usuario dinámicas y atractivas, desde simples botones y casillas de verificación hasta formularios y tablas más complejas. Al entender y utilizar eficazmente estos componentes, puedes crear aplicaciones poderosas que permitan a los usuarios interactuar con los datos de manera significativa.

Ya sea que seas un científico de datos que quiera crear un panel interactivo, un ingeniero de aprendizaje automático que quiera construir una herramienta de exploración de modelos, o un desarrollador web que quiera crear una aplicación web dinámica, los componentes de Streamlit te cubren. Recuerda siempre considerar la experiencia del usuario, tener en cuenta el rendimiento y probar exhaustivamente tus componentes. Con estas mejores prácticas en mente, estás en camino de dominar los componentes de Streamlit.

¿Has oído hablar de esta increíble herramienta de análisis y visualización de datos, que convierte tu aplicación Streamlit en Tableau?

PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a insertar fácilmente una IU similar a Tableau en tu propia aplicación Streamlit sin esfuerzo.

(opens in a new tab)

Preguntas frecuentes

1. ¿Cuáles son las desventajas de Streamlit?

Si bien Streamlit es una herramienta poderosa para construir aplicaciones interactivas de ciencia de datos, tiene algunas limitaciones. Por ejemplo, no está diseñado para crear aplicaciones complejas de varias páginas y no admite autenticación de usuarios o gestión de sesiones de forma predeterminada. Además, como Streamlit se ejecuta en el lado del servidor, puede no ser tan receptivo como las aplicaciones de JavaScript del lado del cliente para conjuntos de datos grandes o cálculos complejos.

2. ¿Cómo se estructura una aplicación Streamlit?

Una aplicación Streamlit se estructura en torno al concepto de "ejecución de script". Cuando un usuario interactúa con un widget, el script completo se vuelve a ejecutar de arriba a abajo. Esto hace que el código sea simple y lineal, similar a un script de Python tradicional. Sin embargo, también puedes utilizar funciones y clases para estructurar tu código, y puedes utilizar el decorador st.cache para almacenar en caché los resultados de cálculos largos y evitar que se vuelvan a ejecutar innecesariamente.

3. ¿Cómo puedo optimizar el rendimiento de mi aplicación Streamlit?

Hay varias formas de optimizar el rendimiento de tu aplicación Streamlit. Una de ellas es utilizar el decorador st.cache para almacenar en caché los resultados de cálculos largos. Otra es utilizar la función st.beta_columns para crear múltiples columnas y paralelizar la renderización de tus componentes. También puedes utilizar la función st.experimental_memo para memorizar llamadas a funciones y evitar recomputaciones innecesarias. Por último, ten en cuenta el tamaño de tus datos y la complejidad de tus cálculos, y considera utilizar un servidor más potente si es necesario.