Python en Streamlit : Tutoriel

Qu'est-ce que Streamlit ?

Streamlit est un framework gratuit et open-source qui permet de créer et de partager rapidement de superbes applications web d'apprentissage automatique et de science des données.

Il s'agit d'une bibliothèque basée sur Python spécifiquement conçue pour les ingénieurs en apprentissage automatique. Les scientifiques des données ou les ingénieurs en apprentissage automatique ne sont pas des développeurs web et ils n'ont pas envie de passer des semaines à apprendre à utiliser ces frameworks pour créer des applications web. Ils souhaitent plutôt un outil plus facile à apprendre et à utiliser, pour autant qu'il puisse afficher des données et collecter les paramètres nécessaires à la modélisation.

Streamlit vous permet de créer une application à l'apparence étonnante avec seulement quelques lignes de code.

Pourquoi les data scientists devraient-ils utiliser Streamlit ?

L'avantage de Streamlit est que vous n'avez même pas besoin de connaître les bases du développement web pour commencer ou pour créer votre première application web. Si vous êtes un adepte de la science des données et que vous souhaitez déployer vos modèles facilement, rapidement et avec seulement quelques lignes de code, Streamlit est un bon choix.

L'un des aspects importants de la réussite d'une application consiste à la doter d'une interface utilisateur efficace et intuitive. La plupart des applications modernes, gourmandes en données, sont confrontées au défi de créer rapidement une interface utilisateur efficace, sans passer par des étapes compliquées. Streamlit est une bibliothèque Python open-source prometteuse, qui permet aux développeurs de créer des interfaces utilisateur attrayantes en un rien de temps.

Streamlit est le moyen le plus simple, en particulier pour les personnes qui n'ont pas de connaissances en matière d'interface, d'intégrer leur code dans une application web :

• Aucune expérience ou connaissance en matière d'interface (html, js, css) n'est requise.
• Vous n'avez pas besoin de passer des jours ou des mois à créer une application web, vous pouvez créer une très belle application d'apprentissage automatique ou de science des données en seulement quelques heures ou même quelques minutes.
• Il est compatible avec la majorité des bibliothèques Python (par exemple pandas, matplotlib, seaborn, plotly, Keras, PyTorch, SymPy(latex)).
• Moins de code est nécessaire pour créer des applications web étonnantes.
• La mise en cache des données simplifie et accélère les pipelines de calcul.

Comment utiliser Streamlit

Installer Streamlit

Sous Windows :

1. Installez Anaconda et créez votre environnement

2. Ouvrir le terminal

3. Tapez cette commande dans le terminal pour installer Streamlit :

pip install streamlit

4. Testez si l'installation a fonctionné :

streamlit hello

Lorsque vous tapez cette commande dans le terminal, la page ci-dessous s'ouvre automatiquement :

Sur macOS :

1. Installez pip :

sudo easy_install pip

2. Installez pipenv :

pip3 install pipenv

3. Créez votre environnement. Ouvrez votre dossier de projet :

cd project_folder_name

4. Créez un environnement pipenv :

pipenv shell

5. Tapez cette commande pour installer Streamlit :

pip install streamlit

Testez si l'installation a fonctionné :

streamlit hello

Sous Linux :

1. Installez pip :

sudo apt-get install python3-pip

2. Installez pipenv :

pip3 install pipenv

3. Créez votre environnement. Ouvrez votre dossier de projet :

cd project_folder_name

4. Créez un environnement pipenv :

pipenv shell

5. Tapez cette commande pour installer Streamlit

pip install streamlit

6. Testez si l'installation a fonctionné :

streamlit hello

Comment exécuter votre code Streamlit

streamlit run file_name.py

Les commandes Streamlit sont faciles à écrire et à comprendre. Une simple commande vous permet d'afficher des textes, des médias, des widgets, des graphiques, etc.

Afficher les textes avec Streamlit

