Les outils d'interface dans Streamlit
Exploration approfondie des fonctionnalités interactives pour des applications à page unique
Principaux Points à Retenir
- Widgets et Conteneurs : Les widgets permettent de recueillir des entrées utilisateur tandis que les conteneurs comme la barre latérale mettent en forme et organisent l’interface.
- Onglets et Mise en Page : Les onglets offrent une navigation claire dans une application à page unique, rendant le contenu facilement accessible et bien organisé.
- Flexibilité et Personnalisation : Streamlit permet d'intégrer des graphiques, des tableaux, des visualisations et d'autres widgets interactifs, tout en offrant des options de personnalisation via CSS ou des mises en page avancées.
Introduction à Streamlit et Ses Outils d'Interface
Streamlit est un framework open-source écrit en Python, conçu pour permettre aux data scientists et développeurs de créer des applications web interactives en quelques lignes de code. Conçu pour fournir une courbe d'apprentissage faible et une rapidité de prototypage, il permet aux utilisateurs de transformer facilement leurs scripts Python en applications web élégantes et fonctionnelles. L'une des principales forces de Streamlit réside dans la facilité avec laquelle il gère l'organisation et la présentation du contenu grâce à une variété d'outils d'interface.
Détails des Outils d'Interface dans Streamlit
1. Widgets
Les widgets dans Streamlit offrent une façon intuitive de collecter des entrées de l'utilisateur, ce qui rend l'application interactive et réactive. Chaque widget peut servir à afficher du texte, recueillir des valeurs numériques, des choix parmi plusieurs options, et bien plus encore. Voici quelques exemples typiques de widgets disponibles dans Streamlit :
Exemples de Widgets :
- st.text_input() : Permet à l'utilisateur de saisir du texte, utile pour des recherches ou des entrées de données.
- st.button() : Crée des boutons interactifs déclenchant des actions lorsqu'ils sont cliqués.
- st.selectbox() : Offre une liste déroulante pour la sélection d'une valeur parmi celles proposées.
- st.slider() : Un glisseur pour sélectionner une valeur dans un intervalle défini, idéal pour des ajustements progressifs.
- st.checkbox() : Permet à l'utilisateur de sélectionner ou non une option.
Ces widgets dynamiques permettent de construire des interfaces réactives qui répondent immédiatement aux actions de l'utilisateur. L'interaction ainsi facilitée renforce l'expérience utilisateur et permet de manipuler les données en temps réel.
2. Organisation par Conteneurs
En plus des widgets, Streamlit offre des conteneurs qui permettent d'organiser la disposition du contenu d'une manière claire et intuitive. Ces conteneurs incluent la barre latérale ainsi que la possibilité de disposer le contenu en colonnes ou en sections.
La Barre Latérale
La barre latérale (ou sidebar) de Streamlit est conçue pour regrouper des éléments interactifs et minimiser l'encombrement dans la zone principale de l'application. Vous pouvez y placer des champs de saisie, des sélecteurs, des boutons et même des informations de ciblage comme des clés API. Cette séparation permet de concentrer l'attention sur le contenu principal tout en offrant des fonctionnalités supplémentaires dans un espace dédié.
# Exemple d'utilisation de la barre latérale
import streamlit as st
with st.sidebar:
api_key = st.text_input("Entrez votre clé API", type="password")
option = st.radio("Choisissez une option", ('Option 1', 'Option 2', 'Option 3'))
Disposition en Colonnes
Streamlit facilite également la mise en page par colonnes qui permet d'afficher les informations côte à côte. Cela est particulièrement utile pour le tableau de bord ou pour comparer des ensembles de données ou des visualisations graphiques en parallèle.
# Exemple de mise en page en colonnes
left_column, right_column = st.columns(2)
with left_column:
st.header("Visualisation A")
st.write("Contenu ou graphique A")
with right_column:
st.header("Visualisation B")
st.write("Contenu ou graphique B")
Onglets : Création d'une Application à Page Unique
Streamlit offre également la fonctionnalité d'onglets grâce à la fonction st.tabs().
Les onglets sont une technique de navigation bien adaptée aux applications à page unique,
permettant de diviser le contenu en sections distinctes tout en évitant la complexité d'une architecture multi-page.
Utilisation des Onglets Streamlit
Les onglets permettent de segmenter une application en plusieurs sections comme « Chat », « Données », « Graphiques » et autres, chacune regroupant des fonctionnalités ou des types de contenu spécifiques. Cette approche permet non seulement de mieux organiser l'information mais aussi d'améliorer l'expérience utilisateur en limitant l'encombrement visuel.
Exemple de Code pour Création d'Onglets
L'exemple ci-dessous montre comment créer une application à page unique avec trois onglets distincts :
import streamlit as st
# Création des onglets
onglet1, onglet2, onglet3 = st.tabs(["Chat", "Données", "Graphiques"])
with onglet1:
st.header("Interface de Chat")
st.write("Ici, vous pouvez intégrer un chatbot ou un module de discussion.")
with onglet2:
st.header("Analyse de Données")
st.write("Intégrez des DataFrames, des filtres et des visualisations de données.")
with onglet3:
st.header("Visualisation Graphique")
st.write("Affichez des graphiques et des visualisations interactives.")
Dans cet exemple, chaque onglet est clairement identifié et peut contenir une variété de widgets et de contenus. La structure en onglets simplifie la navigation pour l'utilisateur en regroupant des éléments connexes dans une interface unique et cohérente.
Intégration d'Éléments Multi-Médias et Interactivité
L'un des atouts majeurs de Streamlit est sa capacité à intégrer plusieurs types de médias et d'outils interactifs pour enrichir l'expérience utilisateur. Voici d'autres composantes importantes des outils d'interface de Streamlit :
Affichage de Données
Streamlit permet d'afficher des données sous plusieurs formats.
Vous pouvez utiliser st.write() pour affichage basique ou des fonctions spécialisées comme st.dataframe()
pour dynamiser l'affichage des tables de données.
De plus, l'utilisation de bibliothèques de visualisation telles que Plotly, Matplotlib ou Altair permet de créer des graphiques interactifs.
Exemple d'Affichage de Données et de Graphiques :
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
# Chargement d'un DataFrame
data = {'A': [1, 2, 3, 4], 'B': [10, 20, 30, 40]}
df = pd.DataFrame(data)
st.dataframe(df)
# Création d'un graphique
fig, ax = plt.subplots()
ax.plot(df['A'], df['B'])
ax.set_title("Graphique de A vs B")
st.pyplot(fig)
Utilisation de l'État de Session (st.session_state)
Pour gérer les interactions complexes dans une application Streamlit, en particulier lorsqu'il s'agit de suivre les entrées de l'utilisateur au fil du temps,
l'utilisation de st.session_state est essentielle.
Ce mécanisme permet de maintenir l'état des widgets et de stocker des données temporaires entre les interactions, assurant ainsi une expérience utilisateur fluide et cohérente.
Exemple d'État de Session :
import streamlit as st
if "compteur" not in st.session_state:
st.session_state.compteur = 0
def incrementer():
st.session_state.compteur += 1
st.button("Incrémenter", on_click=incrementer)
st.write("Compteur:", st.session_state.compteur)
Comparaison des Outils via un Tableau
| Outil | Description | Exemples |
|---|---|---|
| Widgets | Éléments interactifs pour obtenir des entrées utilisateur (boutons, sliders, etc.). | st.button(), st.text_input(), st.selectbox() |
| Conteneurs | Utilisés pour organiser et structurer le contenu de l'interface (barre latérale, colonnes). | st.sidebar, st.columns() |
| Onglets | Méthode pour regrouper du contenu dans des sections distinctes dans une application à page unique. | st.tabs() |
| Affichage de Données | Fonctions pour afficher des DataFrames et des graphiques sous forme tabulaire ou interactive. | st.pyplot(), st.dataframe() |
| État de Session | Permet de conserver l'état des interactions utilisateur pour une expérience continue. | st.session_state |
Personnalisation et Extensibilité de l'Interface
En plus des outils de base, Streamlit autorise la personnalisation de l'apparence et du comportement des composants par l'ajout de CSS ou l'utilisation de bibliothèques complémentaires. Cela permet d'adapter l'interface aux besoins spécifiques de l'application, que ce soit pour des visualisations de données complexes ou pour intégrer le branding de l'entreprise. Grâce aux fonctionnalités intégrées et à la flexibilité du framework, les développeurs peuvent se concentrer sur l'optimisation de l'expérience utilisateur sans se soucier des aspects basiques de l'interface.
Personnalisation par CSS
Bien que Streamlit fournisse un ensemble standard d'outils, il est très courant d'utiliser des modifications CSS personnalisées pour affiner l'apparence de l’application. Par exemple, la structure des onglets, les couleurs, les polices, ou même les marges peuvent être ajustées pour mieux correspondre à l'identité graphique de l'application.
Exemple de CSS personnalisé :
/* Exemple de style pour modifier l’apparence des onglets Streamlit */
div[data-testid="stHorizontalBlock"] > div {
background-color: #f5f5f5;
border-radius: 8px;
padding: 10px;
}
Extensibilité via des Bibliothèques Tiers
En intégrant des bibliothèques tierces telles que Plotly, Matplotlib, Altair ou D3.js, il est possible de créer des visualisations de données avancées qui se mettent à jour en temps réel. La combinaison de ces bibliothèques avec les outils natifs de Streamlit permet de créer des tableaux de bord sophistiqués où les interactions de l'utilisateur influencent directement les graphiques affichés.
Exemple de Visualisation avec Plotly :
import streamlit as st
import plotly.express as px
import pandas as pd
# Création d'un DataFrame
df = pd.DataFrame({
"Catégorie": ["A", "B", "C", "D"],
"Valeur": [30, 60, 20, 90]
})
# Création d'un graphique avec Plotly
fig = px.bar(df, x="Catégorie", y="Valeur", title="Distribution par Catégorie")
st.plotly_chart(fig)
Utilisation Combinée des Outils pour une Expérience Optimale
L'un des aspects les plus remarquables de Streamlit est la capacité d'utiliser de manière combinée ces outils d'interface pour créer des applications robustes et interactives. En combinant widgets, conteneurs, onglets et affichage de données, vous pouvez concevoir une application à page unique qui se présente comme un tableau de bord complet. Par exemple, une application d'analyse de données pourrait utiliser la barre latérale pour la sélection des options de filtrage, des onglets pour séparer l'analyse descriptive et prédictive, et des graphiques interactifs pour visualiser les résultats. La synchronisation via l'état de session permet d'assurer que chaque interaction utilisateur se reflète immédiatement dans tous les composants pertinents.
Exemple Intégré :
Prenons un exemple hypothétique pour illustrer comment ces fonctionnalités se combinent harmonieusement :
Imaginons une application de monitoring des performances financières. La barre latérale pourrait contenir des filtres permettant de sélectionner une période, un secteur économique ou une devise spécifique. Ensuite, la zone principale serait divisée en onglets :
- Onglet "Vue Générale" : Affiche des statistiques clés telles que les revenus totaux, le profit net et d'autres indicateurs financiers via des graphiques interactifs.
- Onglet "Analyse Sectorielle" : Permet d'approfondir l'analyse en affichant des visualisations détaillées pour différents secteurs économiques, accompagnées de tableaux de données.
- Onglet "Prévisions" : Propose des modèles prédictifs pour estimer l'évolution future des indicateurs financiers, actualisés en temps réel en fonction des filtres appliqués.
Chaque onglet : - Utilise des widgets pour permettre aux utilisateurs de choisir leurs critères d'analyse. - Combine l'affichage de données en temps réel avec des graphiques dynamiques pour une meilleure compréhension visuelle. - Mise en œuvre de l'état de session pour conserver les paramètres de l'utilisateur lors de la navigation entre les onglets.
Ce scénario démontre la puissance de Streamlit en tant que plateforme unifiée qui offre des outils d'interface polyvalents et extensibles. L'intégration harmonieuse des composants rend le développement d'applications conviviales et performantes non seulement accessible mais également efficace dans un contexte multi-fonctionnel.
Perspectives et Bonnes Pratiques
Pour tirer le meilleur parti de Streamlit, il est recommandé de suivre quelques bonnes pratiques :
Clarté et Simplicité
Concevez votre interface pour qu'elle reste claire et intuitive. Évitez d’encombrer une seule page avec trop d’éléments en privilégiant la séparation via des onglets et des conteneurs. Une interface épurée permet à l’utilisateur de se concentrer sur les données présentées et les interactions essentielles.
Utilisation Modulaire
Structurez votre code en modules, surtout lorsque vous utilisez de multiples onglets et conteneurs. Ceci facilitera la maintenance, le débogage et l’évolution future de l’application.
Exploiter l'État de Session
L'utilisation de st.session_state est fondamentale pour maintenir la continuité des données entre les différentes interactions et onglets.
Pensez à sauvegarder ou à mettre à jour les données critiques en réponse aux actions de l'utilisateur afin d'assurer une expérience fluide.
Tester la Réactivité
Testez votre application sous différents scénarios d'utilisation pour garantir que les interactions entre widgets, onglets et conteneurs se déroulent comme prévu. Les outils de débogage et de journalisation intégrés dans Streamlit facilitent le suivi des modifications et la détection rapide des problèmes.
Références et Ressources Complémentaires
Pour approfondir votre compréhension de Streamlit et de ses outils d'interface, vous pouvez consulter les ressources et documentations suivantes. Ces références offrent une vue d'ensemble détaillée et présentent de nombreux exemples de code, des tutoriels, ainsi que des conseils pratiques pour une utilisation optimale.
- Streamlit • A faster way to build and share data apps - Streamlit
- st.tabs - Streamlit Docs - Streamlit
- Create Dynamic Tabs in Streamlit: Quickly Get Started - Kanaries
- Streamlit Tabs Overview - Restack
- Building Multi Page Web App Using Streamlit - Medium
Requêtes et Sujets Recommandés
Si vous souhaitez approfondir vos connaissances sur les fonctionnalités de Streamlit et explorer des cas d'utilisation variés, considérez les requêtes et sujets suivants :
Last updated March 5, 2025