En Python, il arrive souvent de créer des scripts pour automatiser des tâches ou analyser des informations. Mais comment faciliter le partage de ces scripts avec des collègues non développeurs sous la forme d'une interface simple et intuitive ? Un problème courant, notamment dans la data science.
Pour ma part, j'ai été confronté à ce problème quand je travaillais dans le commerce. J'avais des scripts qui permettaient la manipulation et l'analyse de fichiers Excel, mais sans interface... L'idée était alors de créer une interface sans utiliser de framework backend comme Flask ou Django.
Streamlit est devenu mon ami 😊.
Qu'est-ce que Streamlit ?
Streamlit est une bibliothèque open-source qui permet de créer et de partager facilement des applications web. Principalement conçue pour la data science et le machine learning, elle peut être utilisée comme bon vous semble ! Il est alors possible de créer tout type d'application web interactive.
La bibliothèque vous permet de développer des interfaces en Python sans avoir besoin de connaître HTML, CSS ou JavaScript.
Site internet Streamlit
Mentorats Streamlit sur Docstring
Sur Docstring nous avons des mentorats sur Streamlit, disponibles en rediffusion (et nous allons en refaire d'autres !). Vous pouvez retrouver tous les mentorats de Pierre-André sur le sujet via ce lien.
Pour ma part, nous avons réalisé deux petites applications en mentorat sur Docstring :
-
Création d'une application "Les films à l'affiche" avec Streamlit, urllib, json et datetime
-
Création d'une application de tchat en temps réel avec mise en ligne (voir le lien GitHub)
Tchat en temps réel
Tchat en temps réel salon
Installation et première application
Préparation et installation
Créez un dossier streamlit_exemple, naviguez à l'intérieur puis créez votre environnement virtuel et activez-le. Ensuite, installez Streamlit via pip ou tout autre gestionnaire :
pip install streamlit
Installation de Streamlit
Création d'une petite application
Nous allons maintenant créer un fichier index.py et lancer un IDE, puis copier coller ce code dans index.py :
import streamlit as st st.title("Mon application Streamlit") st.write("Bienvenue!") if st.button("Cliquez ici"): st.write("Vous avez cliqué sur le bouton !")
Vous pouvez maintenant lancer votre application avec la commande :
streamlit run index.py
Vous remarquerez que l'application se lance dans votre navigateur.
Lancement de l'application
Votre terminal affiche deux adresses :
Adresses Streamlit
-
Local URL : C'est l'adresse qui permet d'accéder à l'application sur votre ordinateur
-
Network URL : C'est l'adresse que vous pouvez partager avec d'autres personnes connectées au même réseau local pour qu'elles utilisent votre application depuis leur appareil
À noter
Petite anecdote
Lorsque je travaillais dans le commerce, tous les magasins et services supports avaient accès à mon application via cette network URL.
Quelques concepts Streamlit
Prêt à découvrir toute la puissance de Streamlit ?
Le modèle d'exécution séquentiel
À chaque fois qu'un utilisateur interagit avec une application, Streamlit ré-exécute le script du début à la fin. De manière basique, vous n'avez pas à penser à l'état de l'application.
À noter
Pour des applications plus complexes qui nécessitent de se souvenir d'informations, il est possible d'utiliser le mécanisme de gestion d'état intégré st.session_state. Cet objet permet de conserver des informations entre chaque ré-exécution. Couplé à la fonction st.rerun() qui force le script à s'arrêter et redémarrer, vous pouvez contrôler la logique de votre application.
Afficher du contenu et interaction avec l'application
Pour afficher des informations, Streamlit propose plusieurs fonctions :
-
st.title()pour le titre principal -
st.header()pour un en-tête -
st.write()capable d'afficher du texte, des dataframes, des dictionnaires etc. -
st.markdown()pour utiliser du markdown
Extrait de la documentation sur le texte formaté
Si vous voulez vous amuser à tester quelques fonctions :
import streamlit as st st.title("Mon application Streamlit") st.header("Section 1") st.write("Ceci est la première section de l'application.") st.header("Section 2") st.write("Ceci est la deuxième section de l'application.") st.badge("Nouveau", color="green") st.snow() # Pour le fun
Screen correspondant à l'exemple de code ci-dessus
Il est aussi possible d'utiliser des widgets interactifs en utilisant des fonctions Streamlit. Besoin d'un curseur ? D'une selectbox ? D'un champ de saisie ? Un bouton de téléchargement ?
import streamlit as st st.title("Démo des widgets") # Curseur (Slider) age = st.slider("Quel est votre âge ?", 0, 100, 25) st.write(f"Vous avez {age} ans.") # Liste déroulante (Selectbox) option = st.selectbox( "Quelle est votre couleur préférée ?", ("Bleu", "Rouge", "Vert") ) st.write(f"Votre couleur préférée est : {option}") # Champ de texte (Text input) nom = st.text_input("Quel est votre nom ?", "John Doe") st.write(f"Bonjour, {nom} !") # Bouton de téléchargement text_contents = ''' Ceci est un exemple de fichier texte. Il contient plusieurs lignes. ''' st.download_button('Télécharger un fichier texte', text_contents)
Démonstration du code ci-dessus
Vous pouvez évidemment afficher les informations uniquement lorsque le champ est rempli :
import streamlit as st st.title("Démo des widgets") # Champ de texte (Text input) nom = st.text_input("Quel est votre nom ?") if nom: st.write(f"Bonjour, {nom} !")
Construire des interfaces
Streamlit utilise les context managers pour gérer la mise en page :
import streamlit as st st.header("Démo de la mise en page") col1, col2 = st.columns(2) with col1: st.subheader("Colonne de gauche") st.write("Ce contenu est dans la première colonne.") st.checkbox("Cochez-moi !") with col2: st.subheader("Colonne de droite") st.write("Ce contenu est dans la seconde colonne.") st.radio("Choisissez une option", ["A", "B", "C"])
Exemple de mise en forme avec les colonnes
On pourrait aussi imaginer st.sidebar pour une barre latérale, ou st.expander pour du contenu dépliable...
Afficher des données graphiques
Pandas, Matplotlib, Plotly, Streamlit permettent d'afficher vos visualisations en quelques lignes de code :
import streamlit as st import pandas as pd import numpy as np st.header("Affichage de données et graphiques") # Création d'un DataFrame Pandas df = pd.DataFrame( np.random.randn(20, 3), columns=['a', 'b', 'c'] ) # Afficher un DataFrame interactif st.dataframe(df) # Afficher un graphique linéaire st.line_chart(df)
Démonstration du code ci-dessus
Mise en cache
Conscient que l'exécution du script à chaque interaction peut être coûteuse, Streamlit met à notre disposition le décorateur @st.cache_data :
import streamlit as st import time @st.cache_data def calcul_long_et_complexe(a, b): # Simule un calcul qui prend du temps time.sleep(5) return a + b st.write("Démonstration du cache") resultat = calcul_long_et_complexe(5, 10) st.write(f"Le résultat est : {resultat}") # Si vous interagissez avec ce bouton, le calcul ne sera pas refait if st.button("Juste pour rafraîchir"): st.write("Rafraîchi !")
La première fois, l'application mettra 5 secondes à charger. Puis avec le décorateur, en cas de rafraîchissement de la page le chargement sera instantané.
Pour aller plus loin
Application multi-pages
Pour des applications plus complexes, il peut parfois être utile de créer plusieurs pages. Streamlit permet de créer des applications multi-pages facilement :
-
Créez un dossier
pagesà la racine de votre projet -
Ajoutez des fichiers Python dans ce dossier. Ainsi, chaque fichier correspondra à une nouvelle page
Streamlit utilise le nom du fichier comme titre dans la barre de navigation. Le mieux est d'ordonner les pages en préfixant les noms des fichiers avec un numéro et un underscore (1_page.py).
Application multi-pages (vue de l'IDE)
Aperçu de l'application
Gestion des secrets
Streamlit intègre une gestion des secrets très simple, afin de ne pas exposer vos clés d'API ou vos mots de passe dans le code.
Encore une fois, Streamlit intègre un mécanisme très simple :
-
Créez un dossier
.streamlità la racine du projet -
Dans ce dossier, créez un fichier nommé secrets.toml
-
Ajoutez vos informations sensibles dans ce fichier
secrets.toml
Voici un exemple de code montrant comment on pourrait utiliser notre mot de passe :
- Dans le fichier
secrets.toml
password = "my_secret_password_123"
- Puis notre
index.py
import streamlit as st st.set_page_config( page_title="Application Multi-Pages", page_icon="🏠", ) # Initialize session state for authentication if "authenticated" not in st.session_state: st.session_state.authenticated = False # Login form if not st.session_state.authenticated: st.title("Connexion 🔐") with st.form("login_form"): password_input = st.text_input("Mot de passe", type="password") submit = st.form_submit_button("Se connecter") if submit: if password_input == st.secrets["password"]: st.session_state.authenticated = True st.rerun() else: st.error("❌ Mot de passe incorrect") else: # Main application content (only shown when authenticated) st.title("Bienvenue dans l'Application Multi-Pages 🏠") # Logout button in sidebar if st.sidebar.button("Se déconnecter"): st.session_state.authenticated = False st.rerun() st.markdown(""" Ceci est la page principale d'une application Streamlit multi-pages. ### Navigation Utilisez la barre latérale pour naviguer entre les différentes pages : - **Accueil** (cette page) - Introduction et aperçu - **Tableau de Bord** - Visualiser et analyser les données - **Paramètres** - Configurer l'application ### Démarrage Sélectionnez une page dans la barre latérale pour explorer les différentes fonctionnalités ! """) st.info("💡 Astuce : Les applications multi-pages créent automatiquement une navigation depuis le dossier pages/")
Ici nous combinons l'utilisation du mot de passe à la session de Streamlit pour passer de st.session_state.authenticated = False à st.session_state.authenticated = True afin de pouvoir accéder au contenu.
Formulaire de connexion
Connexion réussie
L'écosystème de composants
La communauté Streamlit est très active et possède une bibliothèque de composants. Voici quelques exemples :
-
Des cartes interactives avec
streamlit-folium -
Des tables de données avec
streamlit-aggrid -
Des interfaces du style chatbot avec
streamlit-chat -
Et beaucoup d'autres disponibles sur la galerie officielle
Galerie de composants Streamlit
Explorez l'API
Nous avons vu quelques fonctionnalités de Streamlit. N'hésitez pas à aller faire un tour sur la documentation, vous allez découvrir énormément de fonctionnalités. Vous pourrez voir par exemple comment charger des fichiers, créer une barre de progression, etc.
Si vous souhaitez pousser le concept, n'hésitez pas à développer une API afin de la coupler avec Streamlit 🔥!