Dans un premier temps, nous verrons comment ajouter du texte à votre application Streamlit, et quelles sont les différentes commandes pour ajouter des textes.

st.write(): Cette fonction est utilisée pour ajouter n'importe quoi à une application web, d'une chaîne formatée à des graphiques dans matplotlib figure, Altair charts, plotly figure, data frame, Keras model, et d'autres.

import streamlit as stst.write("Hello ,let's learn how to build a streamlit app together")

st.title(): Cette fonction vous permet d'ajouter le titre de l'application. st.header(): Cette fonction est utilisée pour définir l'en-tête d'une section. st.markdown(): Cette fonction est utilisée pour définir la démarque d'une section. st.subheader(): Cette fonction est utilisée pour définir le sous-titre d'une section. st.caption(): Cette fonction est utilisée pour écrire une légende. st.code(): Cette fonction permet de définir un code. st.latex(): Cette fonction permet d'afficher des expressions mathématiques formatées en LaTeX.

import streamlit as stst.title("This is the app title")st.header("This is the header")st.markdown("This is the markdown")st.subheader("This is the subheader")st.caption("This is the caption")st.code("x = 2021")st.latex(r''' a+a r^1+a r^2+a r^3 ''')

Afficher une image, une vidéo ou un fichier audio avec Streamlit

Vous ne trouverez pas de fonctions aussi simples que les fonctions Streamlit pour afficher des images, des vidéos et des fichiers audio. Voyons comment afficher des médias avec Streamlit !

st.image(): Cette fonction permet d'afficher une image. st.audio(): Cette fonction permet d'afficher un fichier audio. st.video(): Cette fonction permet d'afficher une vidéo.

st.image("kid.jpg", caption="A kid playing")st.audio("audio.mp3")st.video("video.mp4")

Widgets de saisie

Les widgets sont les composants les plus importants de l'interface utilisateur. Streamlit dispose de plusieurs widgets qui vous permettent d'intégrer l'interactivité directement dans vos applications grâce à des boutons, des curseurs, des entrées de texte, etc.

st.checkbox(): Cette fonction renvoie une valeur booléenne. Lorsque la case est cochée, elle renvoie la valeur True, sinon elle renvoie la valeur False. st.button(): Cette fonction est utilisée pour afficher un widget de bouton. st.radio(): Cette fonction est utilisée pour afficher un widget de bouton radio. st.selectbox(): Cette fonction permet d'afficher un widget sélectionné. st.multiselect(): Cette fonction est utilisée pour afficher un widget multisélection. st.select_slider(): Cette fonction permet d'afficher un widget de sélection. st.slider(): Cette fonction permet d'afficher un widget de type "slider".

st.checkbox('Yes')st.button('Click Me')st.radio('Pick your gender', ['Male', 'Female'])st.selectbox('Pick a fruit', ['Apple', 'Banana', 'Orange'])st.multiselect('Choose a planet', ['Jupiter', 'Mars', 'Neptune'])st.select_slider('Pick a mark', ['Bad', 'Good', 'Excellent'])st.slider('Pick a number', 0, 50)

st.number_input(): Cette fonction permet d'afficher un widget de saisie numérique. st.text_input(): Cette fonction permet d'afficher un widget de saisie de texte. st.date_input(): Cette fonction permet d'afficher un widget de saisie de date pour choisir une date. st.time_input(): Cette fonction permet d'afficher un widget de saisie de l'heure pour choisir une heure. st.text_area(): Cette fonction est utilisée pour afficher un widget de saisie de texte avec plus d'une ligne de texte. st.file_uploader(): Cette fonction est utilisée pour afficher un widget de téléchargement de fichiers. st.color_picker(): Cette fonction est utilisée pour afficher le widget de sélection des couleurs afin de choisir une couleur.

st.number_input('Pick a number', 0, 10)st.text_input('Email address')st.date_input('Traveling date')st.time_input('School time')st.text_area('Description')st.file_uploader('Upload a photo')st.color_picker('Choose your favorite color')

