Introduction aux composants Streamlit

Name: Olaf Källström

Published on 24/07/2023

Streamlit est une puissante bibliothèque open-source qui permet aux scientifiques des données et aux développeurs de créer des applications web interactives conviviales pour l'apprentissage automatique et la science des données. Ces applications reposent sur les composants Streamlit, un ensemble de widgets interactifs qui permettent aux utilisateurs de manipuler et d'interagir avec les données qui leur sont présentées.

Les composants Streamlit sont les éléments constitutifs des applications Streamlit. Ils fournissent l'interface utilisateur, permettant aux utilisateurs d'interagir avec l'application de différentes manières. Des simples boutons aux cases à cocher plus complexes en passant par les formulaires et les tables, les composants Streamlit offrent un large éventail de possibilités pour créer des applications de science des données interactives et dynamiques.

Avez-vous entendu parler de cet outil formidable d'analyse et de visualisation des données, qui transforme votre application Streamlit en Tableau ?

PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à celle de Tableau dans votre propre application Streamlit, sans effort. Consultez cette vidéo incroyable réalisée par Sven de Coding is Fun (opens in a new tab) qui démontre les étapes détaillées pour renforcer votre application Streamlit avec cette puissante bibliothèque de visualisation des données Python !

Un grand merci à Sven et sa grande contribution (opens in a new tab) à la communauté PyGWalker !

En outre, vous pouvez également consulter la page GitHub de PyGWalker (opens in a new tab) pour plus d'exemples PyGWalker.

Widgets interactifs dans Streamlit

Dans Streamlit, les widgets sont le principal moyen d'interaction avec l'utilisateur. Ils permettent aux utilisateurs d'entrer des données, de faire des sélections et de contrôler le comportement de l'application. Streamlit offre une variété de widgets, notamment des boutons, des cases à cocher, des champs de texte, des curseurs, et bien plus encore. Chaque widget sert un but spécifique et peut être personnalisé pour répondre aux besoins de l'application.

Les widgets dans Streamlit ne servent pas seulement à l'entrée de l'utilisateur. Ils peuvent également être utilisés pour afficher des données et d'autres informations. Par exemple, un widget de table peut être utilisé pour afficher un tableau de données, tandis qu'un widget de texte formaté peut être utilisé pour afficher du texte. Cette souplesse fait des widgets un outil puissant pour créer des applications de science des données interactives et dynamiques.

Plongée approfondie dans les composants Streamlit

Bouton Streamlit

Un bouton Streamlit est un composant simple mais puissant. Il permet aux utilisateurs de déclencher des actions dans l'application, telles que l'exécution d'un script ou la mise à jour d'un affichage. Le composant bouton est défini en utilisant la fonction st.button, qui prend une chaîne de caractères en argument pour l'étiquette du bouton.

import streamlit as st
 
if st.button('Cliquez ici'):
    st.write('Bouton cliqué !')

Dans cet exemple, lorsque le bouton étiqueté 'Cliquez ici' est cliqué, le message 'Bouton cliqué !' est affiché à l'écran. Ce mécanisme simple peut être utilisé pour déclencher des actions plus complexes, ce qui fait du bouton un composant polyvalent dans les applications Streamlit.

Colonnes Streamlit

Les colonnes Streamlit vous permettent d'organiser plus efficacement la disposition de votre application. Avec la fonction st.columns, vous pouvez diviser votre application en plusieurs colonnes et placer différents composants dans chaque colonne.

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('Ceci est la colonne 1')
 
with col2:
    st.write('Ceci est la colonne 2')

Dans cet exemple, l'application est divisée en deux colonnes. La première colonne affiche le texte 'Ceci est la colonne 1', et la deuxième colonne affiche 'Ceci est la colonne 2'. Cela vous permet de créer des mises en page plus complexes et d'améliorer l'expérience utilisateur de votre application.

Formulaires Streamlit

Les formulaires Streamlit permettent de regrouper des widgets de saisie associés et de soumettre leurs valeurs en une seule fois. Cela est particulièrement utile lorsque vous avez plusieurs entrées qui doivent être soumises ensemble.

import streamlit as st
 
