0% ont trouvé ce document utile (0 vote)
134 vues67 pages

Introduction à Streamlit pour Python

Transféré par

cedrif1284
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
134 vues67 pages

Introduction à Streamlit pour Python

Transféré par

cedrif1284
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Introduction

Pourquoi Streamlit ?

Dans un monde où les données sont au cœur de nombreuses décisions, il est devenu
essentiel de pouvoir les analyser et les visualiser de manière rapide et efficace.
Cependant, les outils traditionnels pour la création d’applications web interactives,
comme Flask ou Django, peuvent être complexes et nécessitent une grande expertise en
développement web. C’est là que Streamlit intervient.
Streamlit est une bibliothèque Python open source qui permet de créer des applications
web interactives de manière simple, rapide et sans nécessiter de compétences avancées
en développement front-end. Que vous soyez analyste de données, scientifique des
données ou ingénieur, Streamlit permet de transformer vos scripts Python en
applications web fonctionnelles en quelques lignes de code. Avec Streamlit, vous pouvez
créer des dashboards dynamiques, des visualisations interactives et des outils d’analyse
de données en un temps record.

L’objectif de ce livre

Ce livre a pour objectif de vous guider dans l’apprentissage de Streamlit, en commençant


par les bases et en allant progressivement vers des projets plus complexes. Vous
apprendrez à maîtriser les concepts essentiels de cette bibliothèque et à les utiliser dans
des cas réels, afin de pouvoir créer vos propres applications interactives.
Que vous soyez débutant ou déjà familier avec Python et la science des données, ce livre
vous fournira les compétences nécessaires pour tirer pleinement parti de Streamlit. Au fil
des chapitres, vous découvrirez comment importer et manipuler des données, créer des
interfaces interactives, personnaliser l’apparence de vos applications et même les
déployer sur le web.

À qui s’adresse ce livre ?

Ce livre est destiné à toute personne souhaitant créer des applications web interactives
avec Python. Il s’adresse principalement :
• Aux scientifiques des données qui veulent partager leurs analyses de manière
interactive.
• Aux développeurs Python qui souhaitent se familiariser avec Streamlit pour des
projets plus rapides et simples.
• Aux analystes qui ont besoin de créer des outils visuels pour explorer leurs
données.
• À toute personne passionnée par l’interactivité et le développement rapide
d’applications web avec Python.
Aucune expérience préalable en développement web n’est requise. Tout au long du livre,
nous allons explorer les fonctionnalités de Streamlit de manière progressive, avec des
exemples pratiques qui vous permettront de créer vos propres applications dès le début.

Ce que vous allez apprendre

Dans ce livre, vous apprendrez à :


• Installer et configurer Streamlit pour créer votre premier projet.
• Utiliser des widgets interactifs pour permettre aux utilisateurs d’interagir avec vos
applications.
• Manipuler et visualiser des données de manière simple grâce à Streamlit.
• Personnaliser l’apparence de vos applications et créer des interfaces élégantes.
• Déployer vos applications en ligne et les rendre accessibles à d’autres utilisateurs.
• Optimiser les performances de vos applications pour gérer de grands ensembles
de données.

Un voyage interactif

À travers des exemples pratiques, des conseils d’experts et des projets concrets, ce livre
vous permettra de comprendre comment Streamlit peut transformer vos projets de
données. Préparez-vous à plonger dans l’univers du développement d’applications
interactives, à exprimer votre créativité et à créer des outils utiles et dynamiques.
Bienvenue dans le monde de Streamlit !

Chapitre 1 : Prise en main de Streamlit


1. Introduction à Streamlit

Streamlit est une bibliothèque Python open source qui permet de créer des applications
web interactives de manière rapide et simple. Contrairement aux frameworks de
développement web traditionnels, tels que Flask ou Django, qui nécessitent des
connaissances approfondies en HTML, CSS et JavaScript, Streamlit permet aux
développeurs de se concentrer uniquement sur le code Python. En quelques lignes de
code, vous pouvez transformer un script Python en une application web interactive,
idéale pour la visualisation de données, les analyses exploratoires et le prototypage
rapide.
L’un des principaux avantages de Streamlit est sa simplicité d’utilisation. Il permet de
créer des interfaces graphiques réactives pour les utilisateurs sans avoir à écrire de code
JavaScript complexe. Cette approche permet aux scientifiques des données, analystes,
ingénieurs et chercheurs de partager facilement leurs résultats et d’explorer leurs
données de manière interactive.
Streamlit est également très flexible et s’intègre parfaitement avec des bibliothèques
populaires de Python telles que Pandas, NumPy, Matplotlib, Plotly et Altair. Grâce à ces
intégrations, il devient facile de visualiser des ensembles de données, de créer des
graphiques interactifs et de réaliser des analyses en temps réel, le tout dans une seule
application.
En plus de sa simplicité, Streamlit permet de mettre à jour les applications en temps réel.
Lorsque vous modifiez le code de votre application, celle-ci se met automatiquement à
jour dans votre navigateur, ce qui accélère considérablement le processus de
développement et de test.
Ce premier chapitre vous guidera dans la prise en main de Streamlit, en vous montrant
comment installer cette bibliothèque et créer votre première application interactive.
Vous découvrirez également les bases de l’interface et des composants essentiels qui
vous permettront de démarrer rapidement avec Streamlit.

2. Installation de Streamlit

Avant de pouvoir commencer à utiliser Streamlit, il est nécessaire de l’installer sur votre
machine. Cette étape est simple et rapide, et nécessite seulement quelques lignes de
commande. Voici comment procéder :

Prérequis

Assurez-vous d’avoir Python installé sur votre machine. Streamlit fonctionne avec
Python 3.7 et les versions ultérieures. Vous pouvez vérifier la version de Python installée
en exécutant la commande suivante dans votre terminal ou invite de commande :
python --version

Si Python n’est pas installé, vous pouvez le télécharger et l’installer depuis le site officiel
de Python.

Installation via pip

Une fois Python installé, vous pouvez installer Streamlit à l’aide de pip, le gestionnaire
de paquets Python. Ouvrez un terminal (ou l’invite de commandes sur Windows) et
exécutez la commande suivante :
pip install streamlit

Cette commande téléchargera et installera Streamlit et toutes ses dépendances.


Vérification de l’installation

Pour vérifier que Streamlit a bien été installé, vous pouvez exécuter la commande
suivante :
streamlit --version

Cela devrait afficher la version actuelle de Streamlit installée sur votre machine. Si la
commande renvoie la version correctement, cela signifie que l’installation a réussi.

Résolution des problèmes d’installation

Si vous rencontrez des problèmes lors de l’installation, voici quelques solutions


courantes :
• Assurez-vous que vous utilisez un environnement Python propre (par exemple,
via un environnement virtuel) pour éviter les conflits avec d’autres bibliothèques.
• Si vous obtenez une erreur liée à pip, vous pouvez essayer de mettre à jour pip
en exécutant la commande suivante :
pip install --upgrade pip

Une fois l’installation terminée, vous êtes prêt à commencer à utiliser Streamlit et à créer
votre première application !

3. Premier projet avec Streamlit

Maintenant que Streamlit est installé, il est temps de créer votre première application.
Dans cette section, nous allons explorer les étapes nécessaires pour créer une
application Streamlit simple et l’exécuter dans votre navigateur.

Créer un fichier Python

La première étape consiste à créer un fichier Python où vous écrirez votre application
Streamlit. Utilisez votre éditeur de texte ou un IDE comme VSCode, PyCharm, ou même
un simple éditeur de texte. Nommez votre fichier, par exemple, [Link].

Structure de base d’une application Streamlit

Une application Streamlit commence généralement par l’importation de la bibliothèque


streamlit. Ensuite, vous pouvez ajouter des commandes pour afficher des éléments
dans l’interface utilisateur, comme des textes, des titres, des graphiques, etc. Voici un
exemple simple :
import streamlit as st

# Affichage d'un titre


[Link]("Bienvenue sur Streamlit")
# Affichage d'un texte
[Link]("Ceci est votre première application Streamlit !")

# Affichage d'une commande simple


[Link]("Cliquez ici")

Dans cet exemple :


• [Link]() affiche un titre en haut de la page.
• [Link]() permet d’afficher un texte simple.
• [Link]() crée un bouton que l’utilisateur peut cliquer.

Exécuter l’application

Une fois que vous avez écrit votre code dans [Link], il est temps d’exécuter
l’application. Pour ce faire, ouvrez un terminal ou une invite de commande, puis naviguez
jusqu’au répertoire où se trouve votre fichier [Link]. Utilisez ensuite la commande
suivante pour lancer l’application :
streamlit run [Link]

Cette commande va démarrer le serveur de Streamlit et ouvrir automatiquement


l’application dans votre navigateur par défaut. Si l’application ne s’ouvre pas
automatiquement, vous pouvez ouvrir un navigateur et accéder à l’adresse suivante :
[Link]

Comprendre le fonctionnement

Lorsque vous exécutez l’application, Streamlit crée un serveur local pour afficher
l’interface utilisateur. Toute modification que vous apportez à votre fichier [Link] sera
automatiquement reflétée dans le navigateur sans avoir besoin de recharger la page
manuellement. Cela facilite grandement le développement et le test d’applications.

Résumé
• Vous avez créé un fichier Python contenant une application Streamlit simple.
• Vous avez exécuté l’application en utilisant la commande streamlit run.
• Vous avez appris à afficher des éléments simples tels que des titres, des textes et
des boutons.
Cette première application est une introduction aux concepts fondamentaux de
Streamlit, et vous allez explorer plus de fonctionnalités interactives et avancées dans les
chapitres suivants.

4. Exploration des composants de base

Dans cette section, nous allons approfondir l’exploration des composants de base que
Streamlit met à votre disposition pour construire des interfaces interactives et visuelles.
Ces composants sont essentiels pour donner vie à vos applications et offrir une
expérience utilisateur fluide.

Affichage de texte

Streamlit offre plusieurs manières d’afficher du texte, que ce soit pour des titres, des
sous-titres, des paragraphes ou même du contenu enrichi via Markdown. Ces
fonctionnalités vous permettent de créer des pages attrayantes avec du contenu
dynamique.
• Titre : Le composant [Link]() est utilisé pour afficher un titre principal sur la
page. Il apparaît en haut, en grand et en gras.
[Link]("Bienvenue dans notre application Streamlit")

• En-têtes et sous-titres : Pour ajouter des sous-titres ou des sections, vous pouvez
utiliser [Link]() ou [Link](). Ces éléments sont utiles pour structurer
le contenu de votre application.
[Link]("Analyse des données")
[Link]("Données de ventes mensuelles")

• Texte standard : Pour afficher un texte général ou un paragraphe, [Link]() est


l’outil principal. Il permet d’afficher tout type de texte ou même des objets Python tels
que des DataFrames ou des graphiques. Cette fonction est également polyvalente et peut
accepter des objets comme des listes ou des dictionnaires.
[Link]("Voici un texte simple.")

