Logotipo de Zephyrnet

Tutorial Streamlit: creación de aplicaciones web con ejemplos de código

Fecha:

Este artículo fue publicado como parte del Blogatón de ciencia de datos.

iluminado

Introducción

Streamlit es una herramienta de código abierto para crear e implementar aplicaciones de datos con menos codificación en comparación con otras tecnologías front-end como HTML, CSS y JavaScript. Es una herramienta de código bajo diseñada específicamente para crear aplicaciones de ciencia de datos.

Además, la biblioteca Streamlit tiene funciones y métodos en Python puro para desarrollar aplicaciones de datos con

Dividiremos el artículo en tres partes: la primera parte lo lleva a través de las API principales de Streamlit, seguida de la implementación en la nube de Streamlit, y en la última parte, crearemos la aplicación Streamlit para predecir la gravedad de los accidentes de tránsito. Entonces, profundicemos en la biblioteca streamlit para crear aplicaciones web de datos.

API principales de Streamlit Library

La biblioteca Streamlit proporciona widgets y componentes de diseño de interfaz de usuario para desarrollar aplicaciones web basadas en datos. En th

1. Elementos de texto

Streamlit tiene funciones que le permiten mostrar contenido textual en forma de títulos, encabezados, subtítulos, texto sin formato, etc. Los elementos de texto son útiles para mostrar contenido de texto en el sitio web con títulos y subtítulos. Veamos algunos de los ejemplos de widgets de texto de streamlit.

importar streamlit como st # Widget de título st.title('Esto es un título')
SALIDA DE CÓDIGO
# texto plano wideget st.text("Esto es algo de texto")
SALIDA DE CÓDIGO

Usando elementos de texto streamlit, podemos mostrar textos, subtítulos e incluso código o fórmulas de látex sin escribir un código extenso. Veamos también los ejemplos de widgets de látex y código.

# Ejemplo de widget de código en lenguaje python

código = '''def hola(): print("¡Hola, Streamlit!")''' st.code(código, idioma='python')
SALIDA DE CÓDIGO
# Ejemplo de widget de látex st.latex(r''' a + ar + ar^2 + ar^3 + cdots + ar^{n-1} = sum_{k=0}^{n-1} ar^k = a izquierda(frac{1-r^{n}}{1-r}derecha) ''')

2. Elementos de visualización de datos

La mayoría de las veces, en cualquier proyecto de ciencia de datos, tenemos que mostrar conjuntos de datos para brindar una breve descripción general del problema de datos en el que trabajamos y la complejidad del conjunto de datos. Streamlit tiene funciones integradas que permiten a los científicos de datos mostrar conjuntos de datos, tablas y objetos JSON con solo una línea de código.

Veamos los ejemplos de widgets de visualización de datos:

# para mostrar el objeto de marco de datos de pandas
Código Python:

st.marco de datos (df)

iluminado

la salida del código anterior

Veamos un ejemplo para mostrar un objeto JSON usando la función streamlit.

importar streamlit como st st.json({ 'foo': 'bar', 'baz': 'boz', 'cosas': [ 'cosas 1', 'cosas 2', 'cosas 3', 'cosas 5', ], })
iluminado

3. Elementos del gráfico

Streamlit proporciona una serie de gráficos y widgets de gráficos para mostrar visualizaciones de datos en el lado del usuario. Los widgets de gráficos son realmente útiles para mostrar información en un formato visual. También se utiliza para desarrollar cuadros de mando.

Streamlit es compatible con muchos diagramas y gráficos, incluidos gráficos de líneas, gráficos de áreas, objetos de figura de pyplot de matplotlib, gráficos de diagramas e incluso gráficos de mapas para mostrar datos geográficos utilizando las API de imágenes terrestres de Mapbox. Veamos algunos ejemplos de widgets de gráficos.

# Ejemplo de gráficos de líneas

importar pandas como pd importar numpy como np importar streamlit como st chart_data = pd.DataFrame( np.random.randn(20, 3), column=['a', 'b', 'c']) st.line_chart(chart_data )
import numpy as np import plotly.figure_factory as ff import streamlit as st # Agregar datos de histograma x1 = np.random.randn(200) - 2 x2 = np.random.randn(200) x3 = np.random.randn(200) + 2 # Agrupar datos hist_data = [x1, x2, x3] group_labels = ['Grupo 1', 'Grupo 2', 'Grupo 3'] # Crear distplot con bin_size personalizado fig = ff.create_distplot( hist_data, group_labels, bin_size =[.1, .25, .5]) # ¡Trama! st.plotly_chart(fig, use_container_width=Verdadero)
iluminado

