Streamlit : build and share data apps

Nous allons voir aujourd'hui un outil de plus en plus utilisé par les équipes data pour partager le résultat et les graphiques produits par leurs applications Python. Streamlit est très souple, et permet de faire plus qu'un dashboard : c'est un véritable frontend pour votre application.

Objectifs

• Créer sa première application Streamlit

Fonctionnement global de Streamlit

L'exécution de streamlit va se dérouler suivant ces étapes :

• Ouverture (1) et exécution (2) d'un script python depuis le terminal
• Lancement d'une requête (3) depuis un navigateur
• Affichage du résultat (4) dans le navigateur

Il faudra donc maintenir le script lancé dans le terminal. Si le script est arrêté, le navigateur ne recevra aucune réponse, et n'affichera donc aucun résultat.

Installation

Dans ton terminal, tu vas installer streamlit grâce au gestionnaire de paquet pip.

pip install streamlit

Streamlit inclut un script de démonstration. Pour voir le potentiel de cet outil, tu peux l'exécuter en tapant dans ton terminal :

streamlit hello

C'est plutôt impressionnant ! Et ca tourne bien sur ton ordinateur, comme l'indique la barre d'adresse :

Application statique

Une démo c'est bien, mais nous voulons notre propre application. Alors c'est parti !

Commence par créer un dossier sur ton poste que tu appelleras comme tu le souhaites, par exemple test_streamlit. Dans ce dossier, crée un script python, que tu appelleras my_streamlit_app.py, et dans lequel tu inséreras le code suivant :

import streamlit as st

st.title('Hello Wilders, welcome to my application!')

Tu peux maintenant lancer ton application depuis le terminal. Pour cela place-toi dans le dossier qui contient ton script, et lance la commande suivante :

streamlit run my_streamlit_app.py

Ton navigateur par défaut devrait s'ouvrir pour afficher la page suivante :

C'est basique, mais ca fonctionne. Tu vas maintenant pouvoir ajouter d'autres éléments. Pour cela, tu peux laisser le terminal ouvert, sans arrêter le traitement. En parallèle, tu ouvres avec Sublime Text, ou avec ton IDE favori le script python my_streamlit_app.py. Tu peux alors faire des modifications, enregistrer le script, et actualiser la page dans ton navigateur.

Ajoutons une ligne de texte à notre script. La fonction pour afficher un élément dans streamlit est st.write :

import streamlit as st

st.title('Hello Wilders, welcome to my application!')

st.write("I enjoy to discover stremalit possibilities")

Ca fonctionne ? Alors continuons. Avec st.write, tu peux afficher à peu près tout ce que tu veux. Par exemple, un DataFrame, celui de la météo que tu connais bien :

import streamlit as st
import pandas as pd

st.title('Hello Wilders, welcome to my application!')

st.write("I enjoy to discover stremalit possibilities")

link = "https://raw.githubusercontent.com/murpi/wilddata/master/quests/weather2019.csv"
df_weather = pd.read_csv(link)
st.write(df_weather)

En réalité, streamlit accepte les "magic command". C'est-à-dire que si tu écris le nom d'une variable sur une ligne, par défaut, streamlit essayera de l'afficher. Nous avons donc le même résultat en faisant

import streamlit as st
import pandas as pd

st.title('Hello Wilders, welcome to my application!')

st.write("I enjoy to discover stremalit possibilities")

link = "https://raw.githubusercontent.com/murpi/wilddata/master/quests/weather2019.csv"
df_weather = pd.read_csv(link)

# Here we use "magic commands":
df_weather

Affichage de graphiques

Pour afficher des graphiques, streamlit inclut certains graphiques. Tu peux donc utiliser ces graphiques natifs, en ajoutant à ton script :

st.line_chart(df_weather['MAX_TEMPERATURE_C'])

Mais tu n'as pas très envie d'apprendre une nouvelle bibliothèque graphique. Tu en connais déjà, que tu maitrises mieux, alors utilisons-les ! Pour afficher un graphique seaborn, ou matplotlib, tu pourras utiliser la fonction dédiée st.pyplot. Tu crées d'abord une variable qui contiendra ton graphique. Ensuite, plutôt que d'utiliser le traditionnel plt.show(), tu devras utiliser st.pyplot() en indiquant le nom de ta variable suivi de l'attribut figure. Ca donne quelque chose comme ca :

import seaborn as sns
viz_correlation = sns.heatmap(df_weather.corr(), 
								center=0,
								cmap = sns.color_palette("vlag", as_cmap=True)
								)

st.pyplot(viz_correlation.figure)

Pour plotly, c'est similaire, grâce à la fonction st.plotly_chart(). Et si tu utilises d'autres bibliothèques graphiques, tu pourras chercher comment les afficher dans la documentation officielle.

Application dynamique

Jusqu'ici, nous sommes très proche de ce que tu peux faire grâce à Plotly. Mais Streamlit est beaucoup plus complet, tu peux utiliser tout ce que tu connais en Python. Par exemple, faire des calculs depuis un input :

import streamlit as st

st.title('Hello Wilders, welcome to my application!')

name = st.text_input("Please give me your name :")
name_length = len(name)
st.write("Your name has ",name_length,"characters")

Evidemment, ici l'intérêt est mince. Mais tu peux appliquer tout ce que tu connais en python, directement dans Streamlit.

De la même manière, tu peux intégrer des boutons, des cases à cocher, des imports de fichiers, des règlettes (sliders pour changer les valeurs), etc...

Publication

Etape 1 : création du compte Pour publier ton application en ligne, tu peux utiliser le service share.streamlit. Pour cela, tu dois d'abord t'inscrire sur la plateforme, en utilisant l'adresse email de ton compte github :

Tu recevras alors un email et tu pourras te connecter à la plateforme de partage. Tu devras publier ton script sur github pour pouvoir l'exécuter. Attention, la validation du compte peut prendre entre 24 et 72h.

Pour que ton application apparaisse en ligne, share.streamlit a besoin :

• du script de ton application : le fichier my_streamlit_app.py (ou le nom que tu lui as donné)
• de connaitre des détails sur ton environnement, notamment les modules à importer. Ce fichier doit s'appeler requirements.txt.

Etape 2 : requirements.txt Ce fichier doit comporter les versions des modules à importer, au format ci-dessous. Evidemment les numéros de versions doivent être adaptés à ce qui est utilisé par ton code, ne recopie donc pas les valeurs ci-dessous, qui sont uniquement là pour te montrer le format attendu dans ce fichier.

numpy==1.19.2
seaborn==0.11.0
pandas==1.1.3
streamlit==0.79.0

Pense à indiquer uniquement les modules que tu utilises (sinon tu alourdis inutilement ton application).

Etape 3 : GitHub Charge ensuite les 2 fichiers (le script.py et requirements.txt) dans le même dossier d'un reposetory GitHub

Etape 4 : Activation de l'application

Tu peux maintenant activer ton application en te connectant à ce site, et en sélectionnant le nom du repository qui contient tes fichiers :

Challenge

A partir du dataset des voitures, tu afficheras :

• une analyse de corrélation et de distribution grâce à différents graphiques et des commentaires.
• des boutons doivent être présents pour pouvoir filtrer les résultats par région (US / Europe / Japon).
• l'application doit être disponible sur la plateforme de partage.

Publie ensuite ici le lien de ton application. Le lien doit ressembler à https://share.streamlit.io/wilder/streamlit_app/my_streamlit_app.py.

Critères de validation

• L'application est accessible en ligne
• L'analyse est effectuée, avec des commentaires explicatifs
• Des boutons sont présents pour filtrer par région