t

Afficher les progrès et l'état d'avancement avec Streamlit

Nous allons maintenant voir comment ajouter une barre de progression et des messages d'état tels que erreur et succès à notre application.

st.balloons(): Cette fonction est utilisée pour afficher des ballons pour une célébration. st.progress(): Cette fonction permet d'afficher une barre de progression. st.spinner(): Cette fonction est utilisée pour afficher un message d'attente temporaire pendant l'exécution.

st.balloons()  # Celebration balloonsst.progress(10)  # Progress barwith st.spinner('Wait for it...'):    time.sleep(10)  # Simulating a process delay

st.success(): Cette fonction permet d'afficher un message de réussite. st.error(): Cette fonction permet d'afficher un message d'erreur. st.warnig(): Cette fonction permet d'afficher un message d'avertissement. st.info(): Cette fonction permet d'afficher un message d'information. st.exception(): Cette fonction permet d'afficher un message d'exception.

st.success("You did it!")st.error("Error occurred")st.warning("This is a warning")st.info("It's easy to build a Streamlit app")st.exception(RuntimeError("RuntimeError exception"))

Barre latérale et conteneur

Vous pouvez également créer une barre latérale ou un conteneur sur votre page pour organiser votre application. La hiérarchie et la disposition des pages de votre application peuvent avoir un impact important sur l'expérience de l'utilisateur. En organisant votre contenu, vous permettez aux visiteurs de comprendre et de naviguer sur votre site, ce qui les aide à trouver ce qu'ils cherchent et augmente la probabilité qu'ils reviennent à l'avenir.

Encadré

En passant un élément à st.sidebar(), cet élément sera épinglé à gauche, ce qui permettra aux utilisateurs de se concentrer sur le contenu de votre application.

Mais st.spinner() et st.echo() ne sont pas compatibles avec st.sidebar.

Comme vous le voyez, vous pouvez créer une barre latérale dans l'interface de votre application et y placer des éléments qui rendront votre application plus organisée et plus facile à comprendre.

st.sidebar.title("Sidebar Title")st.sidebar.markdown("This is the sidebar content")

Conteneur

st.container() est utilisé pour créer un conteneur invisible dans lequel vous pouvez placer des éléments afin de créer un arrangement et une hiérarchie utiles.

with st.container():    st.write("This is inside the container")

Afficher les graphiques avec Streamlit

Pourquoi avons-nous besoin de la visualisation ?

La visualisation des données permet de raconter des histoires en rassemblant les données dans un format plus facile à comprendre, en mettant en évidence les tendances et les valeurs aberrantes. Une bonne visualisation raconte une histoire, en éliminant le bruit des données et en mettant en évidence les informations utiles. Cependant, il ne s'agit pas simplement d'habiller un graphique pour le rendre plus attrayant ou d'ajouter la partie "info" d'une infographie. Une visualisation efficace des données est un délicat exercice d'équilibre entre la forme et la fonction. Le graphique le plus simple peut être trop ennuyeux pour attirer l'attention ou transmettre un message puissant, et la visualisation la plus étonnante peut totalement échouer à transmettre le bon message. Les données et les images doivent fonctionner ensemble, et c'est tout un art que de combiner une bonne analyse avec une bonne narration.

Pensez-vous qu'il soit possible de vous donner les données d'un million de points dans un tableau ou une base de données et de vous demander de faire des déductions en vous contentant de voir les données dans ce tableau ? À moins d'être un super-humain, ce n'est pas possible. C'est à ce moment-là que nous avons recours à la visualisation des données - elle nous donne une idée claire de la signification des informations en leur donnant un contexte visuel par le biais de cartes ou de graphiques. C'est la force de la visualisation Streamlit.

st.pyplot(): Cette fonction est utilisée pour afficher une figure matplotlib.pyplot.