4. Widgets de entrada

Desarrollar una aplicación web interactiva donde los usuarios puedan ingresar ciertos valores es crucial para las aplicaciones de datos. Se requiere que la mayoría de las aplicaciones de ciencia de datos y aprendizaje automático tomen algunas entradas de los usuarios para devolver las predicciones de los resultados deseados a esos usuarios.

Streamlit proporciona varias funciones para tomar entradas de los usuarios para varios casos de uso, como entradas basadas en texto, selección de opciones, casillas de verificación, entradas de fecha, carga de archivos, entradas numéricas, entradas deslizantes y entradas avanzadas como entradas de cámara para desarrollar varias aplicaciones. Veamos algunos ejemplos de widgets de entrada.

# widget de radio para tomar entradas de múltiples opciones de género = st.radio( "¿Cuál es tu género de película favorito", ('Comedia', 'Drama', 'Documental')) if género == 'Comedia': st.write(' Seleccionó comedia.') else: st.write("No seleccionó comedia").
# Uso del widget de selección múltiple import streamlit as st options = st.multiselect( '¿Cuáles son sus colores favoritos', ['Verde', 'Amarillo', 'Rojo', 'Azul'], ['Amarillo', 'Rojo'] ) st.write('Usted seleccionó:', opciones)

Además, echa un vistazo a la aplicación web de demostración de la misma: Haga clic aquí

5. Elementos multimedia y de diseño

Cuando trabaja con datos no estructurados como imágenes, audio y video, es posible que deba mostrar los archivos multimedia en la interfaz de usuario. Ahí es cuando los widgets multimedia resultan útiles. Los widgets de diseño ayudan a desarrollar una interfaz de usuario más fácil de usar y se pueden utilizar para personalizar la interfaz de usuario utilizando muchas funciones optimizadas.

# Mostrar imágenes en el front-end de PIL import Image image = Image.open('sunrise.jpg') st.image(image, caption='Sunrise by the mountains')
TRANSMISIÓN
                                                                        

Puede consultar el ejemplo de una aplicación web que muestra una imagen: Haga clic aquí

Este no es el final de las funcionalidades de streamlit, tiene muchas otras funciones y métodos para mostrar gráficos, el estado de la aplicación, el flujo de control y otras utilidades para hacer que las aplicaciones web sean más interactivas para los usuarios.

Guía para implementar aplicaciones en Streamlit Community Cloud

La implementación de aplicaciones web en streamlit es mucho más fácil en comparación con las implementaciones de aplicaciones tradicionales. Streamlit Cloud lanza aplicaciones directamente desde el repositorio de Github y no requiere ajustes de configuración en el backend ni definir rutas para su aplicación.

Streamlit Community Cloud automatiza el proceso de creación e implementa aplicaciones sin la intervención del desarrollador. Además, Streamlit admite canalizaciones de integración continua e implementación continua (CI/CD) y extrae automáticamente los cambios de código del repositorio del proyecto. Como proyecto de nube comunitaria y de código abierto, Streamlit proporciona todos los servicios de forma gratuita.

Streamlit también proporciona registros de compilación para solucionar errores durante la implementación de aplicaciones web en la nube. Proporciona excepciones completas y documentación de errores para resolver problemas comunes con facilidad. Si el problema persiste, comuníquese con el equipo de soporte de Streamlit para obtener ayuda.

Ahora, veamos los pasos para implementar sus aplicaciones de datos en la nube optimizada.

1. Para implementar una aplicación, debe hacer clic en el botón "Nueva aplicación" en la esquina superior derecha de su espacio de trabajo y luego aparecerá la siguiente ventana.

iluminado
                                                                                 Imagen: por autor

2. Después de abrir la ventana "Implementar una aplicación", debe seleccionar el repositorio donde residen los archivos de su proyecto, la rama del archivo del proyecto y, finalmente, la ruta del archivo principal para implementar su aplicación con UN solo clic.

Como puede ver, hemos seleccionado a continuación los archivos de repositorio, rama y ruta para implementar la aplicación de clasificación "Road Traffic Severity".

                                                                             Imagen: por autor

