Crear pestañas dinámicas en Streamlit: comienza rápidamente
- Name
- Olaf Källström
Published on
Streamlit es una biblioteca popular de Python de código abierto que permite a los desarrolladores crear aplicaciones web interactivas de manera rápida y sencilla. Es especialmente apreciada por los científicos de datos por su simplicidad y eficiencia en la construcción de aplicaciones impulsadas por datos. Una de las características clave que ofrece Streamlit es la capacidad de crear pestañas, que son esenciales para estructurar el diseño de tus aplicaciones y mejorar la navegación del usuario.
¿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 integrar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo. Echa un vistazo a este increíble video producido por Sven de Coding is Fun (opens in a new tab) que muestra los pasos detallados para potenciar tu aplicación de Streamlit con esta potente biblioteca de visualización de datos de Python!
Agradecimientos especiales 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.
Parte 1. ¿Qué son las pestañas de Streamlit?
Las pestañas en Streamlit son contenedores que pueden contener cualquier contenido que desees crear en tu aplicación. Proporcionan una forma sencilla de navegar entre grupos de contenido relacionado, lo que hace que tu aplicación sea más organizada y fácil de usar. Por ejemplo, puedes usar pestañas para separar diferentes secciones de tu experimento de aprendizaje automático, como visualización de datos, entrenamiento de modelo y análisis de resultados.
Parte 2. ¿Por qué usar pestañas en Streamlit?
El propósito principal de usar pestañas en Streamlit es agrupar contenido relacionado en vistas independientes.Esto no solo mejora la experiencia del usuario al proporcionar una interfaz limpia y organizada, sino que también permite un flujo de trabajo más eficiente. Por ejemplo, en un proyecto de aprendizaje automático, puedes tener pestañas separadas para el preprocesamiento de datos, el entrenamiento del modelo, las métricas de evaluación y las predicciones.
Parte 3. Cómo crear pestañas en Streamlit
Para crear pestañas en Streamlit, primero debes crear una lista de títulos de pestañas. Cada opción en esta lista corresponde al nombre de una pestaña. Luego, para cada pestaña, escribes el contenido que deseas mostrar. Aquí tienes un ejemplo sencillo:
import streamlit as st
st.title('Mi aplicación')
# Crear pestañas
titulos_pestanas = ['Tema A', 'Tema B', 'Tema C']
pestaña1, pestaña2, pestaña3 = st.tabs(titulos_pestanas)
# Agregar contenido a cada pestaña
with pestaña1:
st.header('Tema A')
st.write('Contenido del tema A')
with pestaña2:
st.header('Tema B')
st.write('Contenido del tema B')
with pestaña3:
st.header('Tema C')
st.write('Contenido del tema C')En este ejemplo, hemos creado tres pestañas tituladas 'Tema A', 'Tema B' y 'Tema C'. Cada pestaña muestra un encabezado y algo de texto.
Parte 4. Crear múltiples pestañas en Streamlit
Crear múltiples pestañas en Streamlit sigue el mismo proceso que crear una sola pestaña. Simplemente agregas más opciones a la lista de títulos de pestañas y luego agregas contenido para cada pestaña. Esto es especialmente útil cuando tienes mucho contenido relacionado que quieres agrupar en secciones separadas.
Por ejemplo, supongamos que estás construyendo una aplicación de Streamlit para un proyecto de aprendizaje automático. Es posible que tengas secciones separadas para el preprocesamiento de datos, el entrenamiento del modelo, la evaluación del modelo y la visualización de los resultados. Cada una de estas secciones se puede agrupar en su propia pestaña, lo que hace que tu aplicación sea más organizada y más fácil de navegar.
Aquí tienes un ejemplo de cómo crear múltiples pestañas en Streamlit:
import streamlit as st
st.title('Mi proyecto de aprendizaje automático')
# Crear pestañas
titulos_pestanas = ['Preprocesamiento de datos', 'Entrenamiento del modelo', 'Evaluación del modelo', 'Visualización de resultados']
pestanas = st.tabs(titulos_pestanas)
# Agregar contenido a la pestaña de Preprocesamiento de datos
with pestañas[0]:
st.header('Preprocesamiento de datos')
st.write('Aquí es donde puedes preprocesar tus datos.')
# Agregar contenido a la pestaña de Entrenamiento del modelo
with pestañas[1]:
st.header('Entrenamiento del modelo')
st.write('Aquí es donde puedes entrenar tu modelo.')
# Agregar contenido a la pestaña de Evaluación del modelo
with pestañas[2]:
st.header('Evaluación del modelo')
st.write('Aquí es donde puedes evaluar tu modelo.')
# Agregar contenido a la pestaña de Visualización de resultados
with pestañas[3]:
st.header('Visualización de resultados')
st.write('Aquí es donde puedes visualizar tus resultados.')En este ejemplo, hemos creado cuatro pestañas para un proyecto de aprendizaje automático. Cada pestaña corresponde a una sección diferente del proyecto, y cada pestaña contiene su propio contenido.
Puedes agregar tantas pestañas como necesites, y cada pestaña puede contener cualquier tipo de contenido, como texto, imágenes, gráficos y widgets. Esto hace que las pestañas de Streamlit sean una herramienta versátil para crear aplicaciones interactivas y dinámicas.
Crear múltiples pestañas en Streamlit es una forma sencilla y efectiva de mejorar la funcionalidad y la experiencia del usuario de tus aplicaciones. Así que empieza a explorar esta función y ve cómo puede beneficiar a tus proyectos.
Parte 5. Crear pestañas dinámicas en Streamlit
Las pestañas dinámicas en Streamlit son pestañas que se crean y representan dinámicamente en función del contenido de un servidor o API. Esto es ventajoso cuando el número de pestañas y su contenido no se conocen de antemano y pueden cambiar con el tiempo. Aquí hay un ejemplo de cómo crear pestañas dinámicas en Streamlit:
import streamlit as st
st.title('Mi Aplicación')
# Función para obtener el contenido de la pestaña desde el servidor
def obtener_contenido_de_pestaña():
return [
{'titulo': 'Tema A', 'contenido': 'Contenido del Tema A'},
{'titulo': 'Tema B', 'contenido': 'Contenido del Tema B'},
{'titulo': 'Tema C', 'contenido': 'Contenido del Tema C'},
]
# Obtener el contenido de la pestaña desde el servidor
contenido_pestaña = obtener_contenido_de_pestaña()
# Crear las pestañas
nombres_pestañas = [contenido['titulo'] for contenido in contenido_pestaña]
pestañas = st.tabs(nombres_pestañas)
# Iterar a través de cada pestaña y construir el contenido
for pestaña, contenido_pestaña in zip(pestañas, contenido_pestaña):
with pestaña:
st.header(contenido_pestaña['titulo'])
st.write(contenido_pestaña['contenido'])En este ejemplo, primero definimos una función obtener_contenido_de_pestaña que imita lo que podría devolver un servidor o API. Esta función devuelve una lista de diccionarios, cada uno conteniendo un título de la pestaña y el contenido de la pestaña. Luego creamos las pestañas e iteramos a través de ellas para escribir el contenido.
Par 6. Ejemplos Prácticos de Pestañas en Streamlit
Las pestañas en Streamlit son una característica versátil que se puede aprovechar en una gran cantidad de aplicaciones, especialmente en el ámbito de la ciencia de datos y el aprendizaje automático. Aquí hay un análisis detallado de algunos de los usos prácticos de las pestañas en Streamlit:
Pestañas en Streamlit para Experimentos de Aprendizaje Automático
Imagine que está inmerso en un experimento de aprendizaje automático. Tiene preprocesamiento de datos, entrenamiento de modelos, evaluación de modelos y visualización de resultados, todo sucediendo al mismo tiempo. Es un torbellino de etapas y procesos que podrían volverse abrumadores fácilmente. Pero aquí es donde las pestañas en Streamlit vienen al rescate. Agrupando cada etapa en pestañas separadas, no solo facilita la navegación a través del experimento para los usuarios, sino que también mejora su comprensión de todo el proceso.
Por ejemplo, puede tener una aplicación de Streamlit con pestañas como esta:
import streamlit as st
st.title('Mi Experimento de Aprendizaje Automático')
# Crear las pestañas
titulos_pestañas = ['Preprocesamiento de Datos', 'Entrenamiento del Modelo', 'Evaluación del Modelo', 'Visualización de Resultados']
pestañas = st.tabs(titulos_pestañas)
# Agregar contenido a cada pestaña
with pestañas[0]:
st.header('Preprocesamiento de Datos')
st.write('Aquí preprocesamos los datos...')
with pestañas[1]:
st.header('Entrenamiento del Modelo')
st.write('Aquí entrenamos el modelo...')
with pestañas[2]:
st.header('Evaluación del Modelo')
st.write('Aquí evaluamos el modelo...')
with pestañas[3]:
st.header('Visualización de Resultados')
st.write('Aquí visualizamos los resultados...')En este ejemplo, cada etapa del experimento de aprendizaje automático tiene su propia pestaña dedicada, lo que hace que la aplicación esté más organizada y sea fácil de usar.
Pestañas en Streamlit para Visualización de Datos
La visualización de datos es el corazón y el alma del análisis de datos y el aprendizaje automático. Es el arte de pintar una imagen con sus datos, y las pestañas en Streamlit son el lienzo perfecto para esta obra maestra. Con las pestañas en Streamlit, puede crear pestañas separadas para diferentes tipos de visualizaciones, como gráficos de barras, gráficos de dispersión y mapas de calor. Esto permite a los usuarios cambiar fácilmente entre diferentes visualizaciones y obtener información de los datos.
Aquí hay un ejemplo de cómo podría usar las pestañas en Streamlit para la visualización de datos:
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
# Cargar algunos datos
datos = pd.read_csv('datos.csv')
st.title('Mi Aplicación de Visualización de Datos')
# Crear las pestañas
titulos_pestañas = ['Gráfico de Barras', 'Gráfico de Dispersión', 'Mapa de Calor']
pestañas = st.tabs(titulos_pestañas)
# Agregar contenido a cada pestaña
with pestañas[0]:
st.header('Gráfico de Barras')
st.bar_chart(datos)
with pestañas[1]:
st.header('Gráfico de Dispersión')
fig, ax = plt.subplots()
ax.scatter(datos['x'], datos['y'])
st.pyplot(fig)
with pestañas[2]:
st.header('Mapa de Calor')
st.heatmap(datos.corr())En este ejemplo, cada pestaña muestra un tipo diferente de visualización de datos, lo que permite a los usuarios explorar los datos desde diferentes perspectivas.
Pestañas en Streamlit para Creación de Tablero de Control
Las pestañas en Streamlit se pueden usar para crear paneles de control interactivos. Por ejemplo, puede tener una pestaña para las entradas del usuario, otra pestaña para mostrar los datos y otra pestaña para mostrar los resultados del análisis de datos. Esto hace que el panel de control esté más organizado y sea fácil de usar.
Aquí hay un ejemplo de un panel de control de Streamlit con pestañas:
import streamlit as st
st.title('Mi Panel de Control')
# Crear las pestañas
titulos_pestañas = ['Entradas del Usuario', 'Visualización de Datos', 'Análisis de Datos']
pestañas = st.tabs(titulos_pestañas)
# Agregar contenido a cada pestaña
with pestañas[0]:
st.header('Entradas del Usuario')
st.text_input('Ingrese algún texto')
st.number_input('Ingrese un número')
with pestañas[1]:
st.header('Visualización de Datos')
st.table({'columna1': [1, 2, 3], 'columna2': [4, 5, 6]})
with pestañas[2]:
st.header('Análisis de Datos')
st.line_chart([1, 2, 3, 4, 5])En este ejemplo, la pestaña 'Entradas del Usuario' contiene widgets de entrada, la pestaña 'Visualización de Datos' muestra una tabla de datos y la pestaña 'Análisis de Datos' muestra un gráfico de línea.
Pestañas en Streamlit para Organización de Proyectos
En un proyecto grande con varios componentes, las pestañas en Streamlit se pueden usar para organizar los componentes en secciones separadas. Esto no solo hace que el proyecto sea más manejable, sino que también mejora la experiencia del usuario al proporcionar una interfaz clara y organizada.
Por ejemplo, si está construyendo una aplicación grande con varios componentes como carga de datos, limpieza de datos, análisis de datos y visualización de datos, podría organizar estos componentes en pestañas separadas como esta:
import streamlit as st
st.title('Mi Proyecto Grande')
# Crear las pestañas
titulos_pestañas = ['Carga de Datos', 'Limpieza de Datos', 'Análisis de Datos', 'Visualización de Datos']
pestañas = st.tabs(titulos_pestañas)
# Agregar contenido a cada pestaña
with pestañas[0]:Carga de datos
st.translate('Data Loading') st.translate('Here we load the data...')
with tabs[1]: st.translate('Data Cleaning') st.translate('Here we clean the data...')
with tabs[2]: st.translate('Data Analysis') st.translate('Here we analyze the data...')
with tabs[3]: st.translate('Data Visualization') st.translate('Here we visualize the data...')
En este ejemplo, cada componente del proyecto tiene su propia pestaña dedicada, lo que hace que la aplicación esté más organizada y sea más fácil de navegar.
## Parte 7. Conceptos avanzados en las pestañas de Streamlit
Las pestañas de Streamlit ofrecen una serie de características avanzadas que pueden mejorar la funcionalidad y la experiencia del usuario de sus aplicaciones. Aquí hay algunos conceptos avanzados en las pestañas de Streamlit:
### Contenedor de pestañas de Streamlit y sus usos
Un contenedor de pestañas de Streamlit es un contenedor que contiene el contenido de una pestaña. Puede agregar cualquier contenido a un contenedor de pestañas, como texto, imágenes, gráficos y widgets. El contenedor de pestañas proporciona una forma fácil de agrupar contenido relacionado y mejorar la navegación del usuario.
Por ejemplo, puede tener una aplicación de Streamlit con un contenedor de pestañas como este:
```python
import streamlit as st
st.title('Mi Aplicación')
# Crear un contenedor de pestañas
tabs = st.tabs(['Pestaña 1', 'Pestaña 2', 'Pestaña 3'])
# Agregar contenido a la primera pestaña
with tabs[0]:
st.header('Pestaña 1')
st.write('Este es el contenido de la Pestaña 1.')
# Agregar contenido a la segunda pestaña
with tabs[1]:
st.header('Pestaña 2')
st.write('Este es el contenido de la Pestaña 2.')
# Agregar contenido a la tercera pestaña
with tabs[2]:
st.header('Pestaña 3')
st.write('Este es el contenido de la Pestaña 3.')En este ejemplo, cada pestaña es un contenedor que contiene su propio contenido, y los usuarios pueden cambiar entre pestañas para ver diferentes contenidos.
Diseño y diseño de pestañas de Streamlit
Streamlit proporciona una API elegante para crear y diseñar aplicaciones interactivas en Python. El diseño de pestañas es una de las características de diseño que ofrece Streamlit. Con un diseño de pestañas, puede organizar su contenido en pestañas separadas, lo que hace que su aplicación esté más organizada y sea más fácil de usar.
Aquí hay un ejemplo de una aplicación de Streamlit con un diseño de pestañas:
import streamlit as st
st.title('Mi Aplicación')
# Crear un diseño de pestañas
tabs = st.tabs(['Pestaña 1', 'Pestaña 2', 'Pestaña 3'])
# Agregar contenido a la primera pestaña
with tabs[0]:
st.header('Pestaña 1')
st.write('Este es el contenido de la Pestaña 1.')
# Agregar contenido a la segunda pestaña
with tabs[1]:
st.header('Pestaña 2')
st.write('Este es el contenido de la Pestaña 2.')
# Agregar contenido a la tercera pestaña
with tabs[2]:
st.header('Pestaña 3')
st.write('Este es el contenido de la Pestaña 3.')En este ejemplo, la aplicación tiene un diseño de pestañas con tres pestañas, y cada pestaña contiene su propio contenido.
Navegación y interfaz de usuario con pestañas de Streamlit
Las pestañas de Streamlit proporcionan una fácil navegación entre grupos de contenido relacionado. La transición entre pestañas es rápida y suave, lo que proporciona una excelente experiencia de usuario. Además, puede crear pestañas de forma dinámica e insertar contenido en ellas, lo cual es especialmente útil cuando el número de pestañas y su contenido no se conocen de antemano.
Por ejemplo, puede tener una aplicación de Streamlit donde el número de pestañas y su contenido sean determinados por la entrada del usuario:
import streamlit as st
st.title('Mi Aplicación Dinámica')
# Obtener el número de pestañas del usuario
num_tabs = st.number_input('Ingrese el número de pestañas', min_value=1, max_value=10, value=3)
# Crear pestañas
tab_titles = [f'Pestaña {i+1}' for i in range(num_tabs)]
tabs = st.tabs(tab_titles)
# Agregar contenido a cada pestaña
for i in range(num_tabs):
with tabs[i]:
st.header(f'Pestaña {i+1}')
st.write(f'Este es el contenido de la Pestaña {i+1}.')En este ejemplo, el usuario puede especificar el número de pestañas, y la aplicación crea dinámicamente las pestañas y agrega contenido a ellas.
Contenido y visualización con pestañas de Streamlit
Las pestañas de Streamlit son básicamente contenedores para cualquier cosa que desee crear en su aplicación. Proporcionan una forma de visualizar una variedad de contenido, como métricas, gráficos, tablas y widgets de entrada. Esto hace que las pestañas de Streamlit sean una herramienta versátil para crear aplicaciones interactivas y dinámicas.
Aquí hay un ejemplo de una aplicación de Streamlit que utiliza pestañas para mostrar diferentes tipos de contenido:
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
# Cargar algunos datos
data = pd.read_csv('data.csv')
st.title('Mi Aplicación de Visualización de Datos')
# Crear pestañas
tab_titles = ['Métricas', 'Gráfico', 'Tabla', 'Entrada']
tabs = st.tabs(tab_titles)
# Agregar contenido a cada pestaña
with tabs[0]:
st.header('Métricas')
st.metric('Métrica 1', 123)
st.metric('Métrica 2', 456)
with tabs[1]:
st.header('Gráfico')
fig, ax = plt.subplots()
ax.plot(data['x'], data['y'])
st.pyplot(fig)
with tabs[2]:
st.header('Tabla')
st.line_chart(data)
with tabs[3]:
st.header('Entrada')
st.text_input('Ingrese algún texto')
st.number_input('Ingrese un número')En este ejemplo, la pestaña 'Métricas' muestra métricas, la pestaña 'Gráfico' muestra un gráfico, la pestaña 'Tabla' muestra un gráfico de líneas y la pestaña 'Entrada' contiene widgets de entrada.
Conclusión
Las pestañas de Streamlit son una característica poderosa que puede mejorar en gran medida la funcionalidad y la experiencia del usuario de sus aplicaciones. Ya sea que esté trabajando en un proyecto de ciencia de datos, creando un panel de control o construyendo una aplicación compleja, las pestañas de Streamlit pueden ayudarlo a organizar su contenido y hacer que su aplicación sea más fácil de usar. Entonces, comience a explorar las pestañas de Streamlit hoy mismo y vea cómo pueden beneficiar sus proyectos.
¿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 de usuario similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.
Preguntas frecuentes
¿Streamlit admite pestañas?
Sí, Streamlit admite pestañas. Puedes crear varias pestañas en tu aplicación de Streamlit para organizar tu contenido y mejorar la navegación del usuario.
¿Cómo se posicionan los elementos en Streamlit?
En Streamlit, se posicionan los elementos escribiéndolos en el orden en el que deseas que aparezcan. Streamlit se ejecuta de arriba a abajo, por lo que el orden en el que escribas tus elementos será el orden en el que aparecerán en tu aplicación.
¿Cómo funciona Streamlit?
Streamlit funciona convirtiendo scripts de Python en aplicaciones web interactivas. Proporciona un conjunto de API de alto nivel para crear elementos interactivos, como deslizadores, casillas de verificación y pestañas. Cuando ejecutas tu script de Streamlit, se inicia un servidor web y se abre una ventana del navegador que apunta al servidor.
¿Cuál es el trabajo de Streamlit en Python?
Streamlit es una biblioteca de Python para crear aplicaciones web interactivas. Permite a los desarrolladores de Python y a los científicos de datos crear aplicaciones para el análisis de datos, el aprendizaje automático y la visualización de datos sin necesidad de conocer HTML, CSS o JavaScript.