with st.form(key='mon_formulaire'):
    text_input = st.text_input(label='Saisissez un texte')
    submit_button = st.form_submit_button(label='Envoyer')

Dans cet exemple, un formulaire est créé avec un champ de saisie de texte et un bouton d'envoi. Lorsque le bouton d'envoi est cliqué, toutes les entrées du formulaire sont soumises ensemble.

Tableau Streamlit

Les tableaux Streamlit permettent d'afficher des données dans un format structuré. Vous pouvez créer un tableau dans Streamlit en utilisant la fonction st.table, qui prend un DataFrame ou un dictionnaire en entrée.

import streamlit as st
import pandas as pd
 
data = {'Nom': ['Jean', 'Anna', 'Pierre'],
        'Âge': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

Dans cet exemple, un DataFrame est créé avec la bibliothèque pandas et affiché sous forme de tableau dans l'application Streamlit. Le tableau montre clairement les données sous forme de lignes et de colonnes, ce qui facilite la compréhension pour les utilisateurs.

Case à cocher Streamlit

Une case à cocher Streamlit est un composant qui permet aux utilisateurs de basculer une option binaire. Elle peut être utilisée pour contrôler le comportement de l'application, comme l'affichage ou la masquage d'informations supplémentaires. Le composant case à cocher est défini en utilisant la fonction st.checkbox, qui prend une chaîne de caractères en argument pour l'étiquette de la case à cocher.

import streamlit as st
 
if st.checkbox('Afficher les détails'):
Voici les détails...
 
Dans cet exemple, lorsque la case à cocher intitulée 'Afficher les détails' est cochée, le message 'Voici les détails...' est affiché à l'écran. Ce mécanisme peut être utilisé pour contrôler la visibilité d'informations supplémentaires en fonction des préférences de l'utilisateur.
 
### Saisie de texte Streamlit
 
La saisie de texte Streamlit est un composant qui permet aux utilisateurs de saisir une ligne de texte. Il peut être utilisé pour capturer la saisie de l'utilisateur, telle qu'une requête de recherche ou une réponse à un formulaire. Le composant de saisie de texte est défini à l'aide de la fonction `st.text_input`, qui prend en argument une chaîne de caractères pour l'étiquette de saisie.
 
```python
import streamlit as st
 
titre = st.text_input('Titre du film', 'La vie de Brian')
st.write("Le titre du film actuel est", titre)

Dans cet exemple, un champ de saisie de texte intitulé 'Titre du film' est créé avec une valeur par défaut de 'La vie de Brian'. La valeur du champ de saisie de texte peut être accédée et utilisée dans l'application, comme le montre le message affichant le titre du film actuel.

Markdown Streamlit

Le Markdown Streamlit est un composant qui vous permet d'afficher du texte formaté selon la syntaxe Markdown. Cela peut être utilisé pour afficher des en-têtes, du texte en gras ou en italique, des listes, des liens, et plus encore. Le composant Markdown est défini à l'aide de la fonction st.markdown, qui prend en argument une chaîne de caractères contenant le texte formaté en Markdown.

import streamlit as st
 
st.markdown('## Ceci est un en-tête')
st.markdown('Ceci est un texte **gras**')

Dans cet exemple, un en-tête et un texte en gras sont affichés en utilisant la syntaxe Markdown. Cela vous permet de créer du texte riche et formaté dans vos applications Streamlit.

Multisélection Streamlit

La multisélection Streamlit est un composant qui permet aux utilisateurs de sélectionner plusieurs options dans une liste. Elle peut être utilisée pour filtrer des données, contrôler l'affichage d'informations, et plus encore. Le composant de multisélection est défini à l'aide de la fonction st.multiselect, qui prend en argument une chaîne de caractères pour l'étiquette de saisie et une liste d'options.

import streamlit as st
 
options = st.multiselect(
    'Quelles sont vos couleurs préférées',
    ['Vert', 'Jaune', 'Rouge', 'Bleu'],
    ['Jaune', 'Rouge']
)
st.write('Vous avez sélectionné:', options)

Dans cet exemple, un champ de multisélection intitulé 'Quelles sont vos couleurs préférées' est créé avec quatre options. L'utilisateur peut sélectionner plusieurs options, et les options sélectionnées sont affichées à l'écran.

Conteneur Streamlit

Les conteneurs Streamlit sont un moyen de regrouper des composants liés. Ils peuvent être utilisés pour créer des mises en page plus complexes et pour gérer l'affichage des composants de manière plus organisée. Le composant de conteneur est défini à l'aide de la fonction st.container, qui ne prend aucun argument.

import streamlit as st
 
if st.button('Click Me'):
    st.write('Button clicked!')

Dans cet exemple, un conteneur est créé avec un composant de texte et un bouton à l'intérieur. Les composants à l'intérieur du conteneur sont affichés ensemble, ce qui vous permet de créer des mises en page plus complexes et d'améliorer l'organisation de votre application.

Bonnes pratiques pour l'utilisation des composants Streamlit

Lors de l'intégration de composants Streamlit dans vos applications, il est crucial de respecter certaines bonnes pratiques pour garantir des performances et une expérience utilisateur optimales. Voici quelques points clés à prendre en compte :

Expérience utilisateur: Donnez toujours la priorité à l'expérience utilisateur. Organisez vos composants de manière intuitive et fournissez des étiquettes claires et des instructions. Cela améliore non seulement l'utilisabilité, mais également le contexte de chaque composant.

## Bonne pratique : étiquettes claires et instructions
st.markdown('### Veuillez saisir vos coordonnées')
nom = st.text_input('Nom')
email = st.text_input('Email')

Performances: Soyez conscient des éventuelles implications de performance de vos composants. Certains composants, tels que les formulaires et les tables, peuvent nécessiter des ressources importantes et ralentir votre application s'ils ne sont pas utilisés avec parcimonie. Efforcez-vous d'optimiser vos composants et utilisez-les avec parcimonie pour maintenir une expérience utilisateur fluide et réactive.

## Mauvaise pratique : grande table
st.table(grand_dataframe)
 
## Bonne pratique : table optimisée avec pagination
for i in range(0, len(grand_dataframe), 100):
    st.table(grand_dataframe[i:i+100])

Tests: Assurez-vous de tester soigneusement vos composants. Ils doivent fonctionner comme prévu et gérer la saisie de l'utilisateur avec élégance. Cela inclut les tests de cas extrêmes et la gestion appropriée des erreurs.

## Bonne pratique : gestion des erreurs
try:
    result = some_function(user_input)
except SomeError as e:
    st.error(f'An error occurred: {e}')

Applications réelles des composants Streamlit

Les composants Streamlit trouvent leur utilisation dans une multitude d'applications réelles, améliorant l'interactivité et l'engagement des utilisateurs. Voici quelques exemples :

Science des données: Les composants Streamlit sont souvent utilisés pour créer des tableaux de bord interactifs et des outils d'exploration de données. Les utilisateurs peuvent utiliser des curseurs, des cases à cocher et des menus déroulants pour filtrer et manipuler les données, tandis que des tables et des graphiques sont utilisés pour afficher les résultats.

## Exemple : outil d'exploration de données
donnees_selectionnees = donnees[st.multiselect('Sélectionner des colonnes', donnees.columns)]
st.line_chart(donnees_selectionnees)

Apprentissage automatique: Les composants Streamlit sont utilisés pour créer des outils interactifs d'exploration de modèles. Les utilisateurs peuvent saisir des paramètres, exécuter des modèles et afficher les résultats, le tout dans la même application. Cela facilite la compréhension et l'interprétation des modèles d'apprentissage automatique.

## Exemple : outil d'exploration de modèles
params = st.sidebar.slider('Paramètre du modèle', 0, 10)
modele = train_model(params)
st.write('Score du modèle:', modele.score(X, y))

Développement Web: Les composants Streamlit sont utilisés pour créer des applications Web dynamiques et interactives. Des formulaires simples et des boutons aux mises en page complexes avec plusieurs conteneurs, les composants Streamlit offrent une large gamme de possibilités pour créer des expériences Web captivantes.

## Exemple : application Web
with st.container():
st.header('Bienvenue dans mon application !')
si st.button('Cliquez-moi'):
    st.balloons()

Dans toutes ces applications, la clé est d'utiliser les composants Streamlit de manière à améliorer l'expérience utilisateur, rendre l'application plus interactive et permettre à l'utilisateur de s'engager avec les données de manière significative.

Applications réelles des composants Streamlit

Les composants Streamlit sont utilisés dans un large éventail d'applications réelles. Par exemple, en science des données, ils sont souvent utilisés pour créer des tableaux de bord interactifs et des outils d'exploration des données. Les utilisateurs peuvent utiliser des curseurs, des cases à cocher et des listes déroulantes pour filtrer et manipuler les données, tandis que les tableaux et les graphiques sont utilisés pour afficher les résultats.

En apprentissage automatique, les composants Streamlit sont utilisés pour créer des outils d'exploration de modèles interactifs. Les utilisateurs peuvent saisir des paramètres, exécuter des modèles et visualiser les résultats, le tout dans la même application. Cela facilite la compréhension et l'interprétation des modèles d'apprentissage automatique.
En développement web, les composants Streamlit sont utilisés pour créer des applications Web dynamiques et interactives. Des formulaires simples et des boutons complexes avec plusieurs conteneurs, les composants Streamlit offrent une large gamme de possibilités pour créer des expériences Web attrayantes.

Conclusion

Les composants Streamlit sont les éléments constitutifs des applications interactives de science des données. Ils offrent une large gamme de possibilités pour créer des interfaces utilisateur dynamiques et attrayantes, des simples boutons et cases à cocher aux formulaires et tableaux plus complexes. En comprenant et en utilisant efficacement ces composants, vous pouvez créer des applications puissantes qui permettent aux utilisateurs d'interagir avec les données de manière significative.

Que vous soyez un scientifique des données cherchant à créer un tableau de bord interactif, un ingénieur en apprentissage automatique souhaitant créer un outil d'exploration de modèles ou un développeur Web souhaitant créer une application Web dynamique, les composants Streamlit répondent à vos besoins. N'oubliez pas de toujours prendre en compte l'expérience utilisateur, de vous soucier des performances et de tester minutieusement vos composants. Avec ces meilleures pratiques à l'esprit, vous êtes bien parti pour maîtriser les composants Streamlit.

Avez-vous déjà entendu parler de cet outil incroyable d'analyse de données et de visualisation de données, qui transforme votre application Streamlit en Tableau ?

PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort.

(opens in a new tab)

Questions fréquemment posées

1. Quels sont les inconvénients de Streamlit ?

Bien que Streamlit soit un outil puissant pour créer des applications interactives de science des données, il présente quelques limitations. Par exemple, il n'est pas conçu pour créer des applications multi-pages complexes, et il ne prend pas en charge l'authentification des utilisateurs ou la gestion des sessions par défaut. De plus, étant donné que Streamlit s'exécute côté serveur, il peut ne pas être aussi réactif que des applications JavaScript côté client pour des ensembles de données volumineux ou des calculs complexes.

2. Comment structurer une application Streamlit ?

Une application Streamlit est structurée autour du concept "d'exécution de script". Lorsqu'un utilisateur interagit avec un widget, tout le script est réexécuté de haut en bas. Cela rend le code simple et linéaire, similaire à un script Python traditionnel. Cependant, vous pouvez également utiliser des fonctions et des classes pour structurer votre code, et vous pouvez utiliser le décorateur st.cache pour mettre en cache les résultats des calculs longs et les empêcher d'être réexécutés inutilement.

3. Comment optimiser les performances de mon application Streamlit ?

Il existe plusieurs moyens d'optimiser les performances de votre application Streamlit. L'un d'eux est d'utiliser le décorateur st.cache pour mettre en cache les résultats des calculs longs. Un autre moyen est d'utiliser la fonction st.beta_columns pour créer plusieurs colonnes et paralléliser le rendu de vos composants. Vous pouvez également utiliser la fonction st.experimental_memo pour mémoriser les appels de fonction et éviter les recalculs inutiles. Enfin, veillez à la taille de vos données et à la complexité de vos calculs, et envisagez d'utiliser un serveur plus puissant si nécessaire.

Top 7 Streamlit Examples And Tutorials to Get Started Voici comment utiliser Streamlit avec VSCode