Aparte de esto, streamlit permite configuraciones avanzadas para personalizar la versión de python y almacenar cualquier clave API según los requisitos de su proyecto.

3. Una vez que haga clic en el botón "Implementar", implementará automáticamente la aplicación en la nube pública iluminada e instalará todas las dependencias para ejecutar la aplicación. al final del proceso de creación, será redirigido al portal web a través de la URL estándar asignada por streamlit.

La estructura de la URL de la aplicación streamlit se ve a continuación:

https://[user name]-[repo name]-[branch name]-[app path]-[short hash].streamlit.app

Streamlit también es compatible con varias fuentes de bases de datos, como AWS S3, BigQuery, MongoDB, servidor MS SQL, MySQL y más.

Desarrolle, construya e implemente una aplicación Streamlit con código fuente

En esta sección, desarrollaremos una aplicación web simplificada para predecir la gravedad de los accidentes de tráfico y reducir los accidentes potencialmente mortales.

El conjunto de datos para esta aplicación fue recopilado del Departamento de Policía de la subciudad de Addis Abeba por un estudiante de maestría para su trabajo de investigación. El conjunto de datos tenía 32 características y 12316 instancias para entrenar y probar modelos de aprendizaje automático. La fuente del conjunto de datos se puede encontrar esta página.

Para el alcance de este artículo, solo incluiremos el desarrollo y la implementación de una aplicación web. Veamos los archivos que se incluirán en nuestro repositorio de GitHub.

1. aplicación.py (El archivo de ruta principal se implementará en la nube streamlit)

2. requerimientos.txt (para instalar las dependencias de la aplicación para que se ejecute la aplicación)

3. modelo. libreta de trabajo (modelo desarrollado para inferencia)

También necesitaremos el archivo y la imagen del codificador categórico para ejecutar la aplicación. Repasemos la guía paso a paso para implementar la aplicación en Streamlight Cloud.

# archivo requirements.txt para instalar las dependencias de la aplicación

pandas numpy streamlit scikit-learn joblib shap matplotlib ipython Cojín

2. Cree un archivo app.py e importe las bibliotecas necesarias según el archivo requirements.txt y cargue el modelo y el objeto codificador categórico en el archivo python.

# importar bibliotecas necesarias importar pandas como pd importar numpy como np importar sklearn importar streamlit como st importar joblib importar shap importar matplotlib desde IPython importar get_ipython desde PIL importar imagen # cargar el modelo y el objeto codificador en el archivo python. model = joblib.load("rta_model_deploy3.joblib") encoder = joblib.load("ordinal_encoder2.joblib") # establecer la configuración de la página streamlit st.set_option('deprecation.showPyplotGlobalUse', False) st.set_page_config(page_title=" Aplicación de predicción de gravedad de accidentes", page_icon="🚧", layout="wide")

3. Ahora, configure las opciones de entrada para cada característica de la aplicación. Tenemos 7 características categóricas y 3 características numéricas para tomar entradas y obtener la predicción como salida. Para una característica numérica, podemos establecer los valores directamente en los parámetros de las funciones iluminadas que veremos en la siguiente sección de la aplicación.

#creando una lista de opciones para el menú desplegable options_day = ['Domingo', "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"] options_age = ['18-30', '31- 50', 'Mayores de 51', 'Desconocido', 'Menos de 18'] # número de vehículos involucrados: rango de 1 a 7 # número de víctimas: rango de 1 a 8 # hora del día: rango de 0 a 23 options_types_collision = ['Colisión de vehículo con vehículo','Colisión con objetos en la carretera', 'Colisión con peatones','Vuelco','Colisión con animales', 'Desconocido','Colisión con vehículos estacionados en la carretera','Caída de vehículos' , 'Otro','Con tren'] options_sex = ['Masculino','Femenino','Desconocido'] options_education_level = ['Escuela secundaria','Escuela primaria','Escuela secundaria', 'Desconocido','Arriba escuela secundaria','Escritura y lectura','Analfabetos'] options_services_year = ['Desconocido','2-5 años','Más de 10 años','5-10 años','1-2 años','Menos de 1 año'] options_acc_area = ['Otros', 'Áreas de oficina', 'Áreas residenciales', 'Áreas de iglesia', 'Áreas industriales', 'Áreas escolares', 'Áreas recreativas', 'Fuera de las áreas rurales', 'Áreas de hospitales', 'Áreas de mercado', 'Áreas de aldeas rurales', 'Desconocido', 'Áreas de aldeas ruralesÁreas de oficina', 'Áreas recreativas'] # lista de características para recibir información de los usuarios características = [' Number_of_vehicles_involved', 'Number_of_casualties', 'Hour_of_Day', 'Type_of_colision', 'Age_band_of_driver', 'Sex_of_driver', 'Educational_level', 'Service_year_of_vehicle', 'Day_of_week', 'Area_accident_occured'] # establecer el encabezado de la aplicación en forma de descuento st.markdown ("