import streamlit as stimport matplotlib.pyplot as pltimport numpy as nprand = np.random.normal(1, 2, size=20)fig, ax = plt.subplots()ax.hist(rand, bins=15)st.pyplot(fig)

st.line_chart(): Cette fonction permet d'afficher un graphique linéaire.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.line_chart(df)

st.bar_chart(): Cette fonction permet d'afficher un diagramme à barres.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.bar_chart(df)

st.area_chart(): Cette fonction permet d'afficher un diagramme de zone.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.area_chart(df)

st.altair_chart(): Cette fonction permet d'afficher une carte d'altair.

import streamlit as stimport pandas as pdimport numpy as npimport altair as altdf = pd.DataFrame(np.random.randn(500, 3), columns=['x', 'y', 'z'])chart = alt.Chart(df).mark_circle().encode(    x='x', y='y', size='z', color='z', tooltip=['x', 'y', 'z'])st.altair_chart(chart, use_container_width=True)

st.graphviz_chart(): Cette fonction permet d'afficher des objets graphiques, qui peuvent être complétés par différents nœuds et arêtes.

import streamlit as stimport graphvizst.graphviz_chart('''    digraph {        Big_shark -> Tuna        Tuna -> Mackerel        Mackerel -> Small_fishes        Small_fishes -> Shrimp    }''')

Afficher des cartes avec Streamlit

st.map(): Cette fonction permet d'afficher des cartes dans l'application. Cependant, il nécessite les valeurs de la latitude et de la longitude et ces valeurs ne doivent pas être nulles/NA.

import pandas as pdimport numpy as npimport streamlit as stdf = pd.DataFrame(    np.random.randn(500, 2) / [50, 50] + [37.76, -122.4], columns=['lat', 'lon'])st.map(df)

Thèmes

Vous pouvez également choisir un thème qui reflète votre style. Suivez les étapes du GIF ci-dessous :

Et si vous souhaitez en savoir plus sur le stylisme et les thèmes, vous pouvez consulter le site Theming.

Il est maintenant temps de créer une application ensemble !

Créer une application d'apprentissage automatique

Dans cette section, je vais vous présenter un projet que j'ai réalisé sur la prédiction des prêts.

Le principal bénéfice des prêts provient directement des intérêts du prêt. Les sociétés de crédit accordent un prêt après un processus intensif de vérification et de validation. Cependant, ils n'ont toujours pas l'assurance que le demandeur sera en mesure de rembourser le prêt sans difficulté. Dans ce tutoriel, nous allons construire un modèle prédictif (Random Forest Classifier) pour prédire le statut du prêt d'un demandeur. Notre mission consiste à préparer une application web pour la rendre disponible en production.

Commencez par importer les bibliothèques nécessaires à notre application :

import streamlit as stimport pandas as pdimport numpy as npimport pickle  # to load a saved modelimport base64  # to handle gif encoding

Dans cette application, nous utiliserons plusieurs widgets comme sliders : selectbox et radio dans le menu de la barre latérale, pour lesquels nous préparerons quelques fonctions Python.L'exemple sera une démo simple qui a deux pages. La page d'accueil affichera les données que nous avons sélectionnées, tandis que la page d'exploration vous permettra de visualiser les variables dans des graphiques, et la page de prédiction contiendra des variables avec un bouton appelé Prédire qui vous permettra d'estimer l'état du prêt. Le code ci-dessous vous donne une boîte de sélection sur la barre latérale qui vous permet de sélectionner une page. Les données sont mises en cache afin de ne pas avoir à être rechargées en permanence.

@st.cache est un mécanisme de mise en cache qui permet à votre application de rester performante même lorsqu'elle charge des données depuis le web, manipule de grands ensembles de données ou effectue des calculs coûteux.

@st.cachedef get_fvalue(val):    feature_dict = {"No": 1, "Yes": 2}    return feature_dict[val]def get_value(val, my_dict):    return my_dict[val]