• Texte enrichi avec Markdown : Vous pouvez utiliser [Link]() pour afficher
du texte formaté en Markdown. Cela permet d’ajouter des liens, des listes à puces, des
images et plus encore.
[Link]("# Ceci est un titre en Markdown")
[Link]("Voici un lien vers
[Streamlit]([Link]
[Link]("- Point 1\n- Point 2\n- Point 3")

Affichage d’images

Streamlit permet d’intégrer des images dans vos applications pour rendre vos
visualisations plus interactives et intéressantes. Vous pouvez afficher des images locales
ou provenant d’URL, et même ajuster la taille et les options d’affichage.
• Afficher une image à partir d’un fichier local : Utilisez [Link]() pour afficher
des images à partir d’un fichier sur votre machine locale.
from PIL import Image

# Charger une image à partir d'un fichier local


image = [Link]("chemin/vers/[Link]")
# Afficher l'image
[Link](image, caption="Exemple d'image", use_column_width=True)

• Afficher une image à partir d’une URL : Vous pouvez aussi charger des images en
ligne directement depuis une URL.
[Link]("[Link] caption="Image
depuis une URL", use_column_width=True)

• Redimensionner l’image : L’option use_column_width=True permet d’adapter


l’image à la largeur de la colonne. Vous pouvez aussi spécifier des tailles personnalisées
avec width et height.

Widgets interactifs

Les widgets sont des éléments interactifs qui permettent à l’utilisateur de modifier les
paramètres ou de filtrer les données directement depuis l’interface. Ces composants
rendent vos applications dynamiques et réactives.
• Bouton : Le bouton est l’un des widgets les plus simples mais puissants. Vous pouvez
l’utiliser pour déclencher une action lorsque l’utilisateur clique dessus.
if [Link]("Cliquez ici"):
[Link]("Le bouton a été cliqué !")

• Sélecteur déroulant (SelectBox) : [Link]() permet à l’utilisateur de choisir


une option parmi une liste déroulante.
option = [Link]("Choisissez une option", ["Option 1",
"Option 2", "Option 3"])
[Link](f"Vous avez sélectionné : {option}")

• Liste multiple (MultiSelect) : Si vous souhaitez permettre à l’utilisateur de


sélectionner plusieurs options, utilisez [Link]().
options = [Link]("Sélectionnez plusieurs options",
["Option 1", "Option 2", "Option 3"])
[Link](f"Vous avez sélectionné : {options}")

• Curseur numérique (Slider) : Un curseur ([Link]()) est un moyen interactif


pour sélectionner une valeur numérique dans une plage donnée. Vous pouvez l’utiliser
pour ajuster dynamiquement des paramètres ou filtrer des données.
age = [Link]("Quel est votre âge ?", 0, 100, 25)
[Link](f"Vous avez {age} ans.")

• Champ de texte (Text Input) : Si vous avez besoin d’un champ de texte pour que
l’utilisateur saisisse une valeur, st.text_input() est idéal.
nom = st.text_input("Quel est votre nom ?")
[Link](f"Bonjour {nom}!")

• Zone de texte (Text Area) : Pour un champ de texte plus large, comme un
commentaire ou une description, utilisez st.text_area().
commentaire = st.text_area("Laissez un commentaire")
[Link](f"Votre commentaire : {commentaire}")

• Sélecteur de date (Date Input) : Utilisez st.date_input() pour permettre à


l’utilisateur de choisir une date à partir d’un calendrier.
date_naissance = st.date_input("Choisissez votre date de
naissance")
[Link](f"Votre date de naissance est : {date_naissance}")

Disposition de la page

Organiser le contenu de manière claire et logique est essentiel pour l’expérience


utilisateur. Streamlit vous offre plusieurs outils pour gérer la disposition des éléments sur
la page.
• Colonnes : Si vous voulez diviser votre page en plusieurs colonnes, utilisez
[Link](). Cela est utile pour afficher plusieurs éléments côte à côte, comme des
graphiques, des tableaux ou des textes.
col1, col2, col3 = [Link](3)
with col1:
[Link]("Colonne 1")
with col2:
[Link]("Colonne 2")
with col3:
[Link]("Colonne 3")

• Conteneurs : Utilisez [Link]() pour regrouper plusieurs éléments sous un


même conteneur, ce qui vous permet de contrôler leur disposition et leur présentation.
with [Link]():
[Link]("Contenu regroupé dans un conteneur")

• Expandeurs : Si vous souhaitez organiser votre contenu de manière compacte, vous


pouvez utiliser des expandeurs ([Link]()) pour cacher ou afficher des
informations à la demande.
with [Link]("Voir plus"):
[Link]("Voici du contenu supplémentaire qui est caché au
début.")
Graphiques et visualisations

Streamlit s’intègre directement avec des bibliothèques de visualisation comme


Matplotlib, Plotly, et Altair, et permet d’afficher des graphiques interactifs avec des
widgets.
• Graphiques avec Matplotlib : Vous pouvez intégrer vos graphiques créés avec
Matplotlib en utilisant [Link]().
import [Link] as plt
import numpy as np

x = [Link](0, 10, 100)


y = [Link](x)

[Link](x, y)
[Link](plt)

• Graphiques avec Plotly : Plotly permet de créer des graphiques interactifs et est
parfaitement compatible avec Streamlit. Utilisez st.plotly_chart() pour afficher
des graphiques Plotly.
import [Link] as px
df = [Link]()
fig = [Link](df, x="sepal_width", y="sepal_length",
color="species")
st.plotly_chart(fig)

5. Interactivité avancée avec Streamlit

Streamlit permet de créer des applications très interactives, en facilitant l’ajout de


fonctionnalités dynamiques et réactives. Dans cette section, nous allons explorer des
techniques avancées d’interactivité avec les utilisateurs, telles que les mises à jour en
temps réel, les actions conditionnelles et la gestion de l’état de l’application.

Utilisation de st.session_state

Une des fonctionnalités les plus puissantes de Streamlit est la gestion de l’état de
l’application via st.session_state. Cela permet de conserver des variables d’état entre
différentes interactions et rafraîchissements de l’application. Cela est utile pour suivre les
actions de l’utilisateur sur la page.
• Exemple d’utilisation de session_state : Voici comment vous pouvez utiliser
st.session_state pour mémoriser la sélection d’un utilisateur sur plusieurs
rafraîchissements.
import streamlit as st
if "count" not in st.session_state:
st.session_state.count = 0

if [Link]("Ajouter 1 au compteur"):
st.session_state.count += 1

[Link](f"Compteur actuel : {st.session_state.count}")

Dans cet exemple, le compteur sera maintenu même après un rafraîchissement de la


page. Le bouton incrémente la valeur de st.session_state.count, et cette valeur est
affichée à l’utilisateur. L’utilisation de session_state est idéale pour les scénarios où
vous devez conserver les données utilisateur sur plusieurs interactions.

Interaction avec des fichiers

Streamlit permet également d’interagir avec des fichiers, que ce soit pour les charger ou
pour permettre à l’utilisateur de télécharger des fichiers à partir de l’application.
• Télécharger des fichiers avec st.file_uploader : Vous pouvez utiliser
st.file_uploader() pour permettre à un utilisateur de télécharger un fichier.
Streamlit supporte plusieurs types de fichiers, comme les fichiers CSV, Excel, JSON, etc.
uploaded_file = st.file_uploader("Choisissez un fichier CSV",
type="csv")

if uploaded_file is not None:


import pandas as pd
df = pd.read_csv(uploaded_file)
[Link](df)

Dans cet exemple, l’utilisateur peut télécharger un fichier CSV, et ce fichier sera ensuite
chargé dans un DataFrame Pandas et affiché à l’écran.

Interaction avec des bases de données

Streamlit peut être intégré à des bases de données pour stocker et récupérer des
informations de manière dynamique. Bien que Streamlit ne gère pas directement les
bases de données, vous pouvez facilement connecter votre application à une base de
données en utilisant des bibliothèques Python comme sqlite3, SQLAlchemy, ou
psycopg2.

• Connexion à une base de données avec SQLite : Voici un exemple d’interaction avec
une base de données SQLite pour insérer et récupérer des données.
import sqlite3
import streamlit as st

# Connexion à la base de données SQLite (création si nécessaire)


conn = [Link]('[Link]')
c = [Link]()
# Création de la table si elle n'existe pas
[Link]('''CREATE TABLE IF NOT EXISTS users (name TEXT, age
INTEGER)''')

# Ajout de données
if [Link]("Ajouter un utilisateur"):
name = st.text_input("Nom")
age = st.number_input("Âge", min_value=1, max_value=100)
[Link]('INSERT INTO users (name, age) VALUES (?, ?)',
(name, age))
[Link]()

# Affichage des utilisateurs


if [Link]("Afficher les utilisateurs"):
[Link]('SELECT * FROM users')
users = [Link]()
[Link](users)

# Fermeture de la connexion à la base de données


[Link]()

Ce code permet d’ajouter des utilisateurs à une base de données SQLite et d’afficher la
liste des utilisateurs enregistrés. Les actions sont déclenchées par des boutons Streamlit,
ce qui permet une interactivité en temps réel avec la base de données.

Interaction en temps réel avec des graphiques

Streamlit rend l’ajout de graphiques interactifs très facile. Vous pouvez créer des
graphiques en temps réel qui répondent aux actions de l’utilisateur.
• Graphique réactif avec st.line_chart : Voici un exemple où un graphique est mis à
jour en fonction des actions de l’utilisateur.
import pandas as pd
import numpy as np
import streamlit as st

# Créer un DataFrame aléatoire


data = [Link]([Link](10, 2), columns=["A", "B"])

# Afficher un graphique en ligne réactif


st.line_chart(data)

# Bouton pour ajouter de nouvelles données


if [Link]("Ajouter des données"):
new_data = [Link]([Link](10, 2), columns=["A",
"B"])
data = [Link]([data, new_data], ignore_index=True)
st.line_chart(data)
Dans cet exemple, chaque fois que l’utilisateur clique sur le bouton “Ajouter des
données”, un nouveau jeu de données est ajouté au graphique, permettant une
visualisation dynamique et interactive des nouvelles valeurs.

Interaction avec des cartes (géolocalisation)

Streamlit vous permet également d’intégrer des cartes interactives. Vous pouvez afficher
des données géospatiales avec [Link]() ou utiliser des bibliothèques comme Plotly
pour des cartes plus complexes.
• Carte simple avec [Link] : Voici comment afficher une carte avec des coordonnées
GPS.
import streamlit as st
import pandas as pd

# Exemple de données de géolocalisation


data = [Link]({
'lat': [37.76, 37.77, 37.78],
'lon': [-122.4, -122.5, -122.6]
})

# Afficher la carte
[Link](data)

Dans cet exemple, une carte est générée avec trois points sur la base des coordonnées
GPS spécifiées dans le DataFrame.

Déclenchement d’événements conditionnels

Streamlit permet de déclencher des événements conditionnels en fonction des actions


de l’utilisateur. Par exemple, vous pouvez modifier la page en fonction d’une entrée de
formulaire ou de la sélection d’un élément dans une liste déroulante.
• Afficher un message conditionnel : Voici un exemple d’affichage conditionnel du
texte en fonction du choix de l’utilisateur dans une liste déroulante.
choix = [Link]("Choisissez une option", ["Option 1",
"Option 2", "Option 3"])

if choix == "Option 1":


[Link]("Vous avez choisi l'option 1")
elif choix == "Option 2":
[Link]("Vous avez choisi l'option 2")
else:
[Link]("Vous avez choisi l'option 3")

Dans cet exemple, le message affiché change en fonction de l’option sélectionnée par
l’utilisateur.
5. Interactivité avancée avec Streamlit (suite)

Streamlit offre une gamme d’outils permettant de rendre vos applications non seulement
réactives, mais aussi très dynamiques. Ces fonctionnalités avancées vous permettent
d’ajouter des interactions sophistiquées pour répondre aux besoins des utilisateurs et
améliorer l’expérience générale. Poursuivons l’exploration des mécanismes d’interactivité
que vous pouvez utiliser pour rendre vos applications encore plus interactives et
intelligentes.

Manipulation de formulaires avec [Link]

Les formulaires dans Streamlit vous permettent de regrouper plusieurs widgets dans un
seul bloc, et de soumettre les données de manière synchronisée. Cela peut être utile
pour les cas où vous avez plusieurs entrées à collecter en même temps, comme pour un
formulaire d’inscription ou une recherche avancée.
• Créer et soumettre un formulaire : Vous pouvez regrouper plusieurs champs de
saisie dans un formulaire en utilisant [Link](). Voici un exemple pour soumettre un
formulaire avec plusieurs champs de texte et un bouton de soumission.
with [Link](key='my_form'):
nom = st.text_input("Nom")
age = st.number_input("Âge", min_value=18, max_value=100)
email = st.text_input("Email")
submit_button = st.form_submit_button("Soumettre")

if submit_button:
[Link](f"Nom : {nom}, Âge : {age}, Email : {email}")

Dans cet exemple, lorsque l’utilisateur remplit tous les champs et clique sur “Soumettre”,
les données sont affichées dans l’application. Cela permet de regrouper plusieurs actions
dans un seul envoi, ce qui est très utile pour des scénarios où l’on ne veut pas que les
données soient envoyées après chaque modification d’un champ.

Interaction avec des notifications en temps réel

Streamlit vous permet également de gérer les notifications et d’afficher des messages à
l’utilisateur en temps réel. Vous pouvez utiliser des éléments comme [Link]() ou
[Link]() pour informer l’utilisateur de certaines actions ou événements en cours.
Cela rend votre application plus réactive et interactive.
• Notifications avec [Link]() : Utilisez [Link]() pour afficher une notification
à l’utilisateur.
[Link]("Le traitement est terminé !")

Cette notification apparaît sous forme de message discret à l’utilisateur, ce qui est utile
pour informer de l’achèvement d’une tâche longue ou d’une mise à jour.
• Indicateur de progression avec [Link]() : Si une action prend du temps, vous
pouvez afficher une animation de chargement pour indiquer à l’utilisateur que
l’application est en train de traiter une requête.
with [Link]('Chargement des données...'):
# Simuler un temps de traitement
import time
[Link](3)
[Link]('Les données ont été chargées avec succès !')

Ici, l’animation de chargement apparaît pendant l’exécution du code, et un message de


succès s’affiche une fois le processus terminé.

Création d’animations avec Streamlit

Streamlit n’a pas de support natif pour des animations complexes comme celles que vous
pourriez trouver avec JavaScript ou des bibliothèques comme [Link]. Cependant, vous
pouvez créer des visualisations animées en combinant des bibliothèques comme Plotly,
Matplotlib, ou Altair, qui supportent les graphiques dynamiques et les animations.
• Animation avec Plotly : Plotly permet de créer des graphiques animés et interactifs
que vous pouvez intégrer dans vos applications Streamlit.
import [Link] as px
import pandas as pd

# Exemple de données pour l'animation


df = [Link]({
'x': [1, 2, 3, 4],
'y': [10, 11, 12, 13],
'temps': [0, 1, 2, 3]
})

# Créer un graphique animé


fig = [Link](df, x="x", y="y", animation_frame="temps",
range_x=[0, 5], range_y=[10, 15])
st.plotly_chart(fig)

Dans cet exemple, un graphique animé est créé à partir des données en fonction d’une
variable temporelle. Lorsque l’utilisateur interagit avec ce graphique, les points se
déplacent selon la progression du temps, offrant ainsi une expérience dynamique.

Connexion à des APIs externes

Les applications Streamlit peuvent également se connecter à des APIs externes pour
récupérer des données en temps réel ou interagir avec d’autres services web. Que vous
souhaitiez afficher des prévisions météo, des cotations boursières ou toute autre
information en temps réel, vous pouvez intégrer facilement des APIs dans vos
applications Streamlit.
• Appel API avec requests : Voici un exemple d’interaction avec une API pour
récupérer des données météorologiques.
import requests
import streamlit as st

# Exemple de clé d'API pour une API de météo (à remplacer par une
clé valide)
api_key = "votre_cle_api"
city = st.text_input("Entrez une ville")

if city:
url = f"[Link]
q={city}&appid={api_key}"
response = [Link](url)
data = [Link]()

if [Link]("cod") != "404":
main_data = data["main"]
temp = main_data["temp"]
[Link](f"Température à {city} : {temp - 273.15:.2f}°C")
else:
[Link]("Ville non trouvée")

Dans cet exemple, l’application récupère les données météorologiques d’une ville
donnée via l’API OpenWeatherMap, ce qui permet d’afficher la température en temps
réel en fonction des entrées de l’utilisateur.

Multimédia et gestion de données

Streamlit offre également des options pour afficher des contenus multimédias interactifs,
tels que des vidéos ou des fichiers audio. Ces types de contenus peuvent enrichir votre
application et offrir une expérience plus immersive.
• Afficher une vidéo avec [Link]() : Streamlit permet d’afficher des vidéos à partir
de fichiers locaux ou d’URL. Par exemple :
[Link]("[Link]

Vous pouvez également télécharger des fichiers vidéo à partir de l’appareil de


l’utilisateur avec st.file_uploader() et les afficher dans l’application.
• Afficher un fichier audio avec [Link]() : De même, Streamlit permet d’intégrer
des fichiers audio dans l’application.
[Link]("audio_exemple.mp3")

Cela peut être utile pour des applications où l’audio joue un rôle clé, comme des analyses
audio ou des applications éducatives.
Gestion avancée des événements utilisateur

Lorsque vous gérez une interface interactive, il peut être nécessaire de répondre à des
événements utilisateur avec des actions conditionnelles. Streamlit vous permet de capter
ces événements pour personnaliser l’interaction de manière détaillée.
• Réagir aux changements dans les widgets : Les widgets dans Streamlit sont réactifs,
ce qui signifie que l’interface est mise à jour en temps réel dès qu’un utilisateur interagit
avec un composant.
Exemple de réactivité basée sur un [Link]() :
valeur = [Link]("Choisissez une valeur", 0, 100, 50)
[Link](f"La valeur choisie est : {valeur}")

Dans cet exemple, l’interface affiche la valeur actuelle du curseur chaque fois que
l’utilisateur interagit avec le slider. Vous pouvez aussi ajouter des actions
supplémentaires, comme l’exécution de calculs ou la mise à jour d’autres éléments de la
page en fonction des valeurs sélectionnées.

6. Déploiement d’une application Streamlit

Une fois que votre application Streamlit est prête, la prochaine étape consiste à la rendre
accessible à vos utilisateurs. Streamlit facilite considérablement le déploiement de vos
applications, que ce soit pour un usage personnel, au sein d’une organisation, ou pour un
public plus large. Dans cette section, nous allons explorer les différentes méthodes de
déploiement pour partager vos applications avec d’autres utilisateurs, ainsi que les
bonnes pratiques à suivre.

Déploiement avec Streamlit Community Cloud

Streamlit propose un service gratuit appelé Streamlit Community Cloud (anciennement


connu sous le nom de Streamlit Sharing) qui permet de déployer rapidement vos
applications directement depuis GitHub. Ce service est parfait pour les projets
personnels, les prototypes ou les applications légères. Voici comment procéder pour
déployer une application Streamlit sur Streamlit Community Cloud.
1. Préparer l’application : Avant de déployer, assurez-vous que votre application est
prête. Vérifiez que vous avez bien tous les fichiers nécessaires, y compris un fichier
[Link] qui liste les dépendances de votre projet.

2. Créer un repository GitHub : Placez votre application dans un repository GitHub. Ce


dépôt servira de source pour le déploiement.
3. Déployer sur Streamlit Community Cloud : Allez sur Streamlit Community Cloud,
connectez-vous avec votre compte GitHub, puis cliquez sur le bouton “New App”.
Sélectionnez votre repository GitHub et le fichier Python contenant votre application.
Une fois l’application déployée, un lien sera généré, et vous pourrez partager votre
application avec d’autres personnes.

Streamlit Community Cloud prend en charge l’auto-déploiement à chaque mise à jour du


code, ce qui facilite le processus de maintenance et de mise à jour de votre application.

Déploiement sur des serveurs cloud (Heroku, AWS, etc.)

Si vous avez des exigences de performance ou de personnalisation plus élevées, vous


pouvez déployer votre application Streamlit sur des plateformes de cloud computing
telles que Heroku, AWS, ou Google Cloud. Ces plateformes vous permettent d’avoir plus
de contrôle sur l’infrastructure et d’offrir plus de ressources à votre application.

Déploiement sur Heroku

Heroku est une plateforme en tant que service (PaaS) qui permet de déployer facilement
des applications web. Voici les étapes à suivre pour déployer une application Streamlit
sur Heroku :
1. Installer Heroku CLI : Téléchargez et installez Heroku CLI, qui permet de gérer vos
applications depuis le terminal.
2. Préparer l’application : Assurez-vous que votre application est prête, avec un fichier
[Link] et un fichier Procfile. Le fichier Procfile est nécessaire pour
indiquer à Heroku comment exécuter votre application.
Exemple de contenu d’un Procfile pour une application Streamlit :
web: streamlit run [Link]

3. Déployer l’application : Une fois le fichier Procfile et [Link] créés,


initialisez un dépôt Git si ce n’est pas déjà fait, puis effectuez les commandes suivantes :
git init
git add .
git commit -m "Initial commit"
heroku create <nom_de_votre_application>
git push heroku master

4. Lancer l’application : Une fois le push effectué, Heroku déploie automatiquement


l’application. Vous pouvez accéder à l’application via l’URL générée par Heroku.

Déploiement sur AWS (Amazon Web Services)

AWS propose plusieurs services pour déployer des applications web, y compris EC2
(Elastic Compute Cloud) et Elastic Beanstalk. Pour une solution simple, vous pouvez
déployer votre application Streamlit sur un serveur EC2.
1. Lancer une instance EC2 : Créez une instance EC2 via la console AWS. Choisissez un
type d’instance qui correspond à vos besoins (par exemple, [Link] pour des tests ou
des petites applications).
2. Connecter-vous à l’instance EC2 : Utilisez SSH pour vous connecter à votre instance.
Vous devrez d’abord générer une paire de clés SSH lors de la création de l’instance.
3. Installer les dépendances : Une fois connecté à l’instance EC2, installez Python,
Streamlit, et toutes les autres dépendances de votre application. Utilisez les commandes
suivantes :
sudo apt-get update
sudo apt-get install python3-pip
pip3 install streamlit

4. Déployer votre application : Copiez votre code sur l’instance EC2 (en utilisant scp ou
un autre outil de transfert de fichiers), puis exécutez l’application avec la commande
suivante :
streamlit run [Link] --[Link] false

5. Accéder à l’application : Vous devrez configurer les groupes de sécurité sur AWS pour
autoriser l’accès au port 8501 (port par défaut de Streamlit). Vous pourrez alors accéder
à votre application via l’IP publique de votre instance EC2.

Déploiement avec Docker

Si vous souhaitez déployer une application Streamlit de manière plus flexible et portable,
l’utilisation de Docker est une excellente option. Docker vous permet d’encapsuler votre
application dans un conteneur, ce qui garantit qu’elle fonctionnera de la même manière
sur n’importe quelle machine.
1. Créer un fichier Dockerfile : Créez un fichier Dockerfile dans le répertoire de votre
projet pour définir l’image Docker contenant toutes les dépendances nécessaires à
l’exécution de votre application Streamlit.
Exemple de Dockerfile :
FROM python:3.9-slim

# Installer les dépendances


RUN pip install streamlit

# Ajouter le code de l'application


ADD . /app

# Définir le répertoire de travail


WORKDIR /app

# Exposer le port utilisé par Streamlit


EXPOSE 8501

# Exécuter l'application Streamlit


CMD ["streamlit", "run", "[Link]"]
2. Construire l’image Docker : Dans le répertoire de votre projet, exécutez la commande
suivante pour construire l’image Docker.
docker build -t mon_app_streamlit .

3. Exécuter le conteneur Docker : Une fois l’image Docker construite, vous pouvez
lancer le conteneur avec la commande suivante :
docker run -p 8501:8501 mon_app_streamlit

Cela démarre votre application Streamlit dans un conteneur Docker et vous pouvez y
accéder via localhost:8501 ou l’IP du serveur si déployé sur un cloud.

Déploiement sur Google Cloud Platform (GCP)

Sur Google Cloud, vous pouvez utiliser des services comme Google App Engine ou
Compute Engine pour déployer vos applications Streamlit. Le processus est similaire à
celui décrit pour AWS, où vous devez configurer une machine virtuelle ou une
application gérée via Google Cloud.
1. Utiliser Google App Engine : App Engine vous permet de déployer facilement des
applications Python. Vous devrez préparer un fichier [Link] qui définit la
configuration de votre application.
2. Configurer le projet GCP : Créez un projet GCP, activez App Engine et téléchargez le
SDK Google Cloud. Vous pouvez ensuite déployer votre application en utilisant la
commande suivante depuis votre terminal :
gcloud app deploy

Bonnes pratiques de déploiement


• Sécuriser l’application : Avant de déployer une application Streamlit, assurez-vous
qu’elle est sécurisée. Activez les protections contre les attaques courantes comme le
cross-site scripting (XSS) et l’injection SQL si votre application interagit avec une base
de données.
• Suivi et surveillance : Une fois l’application déployée, il est essentiel de surveiller son
état de santé. Vous pouvez utiliser des outils comme Prometheus et Grafana pour
surveiller les performances de votre application.
• Gérer les mises à jour : Assurez-vous de versionner votre code et d’utiliser des outils
d’intégration continue (CI) et de déploiement continu (CD) pour faciliter le déploiement
des nouvelles versions de votre application.

7. Personnalisation de l’apparence et du style d’une application Streamlit

Une des forces de Streamlit est sa simplicité d’utilisation pour le développement


d’applications interactives. Cependant, parfois, il peut être nécessaire de personnaliser
l’apparence de l’application pour qu’elle corresponde à des exigences spécifiques ou pour
améliorer l’expérience utilisateur. Streamlit offre plusieurs moyens de personnaliser
l’apparence et le style de vos applications, notamment en modifiant les thèmes, en
ajoutant des CSS personnalisés ou en utilisant des composants externes.

Utilisation des thèmes Streamlit

Streamlit propose des options de personnalisation de base pour l’apparence via les
thèmes. Vous pouvez ajuster les couleurs, la police et le style global de votre application
en modifiant un fichier de configuration.
1. Activation des thèmes : Vous pouvez activer et personnaliser un thème Streamlit en
éditant le fichier de configuration .streamlit/[Link] dans le répertoire de
votre projet. Par exemple, voici un exemple de fichier [Link] pour personnaliser
le thème :
[theme]
primaryColor = "green"
backgroundColor = "white"
secondaryBackgroundColor = "#f0f0f0"
textColor = "black"
font = "sans serif"

2. Personnalisation via l’interface : Streamlit propose également une interface


utilisateur permettant de modifier les thèmes de manière simple. Vous pouvez changer
les couleurs principales, les polices et l’apparence de l’application en quelques clics, ce
qui peut être utile pour personnaliser le design en fonction de l’identité de votre
entreprise ou de votre projet.

Personnalisation avec du CSS personnalisé

Bien que Streamlit ne permette pas une personnalisation avancée via des feuilles de style
CSS de manière native, il est possible d’intégrer du CSS personnalisé en utilisant les
fonctionnalités de HTML et CSS intégrées de Streamlit.
1. Insertion de CSS via [Link]() : Vous pouvez injecter du CSS dans l’application
en utilisant la fonction [Link]() avec l’argument unsafe_allow_html=True.
Voici un exemple simple pour changer la couleur de fond de la page :
[Link]("""
<style>
body {
background-color: #f4f4f9;
}
</style>
""", unsafe_allow_html=True)

2. Personnalisation plus avancée : Vous pouvez également personnaliser l’apparence de


composants spécifiques (comme les boutons, les champs de texte ou les conteneurs) en
utilisant des règles CSS spécifiques. Par exemple, pour modifier la taille du texte dans un
élément :
[Link]("""
<style>
.css-1d391kg {
font-size: 20px;
}
</style>
""", unsafe_allow_html=True)

Dans cet exemple, .css-1d391kg est une classe CSS générée automatiquement par
Streamlit pour les widgets spécifiques. Il est possible de cibler ces classes pour appliquer
des modifications stylistiques. Notez que les classes peuvent changer en fonction des
mises à jour de Streamlit, ce qui peut rendre cette méthode moins stable à long terme.

Utilisation de st.beta_set_page_config() pour personnaliser l’interface

Une autre méthode simple pour personnaliser l’apparence d’une application Streamlit est
d’utiliser la fonction st.set_page_config(). Cette fonction vous permet de définir des
éléments comme le titre de la page, l’icône de l’application et d’autres paramètres qui
influencent l’apparence de l’application dans le navigateur.
• Définir le titre et l’icône de l’application :
st.set_page_config(

page_icon=" ",
layout="wide",
🌟
page_title="Mon Application Streamlit",

initial_sidebar_state="expanded"
)

Cette fonction permet de personnaliser les éléments suivants :


• page_title : Le titre de la page qui apparaît dans l’onglet du navigateur.
• page_icon : L’icône de la page (peut être un emoji ou un fichier image).
• layout : Définit la largeur du contenu de la page (options : centered, wide).
• initial_sidebar_state : Définit l’état initial de la barre latérale (options : expanded,
collapsed).

Utilisation de widgets personnalisés

Pour des personnalisations plus poussées et des éléments interactifs, vous pouvez
utiliser des bibliothèques externes comme Streamlit Components qui permettent
d’intégrer des widgets personnalisés ou des composants JavaScript dans votre
application. Ces composants peuvent offrir une expérience utilisateur plus riche, avec
des interfaces plus interactives.
1. Créer un composant personnalisé avec [Link].v1 : Streamlit permet de
créer et d’ajouter des composants personnalisés via la bibliothèque [Link].
Voici un exemple simple pour intégrer un composant HTML externe dans l’application.
import streamlit as st
import [Link].v1 as components

# Insertion d'un composant HTML personnalisé


[Link]("""
<div style="background-color: #ffcccc; padding: 20px;">
<h2>Mon composant personnalisé</h2>
<p>Voici un exemple de composant HTML personnalisé dans
Streamlit.</p>
</div>
""")

Cette méthode permet d’ajouter des éléments HTML complets, ainsi que du CSS ou du
JavaScript, à votre application.
2. Utilisation de bibliothèques JavaScript avec Streamlit Components : Vous
pouvez intégrer des bibliothèques JavaScript externes dans vos applications
Streamlit pour ajouter des fonctionnalités plus avancées, comme des cartes
interactives, des graphiques animés ou des éditeurs de texte avancés. Par
exemple, vous pourriez intégrer [Link], Leaflet ou Plotly pour des visualisations
plus dynamiques.

Intégration de la bibliothèque [Link]() avec des fichiers externes

Il est également possible d’ajouter du contenu externe à votre application, comme des
images, des vidéos ou des fichiers PDF. Cela peut enrichir votre application avec des
éléments visuels ou interactifs supplémentaires.
1. Afficher une image avec [Link]() : Streamlit permet d’afficher des images
directement dans l’application, soit à partir d’un fichier local, soit d’une URL.
[Link]("[Link] caption="Une belle
image")

2. Afficher une vidéo avec [Link]() : De la même manière, vous pouvez ajouter des
vidéos à votre application, soit à partir d’un fichier local, soit d’une URL.
[Link]("[Link]

3. Afficher un PDF avec st.file_uploader() : Vous pouvez permettre à l’utilisateur


de télécharger un fichier PDF ou afficher un fichier PDF dans l’application Streamlit.
pdf_file = st.file_uploader("Choisir un fichier PDF", type="pdf")
if pdf_file:
[Link](pdf_file)
Personnalisation de la barre latérale

La barre latérale est un composant essentiel de l’interface de Streamlit, offrant un espace


pour des options de navigation ou des filtres interactifs. Vous pouvez la personnaliser
pour ajouter des éléments comme des menus, des sliders ou des champs de texte.
• Ajouter des éléments à la barre latérale :
[Link]("Paramètres de l'application")
nom_utilisateur = [Link].text_input("Entrez votre nom")

Vous pouvez ajouter tout type de widget dans la barre latérale de manière similaire à la
page principale.

8. Gestion des erreurs et débogage dans Streamlit

Lorsque vous développez une application avec Streamlit, il est important de pouvoir
identifier et résoudre rapidement les erreurs pour garantir une expérience utilisateur
fluide. Streamlit offre plusieurs outils pour aider à la gestion des erreurs et au débogage,
afin que les développeurs puissent tester et affiner leurs applications efficacement. Cette
section couvre les différentes méthodes et techniques pour détecter, comprendre et
résoudre les erreurs dans une application Streamlit.

Utilisation du mode debug de Streamlit

Le mode debug est une fonctionnalité intégrée de Streamlit qui permet de visualiser les
erreurs et les problèmes directement dans l’application. Lorsqu’une erreur se produit,
Streamlit affiche un message d’erreur détaillé dans la console ou dans l’interface de
l’application. Pour activer le mode débogage, il suffit d’ajouter l’option --
[Link]=debug lors du lancement de votre application.

1. Activation du mode debug : Vous pouvez activer le mode debug dans le terminal avec
la commande suivante :
streamlit run [Link] --[Link]=debug

2. Message d’erreur détaillé : En mode debug, Streamlit vous fournit des messages
d’erreur détaillés qui incluent le type d’erreur, la ligne du code où l’erreur a eu lieu, et
une trace complète de l’exception. Cela peut être particulièrement utile pour localiser
rapidement les bugs dans votre code.

Affichage des erreurs dans l’interface utilisateur

Streamlit permet également d’afficher des erreurs dans l’interface utilisateur de manière
conviviale. Cela permet à l’utilisateur final de comprendre rapidement les problèmes qui
surviennent pendant l’exécution de l’application. Vous pouvez gérer et afficher des
messages d’erreur en utilisant les fonctionnalités de Streamlit comme [Link](),
[Link]() et [Link]().
1. Afficher un message d’erreur avec [Link]() : Cette fonction permet d’afficher
un message d’erreur dans l’interface utilisateur. Le message sera affiché dans un cadre
rouge pour signaler un problème.
[Link]("Une erreur s'est produite lors du traitement des
données.")

2. Afficher un message d’avertissement avec [Link]() : Si l’erreur n’est pas


critique, mais que vous souhaitez avertir l’utilisateur d’un problème, vous pouvez
utiliser [Link]().
[Link]("Les données sont incomplètes. Certains résultats
peuvent être manquants.")

3. Afficher un message d’information avec [Link]() : Pour fournir des


informations utiles sans signaler un problème, vous pouvez utiliser [Link]().
[Link]("Le traitement des données est en cours, veuillez
patienter.")

Gestion des exceptions

Lorsque vous gérez des erreurs dans votre code Python, il est essentiel de capturer les
exceptions pour éviter que l’application ne plante de manière inattendue. Streamlit vous
permet de capturer des erreurs avec des blocs try-except et de fournir des messages
d’erreur clairs à l’utilisateur.
1. Utiliser try-except pour capturer les erreurs : Par exemple, si vous avez un calcul
qui peut générer une erreur, vous pouvez l’encapsuler dans un bloc try-except pour
capturer l’exception et afficher un message adapté.
try:
result = 10 / 0
except ZeroDivisionError:
[Link]("Erreur : Division par zéro.")

2. Gestion des erreurs spécifiques : Vous pouvez capturer des erreurs spécifiques,
comme FileNotFoundError, ValueError, ou d’autres exceptions courantes. Il est
recommandé d’être aussi précis que possible pour informer l’utilisateur de la nature
exacte de l’erreur.
try:
# Code qui peut échouer
file = open("non_existent_file.txt", "r")
except FileNotFoundError:
[Link]("Le fichier demandé est introuvable.")

Log des erreurs

Le log des erreurs est un excellent moyen de suivre et de diagnostiquer les problèmes au
fil du temps. Streamlit permet d’enregistrer les messages d’erreur dans un fichier log
pour une consultation ultérieure. Pour configurer le logging, vous pouvez utiliser le
module logging de Python.
1. Configurer le logging : Vous pouvez configurer un fichier log pour capturer les erreurs
et les informations importantes pendant l’exécution de votre application. Voici un
exemple de configuration :
import logging

# Configuration du logger
[Link](filename='[Link]', level=[Link])

# Exemple d'enregistrement d'une erreur


try:
result = 10 / 0
except ZeroDivisionError as e:
[Link]("Erreur de division par zéro : %s", e)

2. Visualisation des logs : Les logs peuvent être consultés dans le fichier spécifié (dans
cet exemple, [Link]) pour analyser l’historique des erreurs et des événements. Cette
approche est particulièrement utile pour les applications déployées en production.

Débogage interactif avec Streamlit

Pour un débogage interactif plus avancé, vous pouvez utiliser des outils comme pdb
(Python Debugger) pour effectuer un suivi pas à pas de votre code. Cela vous permet de
vérifier l’état de votre application à différents moments de son exécution.
1. Utilisation de pdb pour le débogage : Vous pouvez insérer un point d’arrêt dans votre
code pour activer le débogueur interactif. Par exemple :
import pdb

# Point d'arrêt
pdb.set_trace()

# Code à déboguer
result = 10 / 0

Une fois que le débogueur est activé, vous pouvez inspecter les variables et exécuter le
code ligne par ligne pour mieux comprendre les erreurs.
2. Utilisation de [Link]() pour afficher des variables : Pour aider à comprendre le
comportement de votre code sans interrompre l’exécution, vous pouvez afficher des
informations sur les variables ou l’état du programme directement dans l’interface avec
[Link]().

[Link](f"La valeur de la variable result est : {result}")


Tests unitaires et validation

L’utilisation de tests unitaires pour vérifier les fonctionnalités de votre application est
une bonne pratique pour garantir la stabilité du code. Vous pouvez utiliser des outils
comme unittest ou pytest pour écrire des tests qui valident le bon fonctionnement
des composants de votre application avant leur déploiement.
1. Utilisation de unittest pour tester les fonctions : Par exemple, si vous avez une
fonction de calcul, vous pouvez écrire un test unitaire pour vous assurer qu’elle
fonctionne correctement.
import unittest

def addition(a, b):


return a + b

class TestAddition([Link]):
def test_addition(self):
[Link](addition(2, 3), 5)
[Link](addition(-1, 1), 0)

if __name__ == '__main__':
[Link]()

2. Intégration avec Streamlit : Bien que Streamlit ne supporte pas directement les tests
unitaires, vous pouvez utiliser des tests Python standard pour valider la logique de votre
application avant de l’intégrer avec Streamlit.

Chapitre 2: Optimisation des performances


1. Introduction à l’optimisation des performances

La gestion des performances est essentielle pour garantir une expérience utilisateur
fluide et agréable dans toute application, y compris celles construites avec Streamlit.
Streamlit, tout en étant un outil puissant pour créer des interfaces interactives, peut
parfois rencontrer des problèmes de performance, notamment lors du traitement de
grandes quantités de données ou de calculs intensifs. Lorsque ces problèmes
surviennent, l’application peut devenir lente, peu réactive ou même inutilisable.
Dans cette section, nous explorerons les raisons pour lesquelles la gestion des
performances est cruciale dans une application Streamlit. Nous verrons également les
différents outils et techniques disponibles pour optimiser les performances, permettant
ainsi d’assurer une expérience utilisateur fluide et réactive.
Pourquoi la gestion des performances est cruciale

Une application lente ou inefficace peut entraîner une mauvaise expérience utilisateur et
décourager les utilisateurs finaux. Streamlit permet de créer des applications interactives
rapidement, mais cela implique que les performances doivent être constamment
surveillées, surtout lors de la mise en production d’une application avec un grand nombre
d’utilisateurs ou de données. Optimiser les performances permet d’assurer :
• Réactivité : Les utilisateurs doivent être en mesure d’interagir avec l’application
sans délais de réponse excessifs.
• Efficacité des ressources : Une gestion efficace des ressources (comme la
mémoire et le processeur) garantit que l’application fonctionne même sur des
machines avec des capacités limitées.
• Scalabilité : Une bonne gestion des performances permet à l’application de bien
fonctionner à grande échelle, même avec des données ou des utilisateurs
multiples.

Impact de la performance sur l’expérience utilisateur

L’expérience utilisateur d’une application dépend largement de la vitesse et de la fluidité


des interactions. Des temps de chargement longs, des graphiques lents à s’afficher ou
des tâches qui semblent ne jamais se terminer peuvent nuire à la satisfaction des
utilisateurs et, dans de nombreux cas, les amener à abandonner l’application.
• Vitesse de chargement : Si le temps de chargement d’une page est trop long, les
utilisateurs risquent de quitter l’application avant même qu’elle n’apparaisse à
l’écran.
• Fluidité de l’interaction : Les interfaces réactives permettent à l’utilisateur de
manipuler facilement les composants sans attendre des temps de réponse.
• Résultats en temps réel : Dans les applications interactives, les utilisateurs
attendent souvent des résultats instantanés. Un calcul lent ou une mise à jour
retardée peut sérieusement compromettre l’expérience utilisateur.
La performance ne concerne pas seulement le temps de réponse, mais aussi l’efficacité
globale de l’application, la façon dont elle gère les données et le traitement en temps
réel, ce qui permet de maintenir l’engagement et l’interaction des utilisateurs.

Présentation des outils et techniques d’optimisation

Streamlit offre plusieurs fonctionnalités qui aident à améliorer les performances des
applications. Parmi les techniques les plus courantes :
• Mise en cache : La mise en cache permet de mémoriser les résultats des calculs et
de les réutiliser lorsqu’ils sont demandés à nouveau, réduisant ainsi les temps de
calcul.
• Traitement parallèle : Pour les tâches lourdes, le traitement parallèle ou en
arrière-plan peut éviter que l’interface utilisateur se bloque.
• Optimisation des ressources : La gestion de la mémoire et de la CPU permet de
s’assurer que l’application fonctionne de manière optimale sur des machines avec
des ressources limitées.
• Compression des données : La compression des données volumineuses permet de
réduire les temps de transfert et d’améliorer les performances générales.
Dans les sections suivantes, nous explorerons en détail chacune de ces techniques et
comment les utiliser dans une application Streamlit.

2. Optimisation de l’affichage des données

Streamlit est conçu pour rendre les applications interactives rapidement, mais l’affichage
de grandes quantités de données peut entraîner des ralentissements importants. Dans
cette section, nous allons examiner comment gérer efficacement l’affichage des données
dans Streamlit, en utilisant des techniques pour optimiser la vitesse de rendu des
composants et améliorer l’expérience utilisateur.

Gérer l’affichage de grandes quantités de données

Lorsque vous travaillez avec de grandes bases de données ou des jeux de données
complexes, il est crucial de ne pas tout afficher à la fois, car cela peut entraîner un
ralentissement des performances. Voici quelques stratégies pour gérer l’affichage de
grandes quantités de données dans Streamlit :
• Paginer les données : Au lieu d’afficher toutes les lignes d’un tableau ou d’une base de
données, vous pouvez paginer les données et n’afficher qu’une partie des informations à
la fois. Cela permet de charger uniquement les éléments nécessaires à l’affichage.
import pandas as pd
import streamlit as st

# Exemple avec un DataFrame


df = [Link]({
'Colonne 1': range(1, 10001),
'Colonne 2': range(10001, 20001)
})

# Utilisation de pagination
page_size = 100 # Nombre d'éléments par page
page = [Link]('Page', 1, len(df) // page_size + 1)
start_row = (page - 1) * page_size
end_row = page * page_size

[Link]([Link][start_row:end_row])
• Affichage conditionnel : Une autre approche consiste à afficher les données
conditionnellement en fonction des entrées de l’utilisateur. Par exemple, vous pouvez
n’afficher que les résultats correspondant à un filtre ou à une requête spécifique.

Techniques pour améliorer la vitesse de rendu des composants

Streamlit met en place des mécanismes pour optimiser la performance des composants,
mais il est important de respecter certaines bonnes pratiques pour améliorer encore plus
la vitesse de rendu.
• Limiter le nombre de widgets interactifs : Chaque widget (comme un bouton, une
zone de texte, un curseur, etc.) dans Streamlit nécessite un calcul et une mise à jour de
l’interface. Il est conseillé de limiter leur nombre si ce n’est pas nécessaire. L’ajout de
nombreux widgets interactifs peut ralentir l’application, surtout lorsque les utilisateurs
effectuent des changements fréquents.
• Utilisation de [Link]() pour une mise à jour plus rapide : Lorsqu’une partie de
l’interface doit être mise à jour fréquemment (par exemple, un graphique dynamique),
l’utilisation de [Link]() peut accélérer le rendu en permettant de réutiliser un
espace sans recréer tout le composant.
chart = [Link]()
for i in range(100):
chart.line_chart([i for i in range(i)])

• Utilisation de la fonction [Link]() pour les calculs coûteux : Streamlit offre la


possibilité de mettre en cache des calculs qui ne changent pas fréquemment, afin de ne
pas recalculer les mêmes résultats à chaque changement. Cela est particulièrement utile
pour les opérations coûteuses en temps de calcul, comme le traitement des données ou
la génération de graphiques.
@[Link]
def expensive_computation(data):
# Calcul intensif
return data * 2

result = expensive_computation(df['Colonne 1'])


[Link](result)

Utilisation des widgets de manière optimale

Certains composants, tels que les tableaux de données, les graphiques et les cartes,
peuvent être gourmands en ressources. Il est donc crucial de bien comprendre comment
les utiliser de manière optimale.
• Utilisation efficace de [Link]() et [Link]() : Lorsque vous affichez de
grandes quantités de données sous forme de tableau, choisissez le bon composant.
[Link]() permet une interaction dynamique (tri, filtrage), mais peut être plus
lent pour de grands volumes. Si l’interaction n’est pas nécessaire, [Link]() peut
être plus rapide.
[Link]([Link]())

• Optimisation des graphiques avec [Link]() et st.plotly_chart() : Les


graphiques peuvent rapidement ralentir une application, surtout lorsqu’ils contiennent
beaucoup de points de données. Il est recommandé d’utiliser des bibliothèques comme
Matplotlib et Plotly de manière efficace en limitant le nombre de points affichés ou en
choisissant des types de graphiques plus simples.
import [Link] as px

fig = [Link](df, x='Colonne 1', y='Colonne 2')


st.plotly_chart(fig)

• Utilisation de graphiques agrégés : Lorsque vous travaillez avec de grandes quantités


de données, il peut être utile de les agréger avant de les afficher (par exemple, en
moyennant des valeurs ou en affichant des résumés statistiques) pour réduire la charge
de calcul et améliorer la réactivité.

Cela conclut cette section sur l’optimisation de l’affichage des données.

3. Mise en cache des données avec st.cache_data() et st.cache_resource()

La mise en cache est l’une des techniques les plus puissantes pour améliorer les
performances des applications Streamlit. Lorsqu’une fonction ou une opération coûteuse
est appelée fréquemment, la mise en cache permet de stocker les résultats de ces appels
pour les réutiliser ultérieurement, réduisant ainsi le temps d’exécution. Streamlit propose
deux types de mise en cache : st.cache_data() et st.cache_resource(). Ces deux
méthodes ont des cas d’utilisation différents et permettent d’optimiser les performances
de manière ciblée.

Explication de la mise en cache dans Streamlit

La mise en cache dans Streamlit fonctionne en stockant les résultats des calculs dans la
mémoire afin que, lorsque la même entrée est demandée à nouveau, le résultat soit
directement récupéré sans avoir à recalculer ou recharger les données. Cela permet de
gagner un temps considérable, surtout lorsqu’il s’agit de calculs complexes ou de
chargement de grandes quantités de données.
• st.cache_data() : Ce décorateur est utilisé pour mettre en cache des données
résultant d’opérations telles que le calcul de valeurs, l’importation de fichiers ou la
transformation de grandes quantités de données.
• st.cache_resource() : Ce décorateur est destiné à mettre en cache des
ressources qui ne changent pas fréquemment, telles que des modèles
d’apprentissage automatique, des connexions à des bases de données, ou des
objets lourds en mémoire.
Différence entre st.cache_data() et st.cache_resource()

Les deux décorateurs st.cache_data() et st.cache_resource() servent à des fins


légèrement différentes :
• st.cache_data() est utilisé pour des données qui sont recalculées fréquemment,
telles que des résultats de transformation de données ou des calculs complexes. Par
exemple, lorsque vous effectuez une analyse de données, la mise en cache de certaines
étapes permet de réduire les temps de recalcul.
@st.cache_data
def load_data(file_path):
return pd.read_csv(file_path)

• st.cache_resource() est destiné à la mise en cache d’objets qui ne sont pas


recalculés à chaque exécution mais qui sont coûteux à charger, comme des modèles
d’apprentissage automatique ou des connexions à des bases de données. Cette approche
optimise le stockage et la gestion des ressources.
@st.cache_resource
def load_model(model_path):
return [Link](model_path)

Cas d’utilisation et exemples pratiques

Cas 1 : Mise en cache des données d’un fichier CSV

Imaginons que vous ayez une fonction qui charge un fichier CSV. Si ce fichier est
volumineux et que vous chargez régulièrement les mêmes données, la mise en cache
permet d’éviter de recharger le fichier à chaque interaction de l’utilisateur.
import pandas as pd
import streamlit as st

@st.cache_data
def load_data():
return pd.read_csv('large_file.csv')

df = load_data()
[Link](df)

Dans cet exemple, load_data() sera exécutée une seule fois pour la session utilisateur,
et les données seront mises en cache pour les interactions suivantes.

Cas 2 : Mise en cache d’un modèle d’apprentissage automatique

Lorsque vous travaillez avec des modèles d’apprentissage automatique, il est souvent
nécessaire de charger des modèles lourds à chaque démarrage de l’application. En
utilisant st.cache_resource(), vous pouvez vous assurer que le modèle n’est chargé
qu’une seule fois.
import joblib
import streamlit as st

@st.cache_resource
def load_model():
return [Link]('trained_model.pkl')

model = load_model()
prediction = [Link](data)
[Link](prediction)

Ici, le modèle est mis en cache, ce qui réduit le temps de chargement lorsque l’utilisateur
interagit avec l’application, tout en garantissant que le modèle n’est pas rechargé
inutilement.

Avantages de la mise en cache


• Réduction des temps de calcul : Les calculs complexes, comme le traitement de
grandes bases de données ou l’application de modèles d’apprentissage
automatique, sont effectués une seule fois et stockés en mémoire pour une
récupération rapide.
• Amélioration de l’interactivité : Les applications Streamlit peuvent répondre
beaucoup plus rapidement aux utilisateurs lorsque les résultats précédemment
calculés sont réutilisés.
• Ressources optimisées : Les ressources telles que les connexions à la base de
données ou les objets volumineux sont chargées une seule fois et mises en cache
pour éviter des accès répétitifs qui ralentissent l’application.

4. Gestion des ressources et des processus lourds

Les applications Streamlit sont souvent confrontées à des processus lourds, tels que des
calculs intensifs, des analyses de données volumineuses ou des appels à des services
externes. Ces tâches peuvent rendre l’application moins réactive et perturber
l’expérience utilisateur. Dans cette section, nous aborderons différentes méthodes pour
gérer ces processus lourds de manière efficace, en permettant à l’utilisateur de continuer
à interagir avec l’application sans blocage.

Exécution de tâches longues sans bloquer l’interface

Une des principales préoccupations lors de l’exécution de processus lourds est d’éviter
de bloquer l’interface utilisateur. Streamlit offre plusieurs moyens de traiter des tâches
de fond tout en maintenant l’interface réactive.

Utilisation de [Link]() pour indiquer un traitement en cours

[Link]() est une fonction simple qui permet d’afficher un message ou une
animation pendant l’exécution d’un processus long. Cela informe l’utilisateur que
l’application est en cours de traitement et qu’il doit patienter. Cela ne bloque pas
l’interface, mais aide à gérer les attentes de l’utilisateur.
import streamlit as st
import time

with [Link]('En cours de traitement...'):


[Link](5) # Simulation d'un processus long
[Link]('Processus terminé !')

Dans cet exemple, l’application affiche un message d’attente pendant 5 secondes. Cela
donne l’impression que l’application est toujours réactive et en activité.

Utilisation de processus en arrière-plan

Pour des tâches encore plus lourdes qui nécessitent un traitement parallèle ou en
arrière-plan, vous pouvez utiliser des librairies comme [Link] ou
threading. Cela permet d’exécuter une fonction dans un thread séparé, de sorte que
l’interface utilisateur reste réactive.
Voici un exemple utilisant [Link] pour lancer
une tâche en arrière-plan :
import streamlit as st
import [Link]
import time

def long_task():
[Link](5)
return "Tâche terminée"

# Utilisation de ThreadPoolExecutor
with [Link]() as executor:
future = [Link](long_task)
while not [Link]():
[Link]("Processus en cours...")
result = [Link]()

[Link](result)

Cet exemple utilise un thread parallèle pour exécuter la fonction long_task(), ce qui
permet à l’utilisateur de voir les messages intermédiaires sans bloquer l’interface. Une
fois le traitement terminé, le résultat est affiché.

Exécution en arrière-plan et gestion des tâches longues

Certaines applications nécessitent l’exécution de tâches longues ou complexes, telles


que des calculs ou des traitements sur de grandes quantités de données. Dans ces cas, il
est préférable de traiter ces tâches de manière asynchrone pour que l’application reste
réactive.
Traitement asynchrone avec asyncio

Pour des processus nécessitant une gestion plus fine des tâches simultanées, vous
pouvez utiliser asyncio pour gérer les processus longs de manière asynchrone. Cela
permet d’exécuter plusieurs tâches en parallèle sans bloquer l’interface.
Voici un exemple d’utilisation de asyncio avec Streamlit :
import streamlit as st
import asyncio

async def long_process():


await [Link](5) # Simule un processus long
return "Traitement terminé"

async def main():


[Link]("Début du traitement...")
result = await long_process()
[Link](result)

if [Link]("Démarrer le processus"):
[Link](main())

Dans cet exemple, lorsque l’utilisateur clique sur le bouton, un processus asynchrone est
lancé. L’interface Streamlit n’est pas bloquée et peut continuer à être utilisée pendant
que le processus se déroule en arrière-plan.

Utilisation de st.experimental_rerun() pour relancer l’application

Dans certains cas, il peut être nécessaire de relancer l’application Streamlit afin
d’actualiser certaines données ou de relancer une tâche après une certaine condition.
st.experimental_rerun() peut être utilisé pour redémarrer l’application sans qu’il soit
nécessaire de la fermer et de la rouvrir manuellement.
import streamlit as st

if [Link]("Rerun l'application"):
st.experimental_rerun()

Cela permet de réinitialiser l’état de l’application ou de relancer un processus de manière


contrôlée.

Conclusion

La gestion des processus lourds est essentielle pour maintenir une bonne performance et
une expérience utilisateur optimale. En utilisant des techniques comme [Link](),
les processus en arrière-plan, ou l’exécution asynchrone, vous pouvez gérer efficacement
les tâches longues tout en préservant la réactivité de votre application Streamlit. Ces
méthodes vous permettent de garantir que les utilisateurs puissent interagir avec votre
application sans subir de délais excessifs.
5. Optimisation de la gestion de la mémoire

Dans toute application, la gestion efficace de la mémoire est cruciale, surtout lorsqu’il
s’agit de travailler avec des ensembles de données volumineux ou de réaliser des calculs
complexes. Streamlit étant une application en mémoire, une mauvaise gestion des
ressources peut entraîner des ralentissements, des erreurs de mémoire et une mauvaise
expérience utilisateur. Cette section explore plusieurs techniques pour optimiser
l’utilisation de la mémoire dans une application Streamlit.

Suivi de l’utilisation de la mémoire

L’une des premières étapes pour optimiser la gestion de la mémoire dans Streamlit
consiste à comprendre et à suivre la quantité de mémoire utilisée par l’application. En
surveillant l’utilisation de la mémoire, vous pouvez identifier les goulots d’étranglement
et déterminer où des optimisations sont nécessaires.
Python propose plusieurs bibliothèques pour surveiller l’utilisation de la mémoire,
comme psutil. Vous pouvez utiliser ces outils pour obtenir un aperçu de la mémoire
utilisée par votre application.
Voici un exemple simple de suivi de la mémoire avec psutil :
import psutil
import streamlit as st

def memory_usage():
process = [Link]()
mem = process.memory_info().rss / (1024 * 1024) # Convertir en Mo
return mem

[Link](f"Utilisation de la mémoire : {memory_usage()} Mo")

Ce code permet de suivre en temps réel l’utilisation de la mémoire de votre application,


vous donnant ainsi un aperçu des ressources utilisées par chaque interaction.

Libération de la mémoire

L’un des principaux défis liés à l’utilisation de la mémoire dans une application Streamlit
est de s’assurer que les ressources sont correctement libérées lorsque celles-ci ne sont
plus nécessaires. Lorsqu’une grande quantité de données est chargée ou qu’un objet est
manipulé, il est important de libérer explicitement ces ressources pour éviter les fuites de
mémoire.
Voici quelques bonnes pratiques pour libérer de la mémoire :
• Suppression des objets inutiles : Une fois que vous avez terminé avec un objet ou une
variable, vous pouvez la supprimer en utilisant la fonction del de Python.
del dataframe

• Garbage collection : Python utilise un mécanisme de gestion automatique de la


mémoire, appelé “garbage collection” (GC), pour nettoyer la mémoire en supprimant les
objets qui ne sont plus utilisés. Cependant, dans certains cas, vous pouvez forcer un
nettoyage plus agressif en utilisant le module gc.
import gc
[Link]()

Chargement efficace des données

Les données volumineuses peuvent rapidement saturer la mémoire. Il est donc important
de charger les données de manière efficace en évitant de charger tout un jeu de données
en mémoire si cela n’est pas nécessaire. Voici quelques approches pour optimiser le
chargement des données :
• Chargement paresseux (Lazy Loading) : Au lieu de charger tout le fichier ou le jeu de
données en mémoire à la fois, vous pouvez charger les données par morceaux (chunks)
et ne charger que ce qui est nécessaire à un moment donné. Pandas, par exemple,
permet de charger les fichiers CSV en morceaux avec l’argument chunksize.
import pandas as pd

chunksize = 10000
for chunk in pd.read_csv('large_data.csv', chunksize=chunksize):
# Traiter chaque morceau de données indépendamment
process(chunk)

• Utilisation de formats de données efficaces : Utilisez des formats de données


compacts et optimisés pour le stockage en mémoire, comme les fichiers Parquet ou
HDF5, plutôt que les CSV ou Excel, qui sont moins performants.
df = pd.read_parquet('[Link]')

Optimisation des objets lourds en mémoire

Certains objets Python, comme les grands modèles d’apprentissage automatique ou les
grandes bases de données en mémoire, peuvent être très gourmands en mémoire. Voici
quelques stratégies pour optimiser ces objets :
• Sérialisation et dé-sérialisation : Si vous avez des objets qui sont utilisés de manière
répétée, vous pouvez les sérialiser dans un format plus léger (par exemple, avec pickle
ou joblib) et les charger uniquement lorsque nécessaire.
import joblib

# Sauvegarder un modèle
[Link](model, '[Link]')
# Charger un modèle
model = [Link]('[Link]')

• Utilisation de modèles compressés : Si vous travaillez avec des modèles


d’apprentissage automatique, il peut être utile de compresser ces modèles avant de les
charger en mémoire afin de réduire leur empreinte.

Meilleures pratiques pour une gestion efficace de la mémoire


• Utilisation des types de données appropriés : Le choix des bons types de données
peut réduire considérablement l’utilisation de la mémoire. Par exemple, dans Pandas,
l’utilisation des types category ou des types d’entiers plus petits peut réduire
l’empreinte mémoire d’un DataFrame.
df['column'] = df['column'].astype('category')

• Optimisation des graphes et des visualisations : Lorsque vous affichez des


graphiques dans Streamlit, essayez de ne pas surcharger la mémoire en affichant trop de
points de données ou en générant des graphiques trop complexes. Utilisez des
agrégations ou des échantillons réduits des données pour afficher des résumés visuels
plutôt que des jeux de données complets.

En mettant en œuvre ces stratégies de gestion de la mémoire, vous pourrez optimiser


l’efficacité de votre application Streamlit, réduire les risques de fuites de mémoire et
améliorer les performances globales.

6. Utilisation des composants personnalisés pour l’optimisation des performances

Les composants personnalisés permettent d’étendre les fonctionnalités de Streamlit en


ajoutant des éléments interactifs ou des visualisations qui ne sont pas disponibles
directement via les widgets intégrés. Cependant, bien que ces composants offrent une
flexibilité accrue, il est essentiel de les utiliser correctement pour maintenir des
performances optimales. Cette section explore comment créer et utiliser des
composants personnalisés tout en optimisant les performances de l’application.

Création de composants personnalisés avec Streamlit

Streamlit permet de créer des composants personnalisés à l’aide du module


[Link].v1. Ces composants peuvent être utilisés pour intégrer du HTML, du
JavaScript ou des bibliothèques externes dans votre application. Par exemple, vous
pouvez intégrer des graphiques interactifs à l’aide de bibliothèques JavaScript comme
[Link] ou Plotly, ou même créer des widgets qui n’existent pas dans l’API de Streamlit.

Exemple simple : intégration de JavaScript personnalisé

Voici un exemple d’utilisation de composants personnalisés pour insérer un élément


HTML et JavaScript dans votre application Streamlit. L’exemple montre comment créer
un bouton personnalisé avec un comportement spécifique en JavaScript.
import streamlit as st
import [Link].v1 as components

# Composant personnalisé
html_code = """
<html>
<head>
<script>
function greet() {
alert("Hello from custom component!");
}
</script>
</head>
<body>
<button onclick="greet()">Click me</button>
</body>
</html>
"""

# Affichage du composant dans l'application Streamlit


[Link](html_code)

Dans cet exemple, un simple bouton HTML est créé, et lorsque l’utilisateur clique dessus,
un message d’alerte JavaScript est affiché. Bien que simple, cet exemple montre la
puissance d’un composant personnalisé pour ajouter des comportements spécifiques à
une application.

Optimisation des composants personnalisés

Si les composants personnalisés ne sont pas utilisés avec précaution, ils peuvent
entraîner des problèmes de performance. Voici quelques conseils pour optimiser leur
utilisation :
1. Chargement conditionnel des composants : Assurez-vous que les composants
personnalisés sont chargés uniquement lorsque cela est nécessaire. Par exemple, si un
graphique interactif n’est requis que pour certains utilisateurs ou conditions, il est
préférable de ne pas le charger à chaque interaction.
if [Link]('Afficher le graphique'):
[Link]("<div id='chart'></div>", height=500)

2. Minimisation du code JavaScript : Le code JavaScript personnalisé peut parfois


ralentir le rendu de votre application si celui-ci est trop lourd ou mal optimisé. Limitez
la taille du code JavaScript inclus dans vos composants personnalisés et veillez à ce que
l’exécution du script ne soit pas bloquante.
3. Utilisation de WebAssembly pour les calculs intensifs : Si votre composant
nécessite des calculs lourds, envisagez d’utiliser WebAssembly (Wasm) pour exécuter
du code en parallèle et améliorer les performances. WebAssembly permet d’exécuter du
code plus rapidement qu’en JavaScript traditionnel, notamment pour des calculs
mathématiques.
4. Réduction du nombre de re-rendus : Lorsque vous travaillez avec des composants
personnalisés, il est important de réduire au minimum les re-rendus. Chaque re-rendu
peut entraîner un nouveau calcul ou un nouveau rendu du composant, ce qui peut
ralentir l’application. Utilisez des mécanismes comme la mise en cache pour éviter de
recalculer ou de redessiner les composants à chaque modification.
@[Link]
def compute_expensive_component():
# Calcul complexe ici
return result

5. Limitation de la taille des données passées aux composants : Les composants


personnalisés peuvent devenir lents si de grandes quantités de données sont envoyées à
chaque mise à jour. Limitez la taille des données envoyées et utilisez des techniques
d’échantillonnage ou d’agrégation pour envoyer des résumés des données.
6. Débogage et profiling : Lors de la création de composants personnalisés, il est essentiel
de profiler les performances pour identifier les goulots d’étranglement. Utilisez des
outils de développement comme les DevTools de Chrome pour observer l’impact des
composants sur les performances.

Exemple avancé : intégration d’un graphique Plotly interactif

Plotly est une bibliothèque de visualisation populaire qui permet de créer des graphiques
interactifs. Vous pouvez intégrer un graphique Plotly dans votre application Streamlit à
l’aide de st.plotly_chart() ou en utilisant un composant personnalisé pour un
contrôle plus fin sur l’interaction et l’optimisation des performances.
import streamlit as st
import [Link] as px
import plotly.graph_objects as go

# Données de démonstration
df = [Link]()

# Créer un graphique interactif Plotly


fig = [Link](data=[Link](x=df['year'], y=df['lifeExp'],
mode='markers'))

# Afficher le graphique avec Streamlit


st.plotly_chart(fig, use_container_width=True)

Dans cet exemple, un graphique interactif Plotly est intégré de manière transparente
dans l’interface de Streamlit. L’option use_container_width=True permet d’ajuster le
graphique à la largeur du conteneur Streamlit, garantissant ainsi une mise en page
réactive.
Utilisation de Streamlit Components pour des intégrations plus complexes

Si vos composants personnalisés nécessitent une logique plus complexe, vous pouvez
créer des composants en utilisant le framework Streamlit Components. Cela permet de
gérer les interactions utilisateur de manière plus sophistiquée, comme l’intégration
d’interfaces utilisateur plus avancées avec des bibliothèques front-end comme React,
[Link] ou Angular.
Voici un exemple d’utilisation de Streamlit Components pour intégrer une bibliothèque
front-end :
import streamlit as st
import [Link].v1 as components

# Utilisation d'un composant React personnalisé


components.declare_component("my_react_component",
path="path_to_react_component")

[Link]("Voici un composant React intégré dans Streamlit")

Cela permet d’incorporer des éléments d’interface utilisateur plus interactifs et


personnalisés tout en maintenant une bonne séparation entre le code front-end et back-
end. Cette approche est particulièrement utile lorsque vous avez besoin d’intégrer des
solutions front-end complexes dans votre application.
En suivant ces bonnes pratiques pour l’utilisation des composants personnalisés, vous
pouvez non seulement étendre les fonctionnalités de votre application Streamlit, mais
aussi maintenir des performances optimales, même lors de l’intégration de composants
lourds ou complexes.

7. Amélioration des performances des graphiques et visualisations

Optimisation de la vitesse des bibliothèques de visualisation

Les graphiques et visualisations jouent un rôle central dans les applications Streamlit,
mais ils peuvent rapidement devenir un facteur limitant en termes de performance,
notamment lorsqu’il s’agit de grands ensembles de données ou de graphiques interactifs.
Pour améliorer les performances, il est essentiel de choisir la bonne bibliothèque de
visualisation et de l’optimiser pour qu’elle soit aussi rapide que possible.
• Utiliser des bibliothèques performantes : Certaines bibliothèques de visualisation
sont mieux adaptées aux grandes quantités de données et aux rendus rapides. Par
exemple, Plotly et Altair sont particulièrement performantes avec de grands
ensembles de données grâce à leurs mécanismes de simplification des graphiques.
Plotly permet par exemple de réduire le nombre de points affichés sans perdre en
qualité visuelle grâce à des fonctionnalités comme le downsampling (échantillonnage
de données).
• Réduire la complexité des graphiques : Plus un graphique est complexe (nombre
d’axes, annotations, ou types d’interactions), plus il mettra de temps à se rendre. Il est
donc conseillé de simplifier les graphiques lorsque cela est possible. Par exemple,
préférez des graphiques simples (barres, courbes, etc.) et évitez les graphiques
complexes comme les graphiques en 3D ou avec de multiples légendes.
• Utiliser le rendu statique lorsque possible : Pour les applications où l’interaction
avec le graphique n’est pas nécessaire, privilégiez les graphiques statiques (comme ceux
générés avec matplotlib ou seaborn). Les graphiques statiques sont plus rapides à
générer et peuvent être suffisants pour certaines visualisations.

Exemple d’un graphique optimisé avec Plotly :


import streamlit as st
import [Link] as px
import pandas as pd

df = pd.read_csv("large_dataset.csv")

# Réduction de la taille des données pour améliorer la vitesse de


rendu
df_sampled = [Link](n=1000)

fig = [Link](df_sampled, x="x_column", y="y_column")


st.plotly_chart(fig)

Dans cet exemple, un sous-ensemble de 1000 points est affiché au lieu de tout le jeu de
données, ce qui accélère le rendu du graphique.

Utilisation des visualisations interactives sans compromettre la réactivité

Les graphiques interactifs offrent une expérience utilisateur enrichie, mais peuvent
parfois affecter la réactivité, en particulier avec des jeux de données volumineux. Pour
maintenir une expérience fluide tout en offrant des graphiques interactifs, vous pouvez
appliquer les stratégies suivantes :
• Limiter les interactions possibles : Si vous utilisez des graphiques interactifs, essayez
de limiter le nombre d’interactions disponibles pour l’utilisateur. Par exemple, évitez de
permettre un zoom trop fin ou l’affichage de trop de détails sur un graphique interactif.
• Optimiser les callbacks : Les graphiques interactifs dans des bibliothèques comme
Plotly ou Bokeh peuvent impliquer des callbacks lourds lorsqu’un utilisateur interagit
avec eux. Réduisez les callbacks à ceux qui sont strictement nécessaires, et minimisez les
calculs ou les mises à jour lors de chaque interaction.
8. Optimisation des performances avec st.session_state

Le st.session_state dans Streamlit est utilisé pour gérer l’état de l’application entre
les interactions utilisateur. Cependant, une mauvaise gestion de l’état peut entraîner des
ralentissements, surtout si de nombreux objets sont stockés dans le session_state.
Optimiser l’utilisation de st.session_state peut donc avoir un impact direct sur les
performances de l’application.

Optimiser l’utilisation de l’état dans l’application

Le st.session_state est particulièrement utile pour suivre les variables entre les
différents tours de l’application, mais il est important de ne pas y stocker des objets
volumineux qui ne changent pas fréquemment. Par exemple, il est préférable de ne pas
stocker des datasets complets dans le session_state, mais plutôt de les charger une
fois et de les référencer ensuite.
• Stocker uniquement les informations nécessaires : Ne conservez dans
session_state que les informations vraiment nécessaires pour l’exécution de
l’application. Par exemple, une valeur booléenne pour savoir si un calcul a été effectué
ou un ID d’utilisateur peut être stocké, mais évitez de garder des objets comme des
DataFrames lourds ou des objets modèles complexes.
• Effacer les variables obsolètes : Utilisez la méthode st.session_state.clear()
pour supprimer les objets du session_state lorsque ceux-ci ne sont plus nécessaires,
surtout si ces objets sont volumineux.

Exemple de gestion optimale de session_state :


import streamlit as st

# Vérifier si la donnée est déjà dans le session_state


if 'data' not in st.session_state:
st.session_state.data = load_large_data()

[Link](st.session_state.data)

Dans cet exemple, le jeu de données est chargé dans session_state uniquement si cela
n’a pas été fait précédemment, évitant ainsi de recharger les données à chaque
interaction.

9. Amélioration du temps de chargement avec st.experimental_memo

La fonction st.experimental_memo() permet de mémoriser le résultat de calculs


coûteux et d’éviter de les recalculer lors de chaque interaction. Cela peut réduire
significativement le temps de chargement, en particulier pour les calculs ou les
traitements de données complexes.
Utilisation de st.experimental_memo() pour la mise en cache des fonctions

st.experimental_memo() est une méthode très puissante pour améliorer les


performances en stockant en cache les résultats de calculs, et ce, de manière
transparente pour l’utilisateur. Contrairement à st.cache_data() qui se concentre
principalement sur la mise en cache des données, st.experimental_memo() se
concentre sur la mise en cache des résultats de fonctions.
Exemple d’utilisation :
import streamlit as st
import time

@st.experimental_memo
def expensive_computation(x):
[Link](2) # Simuler un calcul coûteux
return x * 2

result = expensive_computation(10)
[Link](result)

Dans cet exemple, le calcul coûteux (le sommeil simulé) n’est effectué qu’une seule fois
pour une valeur donnée de x. Les appels subséquents avec la même valeur de x
retourneront immédiatement le résultat en cache, réduisant ainsi le temps de calcul.

Avantages et limitations

L’utilisation de st.experimental_memo() peut être très bénéfique pour des fonctions


coûteuses, mais il est important de noter que cette fonctionnalité est expérimentale et
pourrait être sujette à des changements. Il est également essentiel de gérer
correctement la dépendance des arguments de la fonction pour éviter de cacher des
résultats incorrects.

10. Tests des performances

Tester les performances d’une application Streamlit est crucial pour identifier les goulets
d’étranglement et améliorer l’expérience utilisateur. Les tests de performance peuvent
être réalisés de manière manuelle ou à l’aide d’outils externes.

Mesurer les performances avec des outils externes

Il existe plusieurs outils qui permettent de mesurer les performances d’une application,
comme cProfile, line_profiler, ou des outils externes comme Google Lighthouse.
Ces outils permettent de visualiser les parties de votre code qui prennent le plus de
temps à s’exécuter, ce qui peut vous aider à cibler les zones nécessitant une
optimisation.
Exemple d’utilisation de cProfile :
import cProfile

def main():
# Code de l’application Streamlit
...

[Link]('main()')

Cela permettra d’obtenir un rapport détaillé sur les performances de l’application et de


repérer les parties lentes du code.

11. Bonnes pratiques pour maintenir de bonnes performances

Maintenir des bonnes performances dans une application Streamlit n’est pas seulement
une question d’optimisation initiale. Il est important de suivre certaines bonnes pratiques
pour garantir que les performances restent optimales à mesure que l’application se
développe.

Routines d’entretien pour surveiller les performances


• Surveillez régulièrement les temps de réponse : Utilisez des outils de surveillance
pour suivre les temps de réponse et identifier les problèmes de performances au fur et à
mesure qu’ils surviennent.
• Effectuez des tests de charge : Testez l’application sous des charges élevées pour
comprendre comment elle se comporte en situation de stress et quelles parties du code
nécessitent des améliorations.

Optimisation continue et évolution de l’application

L’optimisation des performances ne doit pas être vue comme une tâche ponctuelle. Avec
l’évolution de l’application, de nouvelles optimisations peuvent être nécessaires. Vous
devez continuer à analyser les performances et à appliquer les techniques les plus
récentes pour maintenir une bonne réactivité et une utilisation optimale des ressources.

Chapitre 3 : Déploiement avec Streamlit - 5 Projets Phares


TP : Création d’un Dashboard de données interactif avec Streamlit

Objectif :
L’objectif de ce projet est de créer un tableau de bord interactif à l’aide de Streamlit qui
permet de visualiser des données sous forme de graphiques dynamiques. Vous utiliserez
des bibliothèques telles que pandas, matplotlib et plotly pour manipuler et afficher
des données. Vous apprendrez également à intégrer des widgets interactifs pour
permettre à l’utilisateur d’interagir avec les données en temps réel.
Prérequis :
• Connaissances de base en Python
• Connaissances de base en manipulation de données avec pandas
• Notions de base sur l’utilisation de graphiques avec matplotlib ou plotly
• Avoir Streamlit installé
Durée estimée : 1h30

Étape 1 : Préparer l’environnement


1. Installer les bibliothèques nécessaires
Si vous n’avez pas encore installé les bibliothèques requises, vous pouvez les installer via
pip :
pip install streamlit pandas matplotlib plotly

2. Démarrer un nouveau projet Streamlit


Créez un nouveau fichier Python dans un répertoire de votre choix, par exemple
[Link]. Vous allez y écrire le code pour votre tableau de bord.

Étape 2 : Charger et préparer les données


1. Charger un jeu de données
Pour cet exemple, nous allons utiliser le jeu de données iris de la bibliothèque
seaborn ou un autre jeu de données disponible. Vous pouvez aussi utiliser un fichier
CSV local pour charger vos données.
import pandas as pd
import seaborn as sns

# Charger le jeu de données


df = sns.load_dataset('iris')

Vous pouvez aussi charger un jeu de données local avec pandas :


df = pd.read_csv('chemin/vers/votre/[Link]')

2. Afficher un aperçu des données


Utilisez [Link] pour afficher un aperçu du jeu de données et vérifier qu’il a été
chargé correctement.
import streamlit as st

[Link]("Aperçu du jeu de données :", [Link]())


Étape 3 : Créer des graphiques interactifs
1. Graphique simple avec matplotlib
Nous allons d’abord afficher un graphique simple avec matplotlib.
import [Link] as plt

# Créer un graphique avec matplotlib


fig, ax = [Link]()
[Link](df['sepal_length'], df['sepal_width'])
ax.set_xlabel('Longueur du sépale')
ax.set_ylabel('Largeur du sépale')
ax.set_title('Graphique de dispersion de l\'iris')

# Afficher le graphique dans Streamlit


[Link](fig)

2. Graphique interactif avec plotly


Nous allons maintenant utiliser plotly pour un graphique interactif.
import [Link] as px

# Créer un graphique interactif avec Plotly


fig = [Link](df, x='sepal_length', y='sepal_width',
color='species', title="Graphique interactif de l'iris")

# Afficher le graphique dans Streamlit


st.plotly_chart(fig)

Étape 4 : Ajouter des widgets interactifs


1. Ajouter un sélecteur pour filtrer les données
Nous allons maintenant ajouter un widget de sélection ([Link]) pour
permettre à l’utilisateur de choisir une espèce et de filtrer les données en fonction de ce
choix.
species = [Link]('Sélectionnez une espèce',
df['species'].unique())

# Filtrer les données en fonction de l'espèce choisie


df_filtered = df[df['species'] == species]

# Afficher les données filtrées


[Link](f"Affichage des données pour l'espèce {species}:")
[Link](df_filtered)

2. Mettre à jour le graphique en fonction du filtre


Nous allons mettre à jour le graphique interactif en fonction de l’espèce sélectionnée.
# Créer un graphique interactif avec Plotly en fonction de
l'espèce sélectionnée
fig = [Link](df_filtered, x='sepal_length', y='sepal_width',
color='species', title=f"Graphique de l'espèce {species}")
st.plotly_chart(fig)

Étape 5 : Affichage des statistiques


1. Afficher des statistiques sur les données filtrées
Utilisez [Link] pour afficher des statistiques descriptives sur les données
sélectionnées.
[Link](f"Statistiques descriptives pour l'espèce {species}:")
[Link](df_filtered.describe())

2. Ajouter un histogramme interactif pour visualiser la distribution


Affichez un histogramme pour la longueur du sépale en fonction de l’espèce
sélectionnée.
fig_hist = [Link](df_filtered, x='sepal_length',
color='species', title=f"Histogramme de la longueur du sépale
pour {species}")
st.plotly_chart(fig_hist)

Étape 6 : Finalisation et déploiement


1. Organiser l’application avec des colonnes
Vous pouvez améliorer l’interface utilisateur en organisant les graphiques et les widgets
dans des colonnes.
col1, col2 = [Link](2)

with col1:
st.plotly_chart(fig)

with col2:
st.plotly_chart(fig_hist)

2. Lancer l’application Streamlit


Pour tester votre application localement, exécutez la commande suivante dans votre
terminal à partir du répertoire contenant le fichier [Link] :
streamlit run [Link]
Étape 7 : Déploiement sur Streamlit Cloud
1. Créer un dépôt GitHub
Placez votre fichier [Link] dans un dépôt GitHub. Vous devez également créer
un fichier [Link] pour spécifier les dépendances.
Exemple de contenu pour [Link] :
streamlit
pandas
plotly
matplotlib
seaborn

2. Déployer sur Streamlit Cloud


Rendez-vous sur Streamlit Cloud et connectez-vous avec votre compte GitHub. Cliquez
sur “New App”, sélectionnez le dépôt GitHub et le fichier [Link], puis cliquez
sur “Deploy”.

Résumé

Dans ce TP, vous avez créé un tableau de bord interactif avec Streamlit en utilisant un
jeu de données, des graphiques dynamiques et des widgets pour permettre à l’utilisateur
de filtrer et visualiser les données. Vous avez également appris à déployer l’application
sur Streamlit Cloud pour la rendre accessible en ligne.

TP : Application de Machine Learning en Temps Réel avec Streamlit et Matplotlib

Objectif :
L’objectif de ce projet est de déployer un modèle de machine learning sur Streamlit,
permettant aux utilisateurs de faire des prédictions en temps réel. Nous allons utiliser un
modèle de classification simple (par exemple, un modèle de classification de fleurs Iris)
pour prédire la catégorie d’une fleur en fonction de ses caractéristiques, telles que la
longueur et la largeur du sépale et du pétale. Les résultats seront visualisés avec
matplotlib.

Prérequis :
• Connaissances de base en Python et en Machine Learning
• Connaissances de base sur l’utilisation de scikit-learn
• Avoir Streamlit, scikit-learn et matplotlib installés
Durée estimée : 2h
Étape 1 : Préparer l’environnement
1. Installer les bibliothèques nécessaires
Si vous n’avez pas encore installé les bibliothèques requises, vous pouvez les installer via
pip :
pip install streamlit scikit-learn matplotlib pandas

2. Créer le fichier Python


Créez un fichier Python pour votre application Streamlit, par exemple ml_app.py.

Étape 2 : Charger et entraîner le modèle de Machine Learning


1. Charger les bibliothèques nécessaires
Nous allons utiliser scikit-learn pour créer un modèle de machine learning et
pandas pour manipuler les données.

import streamlit as st
import pandas as pd
from sklearn import datasets
from sklearn.model_selection import train_test_split
from [Link] import RandomForestClassifier
from [Link] import accuracy_score
import [Link] as plt

2. Charger le jeu de données Iris


Utilisez le jeu de données Iris fourni par scikit-learn.
iris = datasets.load_iris()
df = [Link]([Link], columns=iris.feature_names)
df['species'] = [Link]

3. Entraîner le modèle de classification


Divisez les données en ensembles d’entraînement et de test, puis entraînez un modèle de
RandomForestClassifier.

X = df[iris.feature_names]
y = df['species']

X_train, X_test, y_train, y_test = train_test_split(X, y,


test_size=0.2, random_state=42)

model = RandomForestClassifier()
[Link](X_train, y_train)

# Évaluation du modèle
y_pred = [Link](X_test)
accuracy = accuracy_score(y_test, y_pred)

[Link](f"Accuracy du modèle : {accuracy * 100:.2f}%")


Étape 3 : Créer l’interface utilisateur avec Streamlit
1. Demander les caractéristiques de l’utilisateur
Utilisez st.number_input() pour permettre à l’utilisateur de saisir les valeurs des
caractéristiques de la fleur (longueur et largeur du sépale et du pétale).
[Link]("Prédiction de l'espèce de la fleur Iris")

sepal_length = st.number_input('Longueur du sépale (cm)',


min_value=0.0, max_value=10.0, step=0.1)
sepal_width = st.number_input('Largeur du sépale (cm)',
min_value=0.0, max_value=10.0, step=0.1)
petal_length = st.number_input('Longueur du pétale (cm)',
min_value=0.0, max_value=10.0, step=0.1)
petal_width = st.number_input('Largeur du pétale (cm)',
min_value=0.0, max_value=10.0, step=0.1)

2. Faire une prédiction en fonction des entrées utilisateur


Lorsque l’utilisateur entre les valeurs des caractéristiques, nous utilisons ces valeurs
pour faire une prédiction.
features = [[sepal_length, sepal_width, petal_length,
petal_width]]
prediction = [Link](features)

species = iris.target_names[prediction][0]
[Link](f"L'espèce prédite est : {species}")

Étape 4 : Visualiser les résultats avec Matplotlib


1. Créer un graphique de répartition des espèces dans le jeu de données
Utilisez matplotlib pour afficher un graphique montrant la répartition des
différentes espèces dans le jeu de données.
fig, ax = [Link]()
df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor',
2: 'virginica'})
ax = [Link]('species').size().plot(kind='bar', color=['red',
'green', 'blue'], ax=ax)
ax.set_xlabel('Espèce')
ax.set_ylabel('Nombre d\'observations')
ax.set_title('Répartition des espèces Iris')

[Link](fig)

2. Afficher un graphique de dispersion pour les caractéristiques de la fleur


Utilisez matplotlib pour afficher un graphique de dispersion en fonction des
caractéristiques de la fleur (par exemple, longueur et largeur du sépale).
fig, ax = [Link]()
[Link](df['sepal length (cm)'], df['sepal width (cm)'],
c=df['species'].apply(lambda x: {'setosa': 'red', 'versicolor':
'green', 'virginica': 'blue'}[x]))
ax.set_xlabel('Longueur du sépale (cm)')
ax.set_ylabel('Largeur du sépale (cm)')
ax.set_title('Graphique de dispersion des fleurs Iris')

[Link](fig)

Étape 5 : Ajouter des éléments de visualisation


1. Afficher des graphiques pour mieux comprendre les prédictions
Affichez un graphique montrant les prédictions pour les différentes valeurs des
caractéristiques.
fig, ax = [Link]()
[Link](df['sepal length (cm)'], df['sepal width (cm)'],
c=df['species'].apply(lambda x: {'setosa': 'red', 'versicolor':
'green', 'virginica': 'blue'}[x]))
[Link](sepal_length, sepal_width, color='black',
label='Prédiction', marker='x', s=100)
ax.set_xlabel('Longueur du sépale (cm)')
ax.set_ylabel('Largeur du sépale (cm)')
ax.set_title('Graphique de dispersion avec la prédiction')

[Link]()
[Link](fig)

Étape 6 : Déployer l’application


1. Créer un dépôt GitHub
Si ce n’est pas déjà fait, placez votre fichier ml_app.py dans un dépôt GitHub. Vous
devez également créer un fichier [Link] pour spécifier les dépendances
nécessaires à votre application.
Exemple de contenu pour [Link] :
streamlit
scikit-learn
pandas
matplotlib

2. Déployer sur Streamlit Cloud


Rendez-vous sur Streamlit Cloud et connectez-vous avec votre compte GitHub. Créez un
nouveau projet, sélectionnez le dépôt GitHub et le fichier ml_app.py, puis déployez
l’application.
Résumé

Dans ce TP, vous avez créé une application de machine learning avec Streamlit, où
l’utilisateur peut saisir les caractéristiques d’une fleur et obtenir une prédiction en temps
réel. Vous avez également utilisé matplotlib pour visualiser les résultats et les
prédictions. Enfin, vous avez appris à déployer l’application sur Streamlit Cloud pour la
rendre accessible en ligne.

TP : Tableau de Bord de Visualisation des Données avec Streamlit et Matplotlib

Objectif :
L’objectif de ce projet est de créer un tableau de bord interactif de visualisation des
données à l’aide de Streamlit et matplotlib. Ce tableau de bord permettra d’analyser un
jeu de données, d’explorer ses statistiques descriptives, et d’afficher différents types de
graphiques (histogrammes, nuages de points, etc.) afin de mieux comprendre les relations
entre les variables.
Prérequis :
• Connaissances de base en Python et en analyse de données
• Connaissances de base sur l’utilisation de pandas et matplotlib
• Avoir Streamlit, pandas et matplotlib installés
Durée estimée : 2h

Étape 1 : Préparer l’environnement


1. Installer les bibliothèques nécessaires
Si vous n’avez pas encore installé les bibliothèques requises, vous pouvez les installer via
pip :
pip install streamlit pandas matplotlib

2. Créer le fichier Python


Créez un fichier Python pour votre application Streamlit, par exemple
dashboard_app.py.

Étape 2 : Charger et préparer les données


1. Charger les bibliothèques nécessaires
Nous allons utiliser pandas pour manipuler les données et matplotlib pour les
visualisations.
import streamlit as st
import pandas as pd
import [Link] as plt

2. Charger un jeu de données


Utilisez un jeu de données public comme le jeu de données des Titanic, disponible dans
seaborn, ou utilisez un jeu de données CSV local. Pour cet exemple, nous allons utiliser
le jeu de données des Titanic.
@[Link]
def load_data():
url =
"[Link]
r/[Link]"
data = pd.read_csv(url)
return data

df = load_data()

3. Afficher les premières lignes du jeu de données


Affichez un aperçu des premières lignes du jeu de données pour donner à l’utilisateur
une idée de ce à quoi il ressemble.
[Link]("Aperçu des données :")
[Link]([Link]())

Étape 3 : Analyse et visualisation des données


1. Statistiques descriptives
Utilisez pandas pour afficher des statistiques descriptives comme la moyenne, la
médiane, et l’écart type pour chaque colonne numérique.
[Link]("Statistiques descriptives :")
[Link]([Link]())

2. Visualisation des données


Créez des graphiques interactifs en utilisant matplotlib. Par exemple, affichez un
histogramme pour la variable Age et un nuage de points pour Age vs Fare.
– Histogramme pour la variable Age :
fig, ax = [Link]()
[Link](df['Age'].dropna(), bins=20, color='skyblue',
edgecolor='black')
ax.set_title('Distribution de l\'âge')
ax.set_xlabel('Âge')
ax.set_ylabel('Fréquence')

[Link](fig)
– Nuage de points pour Age vs Fare :
fig, ax = [Link]()
[Link](df['Age'], df['Fare'], color='orange',
alpha=0.5)
ax.set_title('Age vs Fare')
ax.set_xlabel('Âge')
ax.set_ylabel('Tarif')

[Link](fig)

Étape 4 : Graphiques interactifs et filtrage des données


1. Filtres interactifs avec Streamlit
Ajoutez des filtres interactifs pour permettre à l’utilisateur de filtrer les données en
fonction de certaines variables. Par exemple, filtrez les passagers selon leur classe
(Pclass) et leur sexe (Sex).
[Link]('Filtres')

pclass = [Link]('Sélectionner une classe',


df['Pclass'].unique())
sex = [Link]('Sélectionner le sexe', ['Tous', 'Male',
'Female'])

if sex != 'Tous':
df_filtered = df[(df['Pclass'] == pclass) & (df['Sex'] ==
sex)]
else:
df_filtered = df[df['Pclass'] == pclass]

[Link](f"Passagers filtrés (classe {pclass} et sexe {sex}):")


[Link](df_filtered)

2. Graphiques interactifs en fonction des filtres


Créez des graphiques qui changent en fonction des filtres appliqués. Par exemple, un
histogramme du tarif des passagers filtrés.
fig, ax = [Link]()
[Link](df_filtered['Fare'], bins=20, color='green',
edgecolor='black')
ax.set_title(f'Distribution du tarif pour la classe {pclass} et
sexe {sex}')
ax.set_xlabel('Tarif')
ax.set_ylabel('Fréquence')

[Link](fig)
Étape 5 : Ajouter des graphiques supplémentaires
1. Graphique de corrélation entre variables
Ajoutez un graphique de corrélation entre différentes variables, comme l’âge, le tarif, et
la survie. Vous pouvez utiliser un heatmap avec matplotlib pour afficher cette
corrélation.
correlation = df[['Age', 'Fare', 'Survived']].corr()
fig, ax = [Link]()
cax = [Link](correlation, cmap='coolwarm')
[Link](cax)

ax.set_xticks(range(len([Link])))
ax.set_yticks(range(len([Link])))

ax.set_xticklabels([Link], rotation=90)
ax.set_yticklabels([Link])

[Link](fig)

2. Boxplot pour la variable Fare


Créez un boxplot pour la variable Fare pour visualiser la distribution des tarifs.
fig, ax = [Link]()
[Link](df['Fare'].dropna())
ax.set_title('Boxplot du tarif')
ax.set_ylabel('Tarif')

[Link](fig)

Étape 6 : Déployer l’application


1. Créer un dépôt GitHub
Si ce n’est pas déjà fait, placez votre fichier dashboard_app.py dans un dépôt GitHub.
Vous devez également créer un fichier [Link] pour spécifier les
dépendances nécessaires à votre application.
Exemple de contenu pour [Link] :
streamlit
pandas
matplotlib

2. Déployer sur Streamlit Cloud


Rendez-vous sur Streamlit Cloud et connectez-vous avec votre compte GitHub. Créez un
nouveau projet, sélectionnez le dépôt GitHub et le fichier dashboard_app.py, puis
déployez l’application.
Résumé

Dans ce TP, vous avez créé un tableau de bord interactif avec Streamlit pour analyser et
visualiser les données d’un jeu de données. Vous avez utilisé des graphiques
matplotlib pour explorer la distribution des variables et afficher des relations entre
elles. Vous avez également ajouté des filtres interactifs pour permettre à l’utilisateur de
personnaliser les données affichées. Enfin, vous avez appris à déployer votre application
Streamlit en ligne via Streamlit Cloud.

TP: Application de traitement de texte interactif

Objectif :
Créer une application Streamlit interactive qui permet de traiter du texte en temps réel,
en offrant des fonctionnalités telles que l’analyse de texte, le résumé automatique, ou
l’extraction d’entités nommées (NER). L’objectif est de rendre ces tâches accessibles à un
utilisateur via une interface simple et intuitive.

Étape 1 : Préparer l’environnement


1. Installer les bibliothèques nécessaires
Vous aurez besoin de streamlit, spacy, et éventuellement transformers pour des
tâches de traitement du langage naturel (NLP).
Installez ces bibliothèques via pip :
pip install streamlit spacy transformers

2. Télécharger un modèle spaCy pour l’analyse de texte


Pour les fonctionnalités d’analyse linguistique, nous utiliserons un modèle pré-entraîné
de spaCy. Par exemple, pour l’anglais, vous pouvez utiliser :
python -m spacy download en_core_web_sm

Étape 2 : Créer l’interface utilisateur Streamlit


1. Créer un fichier Python pour l’application
Créez un fichier Python appelé text_processing_app.py.
2. Importer les bibliothèques nécessaires
Nous allons importer streamlit, spacy pour l’analyse de texte et transformers
pour un résumé automatique si nécessaire.
import streamlit as st
import spacy
from transformers import pipeline
3. Charger le modèle spaCy
Chargez un modèle linguistique de spaCy pour effectuer des analyses telles que
l’extraction d’entités nommées (NER).
nlp = [Link]("en_core_web_sm")

4. Créer la structure de l’application


Ajoutez un titre et une description dans Streamlit.
[Link]("Application de Traitement de Texte")
[Link]("Cette application vous permet de traiter du texte en
temps réel pour des tâches telles que l'analyse de texte, le
résumé automatique, et l'extraction d'entités nommées.")

Étape 3 : Ajouter les fonctionnalités interactives


1. Ajouter un champ de texte pour l’entrée utilisateur
Demandez à l’utilisateur de saisir ou de coller un texte qu’il souhaite analyser.
user_input = st.text_area("Entrez votre texte ici", height=200)

2. Ajouter un bouton pour effectuer l’analyse du texte


Créez un bouton pour déclencher l’analyse du texte après que l’utilisateur l’ait saisi.
if [Link]("Analyser"):
doc = nlp(user_input)
[Link]("### Entités nommées détectées :")
for ent in [Link]:
[Link](f"- {[Link]} ({ent.label_})")

Cela extrait et affiche toutes les entités nommées présentes dans le texte saisi, comme
les noms de personnes, de lieux, d’organisations, etc.
3. Ajouter la fonctionnalité de résumé automatique
Utilisez transformers pour implémenter un résumé automatique du texte. Vous
pouvez utiliser un modèle pré-entraîné comme BART ou T5 pour cette tâche.
summarizer = pipeline("summarization")

if [Link]("Résumer le texte"):
summary = summarizer(user_input, max_length=150,
min_length=30, do_sample=False)
[Link]("### Résumé :")
[Link](summary[0]['summary_text'])
Étape 4 : Déploiement de l’application
1. Créer un fichier [Link]
Pour faciliter le déploiement de votre application, créez un fichier [Link]
contenant les bibliothèques nécessaires :
streamlit
spacy
transformers

2. Déployer sur Streamlit Cloud


Vous pouvez héberger votre application en ligne sur Streamlit Cloud. Pour ce faire, créez
un dépôt GitHub, ajoutez le fichier Python et le fichier [Link], puis
connectez-vous à Streamlit Cloud pour déployer l’application.

– Allez sur Streamlit Cloud.


– Connectez votre dépôt GitHub.
– Sélectionnez le fichier Python pour le déploiement.

Résumé du projet

Dans ce projet, vous avez créé une application interactive de traitement de texte avec
Streamlit, permettant d’effectuer des analyses linguistiques (extraction d’entités
nommées) et de générer des résumés automatiques. Vous avez également préparé votre
application pour le déploiement sur Streamlit Cloud, offrant ainsi aux utilisateurs un
accès facile à ces fonctionnalités.

TP : Application de gestion de tâches avec authentification

Objectif :
Développer une application Streamlit pour la gestion de tâches personnelles avec
authentification utilisateur. L’application permettra aux utilisateurs de créer, lire, mettre à
jour et supprimer des tâches (fonctionnalités CRUD). En plus de cela, l’application inclura
un système d’authentification pour garantir que chaque utilisateur accède uniquement à
ses propres tâches.

Étape 1 : Préparer l’environnement


1. Installer les bibliothèques nécessaires
Pour ce projet, nous utiliserons streamlit pour l’interface, sqlite3 ou postgresql
pour la gestion de la base de données, et PyJWT pour l’authentification via JSON Web
Token (JWT).
Installez les bibliothèques nécessaires avec pip :
pip install streamlit sqlite3 pyjwt
2. Configurer la base de données
Pour simplifier, nous utiliserons une base de données SQLite pour stocker les tâches des
utilisateurs. Chaque utilisateur aura un identifiant unique (UUID) qui sera utilisé pour
l’authentification et la gestion de ses tâches.

Étape 2 : Créer l’interface utilisateur Streamlit


1. Créer un fichier Python pour l’application
Créez un fichier Python appelé task_manager_app.py.
2. Importer les bibliothèques nécessaires
Nous allons importer streamlit, sqlite3 pour la gestion de la base de données, et
PyJWT pour la gestion des sessions d’utilisateur.

import streamlit as st
import sqlite3
import uuid
import jwt
import datetime
from hashlib import sha256

Étape 3 : Créer la base de données SQLite


1. Créer la base de données
Créez une base de données SQLite avec une table pour les utilisateurs et une autre pour
les tâches. Chaque tâche sera liée à un utilisateur via un identifiant utilisateur unique.
conn = [Link]('task_manager.db')
c = [Link]()

# Créer une table pour les utilisateurs


[Link]('''
CREATE TABLE IF NOT EXISTS users (
user_id TEXT PRIMARY KEY,
username TEXT NOT NULL,
password_hash TEXT NOT NULL
)
''')

# Créer une table pour les tâches


[Link]('''
CREATE TABLE IF NOT EXISTS tasks (
task_id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id TEXT,
task_name TEXT,
completed BOOLEAN,
FOREIGN KEY (user_id) REFERENCES users(user_id)
)
''')

[Link]()
[Link]()

2. Fonctions pour la gestion des utilisateurs et des tâches


Nous aurons besoin de fonctions pour gérer les utilisateurs (inscription, connexion) et
pour gérer les tâches (ajout, suppression, mise à jour, lecture).

– Fonction d’inscription :
Lorsqu’un utilisateur s’inscrit, son mot de passe est haché et stocké dans la
base de données.
def register_user(username, password):
password_hash = sha256([Link]('utf-8')).hexdigest()
user_id = str(uuid.uuid4())

conn = [Link]('task_manager.db')
c = [Link]()
[Link]('INSERT INTO users (user_id, username,
password_hash) VALUES (?, ?, ?)',
(user_id, username, password_hash))
[Link]()
[Link]()

– Fonction de connexion :
Pour la connexion, nous vérifierons le mot de passe de l’utilisateur et
générerons un jeton JWT pour maintenir la session active.
def login_user(username, password):
password_hash = sha256([Link]('utf-8')).hexdigest()

conn = [Link]('task_manager.db')
c = [Link]()
[Link]('SELECT user_id, password_hash FROM users WHERE
username = ?', (username,))
result = [Link]()
[Link]()

if result and result[1] == password_hash:


user_id = result[0]
token = [Link]({'user_id': user_id, 'exp':
[Link]() + [Link](hours=1)},
'secret_key', algorithm='HS256')
return token
else:
return None

– Fonction de gestion des tâches :


Pour ajouter, supprimer ou marquer comme terminée une tâche,
l’utilisateur doit être authentifié via son jeton JWT.
def add_task(user_id, task_name):
conn = [Link]('task_manager.db')
c = [Link]()
[Link]('INSERT INTO tasks (user_id, task_name, completed)
VALUES (?, ?, ?)',
(user_id, task_name, False))
[Link]()
[Link]()

def get_tasks(user_id):
conn = [Link]('task_manager.db')
c = [Link]()
[Link]('SELECT task_id, task_name, completed FROM tasks
WHERE user_id = ?', (user_id,))
tasks = [Link]()
[Link]()
return tasks

def delete_task(task_id):
conn = [Link]('task_manager.db')
c = [Link]()
[Link]('DELETE FROM tasks WHERE task_id = ?', (task_id,))
[Link]()
[Link]()

Étape 4 : Créer l’interface utilisateur Streamlit


1. Écran d’inscription et de connexion
Créez des champs de saisie pour l’inscription et la connexion des utilisateurs.
[Link]("Gestion de Tâches")

menu = ["Se connecter", "S'inscrire"]


choice = [Link]("Sélectionner une action", menu)

if choice == "Se connecter":


username = st.text_input("Nom d'utilisateur")
password = st.text_input("Mot de passe", type="password")
if [Link]("Se connecter"):
token = login_user(username, password)
if token:
st.session_state.token = token
[Link]("Connecté avec succès!")
else:
[Link]("Nom d'utilisateur ou mot de passe
incorrect")

elif choice == "S'inscrire":


username = st.text_input("Nom d'utilisateur")
password = st.text_input("Mot de passe", type="password")
if [Link]("S'inscrire"):
register_user(username, password)
[Link]("Utilisateur créé avec succès!")

2. Afficher et gérer les tâches


Une fois l’utilisateur connecté, il peut ajouter, voir, supprimer et marquer les tâches
comme terminées.
if 'token' in st.session_state:
token = st.session_state.token
user_data = [Link](token, 'secret_key',
algorithms=['HS256'])
user_id = user_data['user_id']

[Link]("Mes tâches")
tasks = get_tasks(user_id)
for task in tasks:
[Link](f"{task[1]} - {'Terminé' if task[2] else 'Non
terminé'}")
if [Link](f"Supprimer {task[1]}", key=task[0]):
delete_task(task[0])
st.experimental_rerun()

new_task = st.text_input("Ajouter une nouvelle tâche")


if [Link]("Ajouter"):
add_task(user_id, new_task)
st.experimental_rerun()

Étape 5 : Déploiement de l’application


1. Créer un fichier [Link]
Ajoutez toutes les dépendances de l’application dans le fichier [Link].
streamlit
sqlite3
pyjwt

2. Déployer sur Streamlit Cloud


Vous pouvez déployer votre application Streamlit sur Streamlit Cloud, ou utiliser un
autre service comme Heroku. Pour déployer sur Streamlit Cloud, connectez votre dépôt
GitHub et suivez les instructions de déploiement.

Résumé du projet

Dans ce projet, vous avez créé une application Streamlit de gestion de tâches avec un
système d’authentification par JWT. L’application permet aux utilisateurs de s’inscrire, se
connecter, gérer leurs tâches (ajouter, supprimer, marquer comme terminées), et de
visualiser uniquement leurs propres tâches. Vous avez également préparé l’application
pour le déploiement sur Streamlit Cloud ou un autre serveur de votre choix.

Projet 5 : Visualisation de données en temps réel avec WebSocket

Objectif :
Créer une application Streamlit qui permet de visualiser des données en temps réel. Par
exemple, nous allons simuler un flux de données financières ou d’Internet des objets
(IoT) en utilisant WebSocket pour transmettre les données en direct. Les graphiques
seront mis à jour en temps réel pour refléter les nouvelles données reçues.

Étape 1 : Préparer l’environnement


1. Installer les bibliothèques nécessaires
Nous utiliserons streamlit pour l’interface utilisateur, plotly pour les graphiques
interactifs et websockets pour la gestion des connexions WebSocket.
Installez les bibliothèques avec pip :
pip install streamlit plotly websockets

2. Créer un fichier Python pour l’application


Créez un fichier Python appelé real_time_data_app.py.
3. Mettre en place un serveur WebSocket simulé
Pour simuler des données en temps réel, nous allons créer un serveur WebSocket qui
envoie des données toutes les secondes. Ce serveur sera consommé par l’application
Streamlit.

Étape 2 : Créer le serveur WebSocket


1. Créer le serveur WebSocket
Le serveur WebSocket enverra des données aléatoires à chaque client connecté. Ces
données peuvent être, par exemple, des valeurs simulées de stock ou des capteurs IoT.
Créez un fichier Python pour le serveur WebSocket, appelé ws_server.py.
import asyncio
import websockets
import random
import json

async def send_data(websocket, path):


while True:
# Simuler des données financières ou IoT
data = {
"timestamp": "2024-12-14T10:00:00Z",
"value": [Link](50, 150) # Valeur simulée
(par exemple, prix d'un actif)
}
await [Link]([Link](data))
await [Link](1) # Envoyer des données toutes les
secondes

async def main():


server = await [Link](send_data, "localhost", 8765)
print("Serveur WebSocket démarré...")
await server.wait_closed()

if __name__ == "__main__":
[Link](main())

Ce serveur enverra un objet JSON avec un timestamp et une value simulée à tous les
clients connectés. Vous pouvez tester ce serveur en l’exécutant séparément.

Étape 3 : Créer l’application Streamlit pour la visualisation en temps réel


1. Créer l’application Streamlit
Nous allons maintenant créer l’application Streamlit pour recevoir les données en temps
réel via WebSocket et afficher les graphiques mis à jour dynamiquement.
Dans le fichier real_time_data_app.py, ajoutez le code suivant :
import streamlit as st
import plotly.graph_objs as go
import asyncio
import websockets
import json
import threading

# Variables globales pour stocker les données en temps réel


timestamps = []
values = []

# Fonction pour recevoir les données du serveur WebSocket


async def receive_data():
uri = "[Link] # URL du serveur WebSocket
async with [Link](uri) as websocket:
while True:
message = await [Link]()
data = [Link](message)
[Link](data["timestamp"])
[Link](data["value"])
if len(timestamps) > 100: # Limiter la taille des
données
[Link](0)
[Link](0)

# Mise à jour de l'interface utilisateur (graphique)


st.experimental_rerun()

# Lancer le thread pour récupérer les données


def start_websocket_thread():
loop = asyncio.new_event_loop()
asyncio.set_event_loop(loop)
loop.run_until_complete(receive_data())

# Démarrer le serveur WebSocket dans un thread séparé


if 'data_thread' not in st.session_state:
st.session_state.data_thread =
[Link](target=start_websocket_thread)
st.session_state.data_thread.daemon = True
st.session_state.data_thread.start()

# Affichage du graphique en temps réel avec Plotly


[Link]("Visualisation de données en temps réel")

if timestamps and values:


fig = [Link]()
fig.add_trace([Link](x=timestamps, y=values,
mode='lines+markers', name='Valeur en temps réel'))
fig.update_layout(title='Graphique en temps réel',
xaxis_title='Temps', yaxis_title='Valeur')
st.plotly_chart(fig)
else:
[Link]("En attente des données en temps réel...")

– La fonction receive_data se connecte au serveur WebSocket et reçoit les


données chaque seconde.
– Les données sont ensuite stockées dans des listes timestamps et values.
– Lorsque de nouvelles données sont reçues, la fonction
st.experimental_rerun() est appelée pour redessiner l’interface et
mettre à jour le graphique avec les nouvelles données.
– Le graphique est généré à l’aide de Plotly, ce qui permet une visualisation
interactive.
2. Exécuter l’application Streamlit
Exécutez l’application Streamlit à l’aide de la commande suivante :
streamlit run real_time_data_app.py
Étape 4 : Déploiement de l’application
1. Créer un fichier [Link]
Ajoutez toutes les dépendances de l’application dans le fichier [Link].
streamlit
plotly
websockets

2. Déployer sur Streamlit Cloud ou Heroku


Vous pouvez déployer votre application Streamlit sur Streamlit Cloud ou sur une autre
plateforme comme Heroku. Si vous déployez sur Heroku, assurez-vous que le serveur
WebSocket est également déployé et accessible.

Résumé du projet

Dans ce projet, vous avez créé une application Streamlit capable de visualiser des
données en temps réel à l’aide de WebSocket. Le serveur WebSocket simule un flux de
données qui est envoyé à l’application Streamlit chaque seconde. Vous avez utilisé
Plotly pour générer des graphiques interactifs et threading pour gérer l’asynchrone
de manière fluide dans l’application. Ce projet démontre comment Streamlit peut être
utilisé pour visualiser des données dynamiques, telles que des informations financières
ou des données de capteurs IoT, en temps réel.

Conclusion
Dans ce livre, nous avons exploré l’ensemble du processus de création d’applications
interactives avec Streamlit, en mettant l’accent sur l’optimisation des performances, le
déploiement, et le développement de projets concrets. En passant de l’introduction à
Streamlit à des projets pratiques complexes, nous avons couvert des concepts essentiels
qui permettent de maîtriser cet outil puissant et de créer des applications performantes
et robustes.
Nous avons commencé par les bases de Streamlit, en explorant sa simplicité d’utilisation
pour construire rapidement des interfaces interactives, puis avons approfondi des
aspects plus avancés comme la gestion des performances, la mise en cache, et
l’optimisation des applications. À travers des projets concrets, vous avez pu découvrir
comment Streamlit peut être intégré dans des workflows divers, allant des analyses de
données à l’implémentation de modèles de machine learning.
Le chapitre sur le déploiement a permis de comprendre les meilleures pratiques pour
publier vos applications Streamlit en ligne, en explorant différentes plateformes comme
Streamlit Cloud, Heroku, et d’autres options. Nous avons également abordé les défis du
déploiement, en particulier la gestion des performances et des ressources dans un
environnement de production.
Les cinq projets phares présentés dans ce livre vous ont permis de mettre en pratique
ces connaissances en développant des applications variées : des dashboards interactifs
aux applications de machine learning en temps réel, en passant par des outils de
traitement de texte et de gestion de tâches avec authentification. Ces projets vous ont
permis de bien comprendre comment combiner la puissance de Streamlit avec d’autres
outils et bibliothèques pour réaliser des applications complètes.
Enfin, l’optimisation des performances a été un point central de ce livre. Nous avons vu
comment Streamlit peut être utilisé de manière efficace, même pour des applications
complexes traitant de grandes quantités de données ou de calculs lourds, tout en
maintenant une excellente expérience utilisateur. Nous avons abordé l’utilisation de la
mise en cache, des bonnes pratiques de gestion de l’état avec st.session_state, ainsi
que l’importance des tests de performance pour garantir la réactivité et la stabilité des
applications.
Avec ces compétences, vous êtes maintenant prêt à développer, déployer et optimiser
vos propres applications Streamlit, que ce soit pour des projets personnels,
professionnels ou en entreprise. Le potentiel de Streamlit est immense, et avec les
connaissances acquises, vous pouvez aborder des défis de plus en plus complexes, tout
en bénéficiant de la simplicité et de la rapidité de développement offertes par cet outil.
Pour aller plus loin, continuez à explorer les nouvelles fonctionnalités et les mises à jour
de Streamlit, et n’hésitez pas à expérimenter avec de nouveaux types de projets et
d’applications.

Vous aimerez peut-être aussi