В тази статия ще научим за streamlit библиотека за изграждане на уеб приложения за данни, без да се налага да познаваме каквито и да е предни технологии като HTML и CSS заедно с изходния код.

Въведение

Streamlit е инструмент с отворен код за изграждане и внедряване на приложения за данни с по-малко кодиране в сравнение с други технологии като HTML, CSS и JavaScript. Това е инструмент с нисък код, специално проектиран за изграждане на приложения за наука за данни. Той има функционалността да разгръща приложения в облака на общността и да управлява приложения без проблеми, всичко това безплатно.

Освен това Streamlit има функционалност, базирана на компоненти, за разработване на приложения за данни с минимален код и опции за свързване с много източници на данни, като AWS S3, електронни таблици, BigQuery, PostgresSQL, MS SQL Server, електронни таблици и др.

Ще разделим статията на три части: първата част ще ви преведе през основните API на Streamlit, последвана от внедряване на облака на Streamlit, а в последната част ще изградим приложението Streamlit за прогнозиране на тежестта на пътнотранспортните произшествия с кодови фрагменти. И така, нека се задълбочим в осветената библиотека, за да създадем уеб приложения за данни.

Забележка: Тази статия първоначално беше публикувана на 27-ия блогатон на Analytics Vidhya на 27 декември 2022 г. Вижте оригиналната статия, чийто автор съм. (Връзка към статията — Щракнете тук)

Съдържание:

  1. Основните API на библиотеката Streamlit
  2. Ръководство за внедряване на приложения в публичен облак Streamlit
  3. Разработвайте, изграждайте и внедрявайте опростено приложение с изходен код
  4. Заключение

Основните API на библиотеката Streamlit

Streamlit има много функции за разработване на потребителски интерфейс за приложения, захранвани с данни, с лесни за използване методи и джаджи. В този раздел ще разгледаме общ преглед на API на Streamlit и техните случаи на използване.

  1. Текстови елементи

Streamlit има функции, които ви позволяват да показвате текстово съдържание под формата на заглавия, заглавки, подзаглавия, обикновен текст и т.н. Текстовите елементи са полезни за показване на текстово съдържание на уебсайта със заглавия и подзаглавия. нека да разгледаме някои от примерите за текстови уиджети от streamlit

import streamlit as st

# Title widget
st.title('This is a title')

# plain text wideget
st.text("This is some text")

С помощта на осветени текстови елементи можем да показваме текстове, надписи и дори код или латексови формули, без да пишем обширен код. нека да видим и примерите за латекс и кодови джаджи.

# Code widget example in python language
code = '''def hello():
    print("Hello, Streamlit!")'''

st.code(code, language='python')

# Latex widget example
st.latex(r'''
    a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
    \sum_{k=0}^{n-1} ar^k =
    a \left(\frac{1-r^{n}}{1-r}\right)
    ''')

2. Елементи за показване на данните

По-често във всеки проект за наука за данни трябва да демонстрираме набори от данни, за да дадем кратко въведение върху какъв проблем с данните сте работили и колко сложен е наборът от данни. Streamlit има вградени функции, които позволяват на специалистите по данни да показват набори от данни, таблици и JSON обекти само с един ред код.

Нека да разгледаме примерите за уиджети за показване на данни:

# to display pandas dataframe object
import pandas as pd
import numpy as np
import streamlit as st

df = pd.DataFrame(
   np.random.randn(50, 20),
   columns=('col %d' % i for i in range(20)))

st.dataframe(df)

Нека да разгледаме пример за показване на JSON обект с помощта на функцията streamlit.

import streamlit as st

st.json({
    'foo': 'bar',
    'baz': 'boz',
    'stuff': [
        'stuff 1',
        'stuff 2',
        'stuff 3',
        'stuff 5',
    ],
})

3. Елементи на диаграмата

Streamlit предоставя серия от диаграми и графични модули за показване на визуализации на данни от страна на потребителя. Приспособленията за диаграми са наистина полезни за показване на прозрения във визуален формат. Може да се използва и за разработване на табла за управление.