Aplicación de predicción de gravedad de accidentes 🚧

“, unsafe_allow_html=Verdadero)

4. Finalmente, defina la función principal para tomar entradas usando métodos streamlit y configure las opciones que tenemos para todas las funciones. usaremos el “st. form” para tomar cada entrada del usuario.

def main(): # toma información de los usuarios usando la función st.form with st.form("road_traffic_severity_form"): st.subheader("Por favor ingrese las siguientes entradas:") # define la variable para almacenar las entradas del usuario No_vehicles = st.slider ("Número de vehículos involucrados:",1,7, valor=0, formato="%d") No_bajas = st.slider("Número de víctimas:",1,8, valor=0, formato="%d ") Hora = st.slider("Hora del día:", 0, 23, valor=0, formato="%d") colisión = st.selectbox("Tipo de colisión:",opciones=opciones_tipos_colisión) Edad_banda = st.selectbox("¿Grupo de edad del conductor?:", options=options_age) Sexo = st.selectbox("Sexo del conductor:", options=options_sex) Educación = st.selectbox("Educación del conductor:",options=options_education_level ) service_vehicle = st.selectbox("Año de servicio del vehículo:", options=options_services_year) Day_week = st.selectbox("Día de la semana:", options=options_day) Accident_area = st.selectbox("Área del accidente:", options=options_acc_area) # poner un botón de envío para predecir la salida del modelo enviado t = st.form_submit_button("Predict") si se envía: input_array = np.array([colisión, Age_band,Sex,Education,service_vehicle, Day_week,Accident_area], ndmin=2) # codificar todas las características categóricas encoded_arr = list(encoder .transform(input_array).ravel()) num_arr = [No_vehicles,No_casualties,Hour] pred_arr = np.array(num_arr + encoded_arr).reshape(1,-1) # predecir la salida usando el objeto modelo predicción = model.predict( pred_arr) if predicción == 0: st.write(f"La predicción de gravedad es una lesión fatal⚠") elif predicción == 1: st.write(f"La predicción de gravedad es una lesión grave") else: st.write(f "La predicción de gravedad es una lesión leve") # IA explicable usando la biblioteca shap para la explicación del modelo. st.subheader("IA explicable (XAI) para comprender las predicciones") shap.initjs() shap_values ​​= shap.TreeExplainer(modelo).shap_values(pred_arr) st.write(f"Para predicción {predicción}") shap.force_plot( shap.TreeExplainer(modelo).expected_value[0], shap_values[0], pred_arr, feature_names=features, matplotlib=True,show=False).savefig("pred_force_plot.jpg", bbox_inches='tight') img = Imagen. open("pred_force_plot.jpg") # imagen para mostrar en el sitio web st.image(img, caption='Explicación del modelo usando shap' if __name__ == '__main__': main()

5. Empuje todos los archivos a la Repositorio de Github e implemente el archivo app.py en la nube streamlit. Puede ver la aplicación web implementada final usando este liga

Conclusión

En este artículo, aprendimos una guía completa para desarrollar una aplicación utilizando la biblioteca Streamlit, así como para crear e implementar aplicaciones web utilizando la nube de la comunidad Streamlit de forma gratuita. Veamos algunas conclusiones de este artículo.

  1. descripción general completa de las API principales de la biblioteca streamlit para desarrollar el front-end para aplicaciones web sin saber HTML, CSS o JS
  2. Una guía para implementar una aplicación web desde el repositorio de GitHub sin preocuparse por los ajustes de configuración del backend.
  3. Un código completo para desarrollar e implementar una aplicación web de aprendizaje automático para predecir la gravedad de los accidentes de tránsito.

Los medios que se muestran en este artículo no son propiedad de Analytics Vidhya y se utilizan a discreción del autor.

punto_img

café vc

vidacienciav

Información más reciente

punto_img