Dans la page d'accueil, nous visualiserons : l'image de présentation / l'ensemble des données / l'histogramme des revenus du demandeur et du montant du prêt.

Note : Nous utiliserons if/elif/else pour passer d'une page à l'autre.

Nous chargerons le fichier loan_dataset.csv dans des données variables qui nous permettront d'en afficher quelques lignes dans la page d'accueil.

if app_mode == 'Home':    st.title('Loan Prediction')    st.image('loan_image.jpg')    st.markdown('Dataset:')    data = pd.read_csv('loan_dataset.csv')    st.write(data.head())    st.bar_chart(data[['ApplicantIncome', 'LoanAmount']].head(20))

Ensuite, dans la page Prédiction :

if app_mode == 'Prediction':    ApplicantIncome = st.sidebar.slider('ApplicantIncome', 0, 10000, 0)    LoanAmount = st.sidebar.slider('LoanAmount in K$', 9.0, 700.0, 200.0)    # Assuming additional input features here...    # Prediction Logic    if st.button("Predict"):        loaded_model = pickle.load(open('Random_Forest.sav', 'rb'))        prediction = loaded_model.predict(np.array([ApplicantIncome, LoanAmount]).reshape(1, -1))        if prediction[0] == 0:            st.error('According to our calculations, you will not get the loan.')        else:            st.success('Congratulations! You will get the loan.')

Nous avons écrit deux fonctions get_value(val,my_dict) et get_fvalue(val) et des dictionnaires sous feature_dict pour manipuler st.sidebar.radio() avec des variables non numériques. C'est facultatif, vous pouvez facilement faire quelque chose comme ça :

Voyons pourquoi nous avons fait cela.

Note : Les algorithmes d'apprentissage automatique ne peuvent pas traiter les variables catégorielles. Dans l'ensemble de données, j'ai fait un peu d'ingénierie des caractéristiques. Par exemple, la colonne Marié a deux variables 'Oui' et 'Non' et j'ai fait un encodage d'étiquette ( Jetez un coup d'œil pour mieux comprendre ) de sorte que "NON" sera égal à 1 et "Oui" à 2. La fonction get_fvalue(val) renverra facilement la valeur (1/2) en fonction de ce que le client a choisi. Même chose pour la fonction get_value(val,my_dict) . La différence entre les deux fonctions est que la première fonctionne sur les caractéristiques oui/non et que la seconde s'applique au cas général où nous avons plusieurs variables (exemple) : Gender ).

Comme nous pouvons le voir, la variable Dépendants a quatre catégories '0', '1', '2' et '3+' et nous ne pouvons pas convertir quelque chose comme cela en une variable numérique, et nous avons '+3' ce qui signifie que les Dépendants peuvent prendre 3,4,5 ... Nous avons procédé à un encodage à chaud ( Regardez pour mieux comprendre ) Ainsi, nous avons créé une barre latérale contenant les quatre éléments et chacun d'entre eux a une variable binaire, si le client choisit '0' la classe_0 sera égale à 1 et les autres seront égales à 0.

Nous avons également procédé à un encodage à chaud pour Property_Area, c'est pourquoi nous avons créé 3 variables (Rural, Urbain, Semiurbain). Lorsque Rural prend la valeur 1, les autres sont égales à 0.

Nous avons donc vu les deux - quand nous étiquetons ou quand nous codons nos caractéristiques à chaud - et comment les gérer pour créer avec succès une application Streamlit qui fonctionne.

 data1={    'Gender':Gender,    'Married':Married,    'Dependents':[class_0,class_1,class_2,class_3],    'Education':Education,    'ApplicantIncome':ApplicantIncome,    'CoapplicantIncome':CoapplicantIncome,    'Self Employed':Self_Employed,    'LoanAmount':LoanAmount,    'Loan_Amount_Term':Loan_Amount_Term,    'Credit_History':Credit_History,    'Property_Area':[Rural,Urban,Semiurban],    }    feature_list=[ApplicantIncome,CoapplicantIncome,LoanAmount,Loan_Amount_Term,Credit_History,get_value(Gender,gender_dict),get_fvalue(Married),data1['Dependents'][0],data1['Dependents'][1],data1['Dependents'][2],data1['Dependents'][3],get_value(Education,edu),get_fvalue(Self_Employed),data1['Property_Area'][0],data1['Property_Area'][1],data1['Property_Area'][2]]    single_sample = np.array(feature_list).reshape(1,-1)