Streamlit поддържа широка гама от графики и диаграми, включително линейни диаграми, диаграми с площи, фигурни обекти на matplotlib pyplot, диаграми и дори картографски диаграми, както и за показване на географски данни с помощта на API на Mapbox за земни изображения. нека да разгледаме някои примери за графични джаджи.

# Example of line chart
import pandas as pd
import numpy as np
import streamlit as st

chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

st.line_chart(chart_data)

import numpy as np
import plotly.figure_factory as ff
import streamlit as st

# Add histogram data
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# Group data together
hist_data = [x1, x2, x3]

group_labels = ['Group 1', 'Group 2', 'Group 3']

# Create distplot with custom bin_size
fig = ff.create_distplot(
        hist_data, group_labels, bin_size=[.1, .25, .5])

# Plot!
st.plotly_chart(fig, use_container_width=True)

4. Приспособления за въвеждане

Разработването на интерактивно уеб приложение, където потребителите могат да въвеждат определени стойности, е от решаващо значение за приложенията за данни. По-голямата част от приложенията за наука за данни и машинно обучение трябва да приемат някои данни от потребителите, за да върнат прогнози за желаните резултати на потребителите.

Streamlit предоставя редица функции за приемане на входове от потребителите за различни случаи на използване като текстови входове, избор на опции, квадратчета за отметка, въвеждане на дата, качване на файлове, цифрови и плъзгащи входове, както и разширени входове като входове на камера за разработване на различни приложения . нека да разгледаме някои примери за джаджи за въвеждане

# radio widget to take inputs from mulitple options
genre = st.radio(
    "What's your favorite movie genre",
    ('Comedy', 'Drama', 'Documentary'))

if genre == 'Comedy':
    st.write('You selected comedy.')
else:
    st.write("You didn't select comedy.")

# Usage of multiselect widget
import streamlit as st

options = st.multiselect(
    'What are your favorite colors',
    ['Green', 'Yellow', 'Red', 'Blue'],
    ['Yellow', 'Red'])

st.write('You selected:', options)

Също така вижте демонстрационното уеб приложение на същото, Щракнете тук

5. Елементи за медии и оформление

Много пъти, когато работите с неструктурирани данни като изображения, аудио и видео, може да се наложи да показвате медийните файлове в потребителския интерфейс, когато медийните приспособления помагат много. джаджи за оформление помагат да се разработи потребителски интерфейс, който е по-удобен за потребителя и може да се използва за персонализиране на потребителския интерфейс с помощта на други осветени джаджи.

# Displaying images on the front end
from PIL import Image
image = Image.open('sunrise.jpg')

st.image(image, caption='Sunrise by the mountains')

Можете да разгледате примера на уеб приложение, което показва изображение — Щракнете тук

Това не е краят на функционалностите на streamlit, streamlit има много други функции и методи за показване на диаграми, състоянието на приложението, контрол на потока и други помощни програми, за да направят уеб приложенията по-интерактивни за потребителите.

Ръководство за внедряване на приложения в публичен облак Streamlit

Внедряването на уеб приложения на streamlit е много по-лесно в сравнение с традиционните внедрявания на приложения. Streamlit cloud директно стартира приложения от Github repo и не изисква никакви настройки за конфигурация в бекенда.

Облакът на общността Streamlit автоматизира процеса на изграждане и внедрява приложения без никаква намеса от страна на разработчика. освен това streamlit поддържа конвейери за непрекъсната интеграция и непрекъснато разгръщане (CI/CD) и автоматично изтегля промяната на кода от хранилището на проекта. Освен това хубавото на streamlit е, че всички тези услуги са достъпни напълно безплатно.

Streamlit също така предоставя регистрационни файлове за изграждане за отстраняване на грешки по време на внедряването на уеб приложения в облака. Той предоставя изчерпателни изключения и документация за грешки за лесно разрешаване на често срещани проблеми. Ако проблемът продължава, можете да се свържете с екипа за поддръжка на streamlit, за да го разрешите.

Сега нека да разгледаме стъпките, които трябва да следвате, за да разположите вашите приложения за данни в облачен облак.

  1. За да разгърнете приложение, трябва да щракнете върху бутона „Ново приложение“ в горния десен ъгъл на вашето работно пространство и след това ще изскочи прозорецът по-долу.

2. След като отворите прозореца „Разполагане на приложение“, трябва да изберете хранилището, където се намират файловете на вашия проект, разклонението на файла на проекта и накрая основния път на файла, за да разположите приложението си с ЕДНО щракване!

Както можете да видите, ние сме избрали по-долу файлове за хранилище, клонове и пътеки, за да внедрим приложението за класифициране „Середност на пътния трафик“.

Освен това streamlit позволява разширени настройки за персонализиране на версията на Python и съхраняване на всякакви API ключове в зависимост от изискванията на вашия проект.

3. Сега, след като щракнете върху този бутон „Разполагане“, той автоматично ще разположи приложението в осветения публичен облак и ще инсталира всички зависимости, за да стартира приложението. в края на процеса на изграждане ще бъдете пренасочени към уеб портала чрез стандартния URL адрес, зададен от streamlit.

Структурата на URL адреса на streamlit приложението изглежда така:

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

Streamlit също поддържа различни източници на база данни като AWS S3, BigQuery, MongoDB, MS SQL сървър, MySQL и др.

Разработвайте, изграждайте и внедрявайте опростено приложение с изходен код

В този раздел ще разработим базирано на машинно обучение streamlit уеб приложение за прогнозиране на тежестта на пътя с цел намаляване на потенциално фаталните инциденти.

Наборът от данни за това приложение е събран от град Адис Абеба, Етиопия — полицейско управление от студент по магистърска степен за тяхната изследователска работа. наборът от данни имаше общо 32 функции и 12316 екземпляра за обучение и тестване на модели за машинно обучение. източникът на набора от данни може да бъде намерен тук.

В обхвата на тази статия ще включим само разработването и внедряването на уеб приложение. ще ни трябват следните файлове, за да бъдат включени в нашето хранилище на github.

  • app.py (Файл с главния път, който ще бъде разгърнат в облачен поток)
  • requrements.txt (За инсталиране на зависимости на приложението, за да може приложението да работи)
  • model.joblib (Разработен модел за извод)

Отделно от това ще ни трябва файлът на категоричния енкодер и изображението на дисплея, за да стартираме приложението. нека преминем през ръководството стъпка по стъпка за разгръщане на приложението в streamlit cloud.

  1. Подгответе файла requirements.txt за нашите зависимости на проекта. нашите зависимости на проекта са както следва:
# requirements.txt file to install app dependencies
pandas
numpy
streamlit
scikit-learn
joblib
shap
matplotlib
ipython
Pillow

2. Създайте файл app.py и импортирайте необходимите библиотеки според файла requirements.txt и заредете обекта на модела и категоричния енкодер във файла на Python.

# import necessary libraries
import pandas as pd
import numpy as np
import sklearn
import streamlit as st
import joblib
import shap
import matplotlib
from IPython import get_ipython
from PIL import Image

# load the model and encoder object into the python file.
model = joblib.load("rta_model_deploy3.joblib")
encoder = joblib.load("ordinal_encoder2.joblib")

# set up the streamlit page settings
st.set_option('deprecation.showPyplotGlobalUse', False)
st.set_page_config(page_title="Accident Severity Prediction App",
                page_icon="🚧", layout="wide")

3. Сега задайте опциите за въвеждане за всяка функция на приложението. имаме 7 категориални характеристики и 3 числови характеристики, за да вземем входни данни и да получим прогнозата като изход. за числова характеристика можем да зададем стойностите директно в параметрите на streamlit функции, което ще направим в следващия раздел на приложението.