Nous allons maintenant stocker nos variables dans un dictionnaire, car nous avons écrit get_value(val,my_dict) et get_fvalue(val) pour traiter les dictionnaires. Ensuite, l'entrée - ce que le client choisira comme entrée dans notre application Streamlit - sera classée dans une liste nommée feature_list puis dans une variable numpy nommée single_sample.

Note : Les entrées des caractéristiques doivent être classées dans le même ordre que les colonnes de l'ensemble de données (par exemple, Married ne peut pas prendre l'entrée de Gender).

 if st.button("Predict"):        file_ = open("6m-rain.gif", "rb")        contents = file_.read()        data_url = base64.b64encode(contents).decode("utf-8")        file_.close()        file = open("green-cola-no.gif", "rb")        contents = file.read()        data_url_no = base64.b64encode(contents).decode("utf-8")        file.close()        loaded_model = pickle.load(open('Random_Forest.sav', 'rb'))        prediction = loaded_model.predict(single_sample)        if prediction[0] == 0 :            st.error(    'According to our Calculations, you will not get the loan from Bank'    )            st.markdown(    f'<img src="data:image/gif;base64,{data_url_no}" alt="cat gif">',    unsafe_allow_html=True,)        elif prediction[0] == 1 :            st.success(    'Congratulations!! you will get the loan from Bank'    )            st.markdown(    f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">',    unsafe_allow_html=True,    )

Enfin, nous chargerons notre modèle RandomForestClassifier sauvegardé dans loaded_model et sa prédiction, qui est 0 ou 1 (problème de classification) dans prediction. Les fichiers .gif seront stockés dans file et file_. En fonction de la valeur de prediction, nous aurons deux cas, "Succès" ou "Échec", pour obtenir un prêt de la banque.

Vous êtes sur la page des pronostics :

En cas d'échec, le résultat sera le suivant :

Dans le cas d'un SUCCESS, le résultat sera le suivant :

Comment déployer une application Streamlit

Le déploiement est le mécanisme par lequel les applications sont fournies par les développeurs aux utilisateurs.

Le déploiement d'une application consiste à copier, configurer et activer une application spécifique sur une URL de base spécifique. Une fois le processus de déploiement terminé, l'application devient accessible au public sur l'URL de base. Le serveur exécute ce processus en deux étapes en mettant d'abord en scène l'application, puis en l'activant une fois la mise en scène réussie.

Apprenons à déployer une application Streamlit !

Avant d'essayer de déployer votre application, vous devez créer un nouveau dépôt sur votre GitHub où vous devez mettre le code de votre application et ses dépendances.

Cliquez ensuite sur "Valider les modifications" pour les enregistrer :

Après avoir créé un dépôt et téléchargé les fichiers, vous devez créer un nouveau fichier nommé requirements dans lequel vous devez placer les bibliothèques que vous avez utilisées dans votre application.

Tout d'abord, cliquez sur créer un nouveau fichier.

Maintenant que vous êtes sur le point de déployer votre application, il ne vous reste plus qu'à visiter ce lien.

Suivez ensuite les étapes suivantes :

Cliquez sur Déployer et attendez un instant !

Une page s'ouvrira automatiquement dans votre navigateur ! Cette page est votre projet d'application réalisé avec Streamlit.

Félicitations, vous avez déployé votre application avec succès ! Cliquez ici pour consulter l'application déployée.

Pour plus de documentation, visitez ce lien : docs.streamlit.io