#creating option list for dropdown menu
options_day = ['Sunday', "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
options_age = ['18-30', '31-50', 'Over 51', 'Unknown', 'Under 18']

# number of vehical involved: range of 1 to 7
# number of casualties: range of 1 to 8
# hour of the day: range of 0 to 23

options_types_collision = ['Vehicle with vehicle collision','Collision with roadside objects',
                           'Collision with pedestrians','Rollover','Collision with animals',
                           'Unknown','Collision with roadside-parked vehicles','Fall from vehicles',
                           'Other','With Train']

options_sex = ['Male','Female','Unknown']

options_education_level = ['Junior high school','Elementary school','High school',
                           'Unknown','Above high school','Writing & reading','Illiterate']

options_services_year = ['Unknown','2-5yrs','Above 10yr','5-10yrs','1-2yr','Below 1yr']

options_acc_area = ['Other', 'Office areas', 'Residential areas', ' Church areas',
       ' Industrial areas', 'School areas', '  Recreational areas',
       ' Outside rural areas', ' Hospital areas', '  Market areas',
       'Rural village areas', 'Unknown', 'Rural village areasOffice areas',
       'Recreational areas']

# features list for to take input from users
features = ['Number_of_vehicles_involved','Number_of_casualties','Hour_of_Day','Type_of_collision','Age_band_of_driver','Sex_of_driver',
       'Educational_level','Service_year_of_vehicle','Day_of_week','Area_accident_occured']

# set the app heading in markdown form
st.markdown("<h1 style='text-align: center;'>Accident Severity Prediction App 🚧</h1>", unsafe_allow_html=True)

4. И накрая, дефинирайте основната функция за приемане на входове с помощта на streamlit функции и задайте всички опции, които имаме за всички функции. ще използваме метода „st.form“, за да вземем всеки вход от потребителя.

def main():
# take input from users using st.form function
       with st.form("road_traffic_severity_form"):
              st.subheader("Pleas enter the following inputs:")
              # define variable to store user inputs
              No_vehicles = st.slider("Number of vehicles involved:",1,7, value=0, format="%d")
              No_casualties = st.slider("Number of casualities:",1,8, value=0, format="%d")
              Hour = st.slider("Hour of the day:", 0, 23, value=0, format="%d")
              collision = st.selectbox("Type of collision:",options=options_types_collision)
              Age_band = st.selectbox("Driver age group?:", options=options_age)
              Sex = st.selectbox("Sex of the driver:", options=options_sex)
              Education = st.selectbox("Education of driver:",options=options_education_level)
              service_vehicle = st.selectbox("Service year of vehicle:", options=options_services_year)
              Day_week = st.selectbox("Day of the week:", options=options_day)
              Accident_area = st.selectbox("Area of accident:", options=options_acc_area)
              
              # put a submit button to predict the output of the model
              submit = st.form_submit_button("Predict")

       if submit:
              input_array = np.array([collision,
                                   Age_band,Sex,Education,service_vehicle,
                                   Day_week,Accident_area], ndmin=2)

              # encode all the categorical features 
              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)              
              # predict the output using model object
              prediction = model.predict(pred_arr)
              
              if prediction == 0:
                     st.write(f"The severity prediction is Fatal Injury⚠")
              elif prediction == 1:
                     st.write(f"The severity prediction is serious injury")
              else:
                     st.write(f"The severity prediciton is slight injury")

              # Explainable AI using shap library for model explanation.
              st.subheader("Explainable AI (XAI) to understand predictions")  
              shap.initjs()
              shap_values = shap.TreeExplainer(model).shap_values(pred_arr)
              st.write(f"For prediction {prediction}") 
              shap.force_plot(shap.TreeExplainer(model).expected_value[0], shap_values[0],
                              pred_arr, feature_names=features, matplotlib=True,show=False).savefig("pred_force_plot.jpg", bbox_inches='tight')
              img = Image.open("pred_force_plot.jpg")
              # image to display on website 
              st.image(img, caption='Model explanation using shap'
if __name__ == '__main__':
   main()

5. Сега просто прехвърлете всички файлове в хранилището на Github и разположете файла app.py в осветен облак. можете да видите окончателно внедреното уеб приложение, като използвате тази връзка

Заключение

В тази статия научихме пълно ръководство за разработване на приложение с помощта на библиотеката streamlit, както и за изграждане и внедряване на уеб приложения с помощта на облака на общността streamlit безплатно. Нека да разгледаме няколко извода от тази статия.

  1. Изчерпателен преглед на основните API на streamlit библиотеката за разработване на преден край за уеб приложения без познаване на HTML, CSS и JS.
  2. Ръководство за внедряване на уеб приложение от хранилището на GitHub без никакви настройки за конфигурация на бекенда от разработчика.
  3. Пълен код за разработване и внедряване на уеб приложение за машинно обучение за прогнозиране на тежестта на пътнотранспортното произшествие.