Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Créer des onglets dynamiques dans Streamlit : Démarrage rapide

Olaf Källström
Name
Olaf Källström

Updated on

Streamlit est une bibliothèque Python open-source populaire qui permet aux développeurs de créer rapidement et facilement des applications web interactives. Il est particulièrement apprécié des data scientists pour sa simplicité et son efficacité dans la création d'applications basées sur les données. L'une des principales fonctionnalités que Streamlit offre est la possibilité de créer des onglets, qui sont essentiels pour structurer la mise en page de vos applications et améliorer la navigation de l'utilisateur.

Avez-vous entendu parler de cet outil impressionnant 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 similaire à Tableau dans votre propre application Streamlit sans effort. Découvrez cette vidéo incroyable réalisée par Cómo explorar datos con PyGWalker en Python (opens in a new tab) qui démontre les étapes détaillées pour doter votre application Streamlit de cette puissante bibliothèque de visualisation de données Python !


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

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

Partie 1. Qu'est-ce que les onglets Streamlit ?

Les onglets dans Streamlit sont des conteneurs dans lesquels vous pouvez insérer le contenu que vous souhaitez créer dans votre application. Ils offrent un moyen facile de naviguer entre des groupes de contenus connexes, ce qui rend votre application plus organisée et conviviale. Par exemple, vous pouvez utiliser des onglets pour séparer différentes sections de votre expérience d'apprentissage automatique, telles que la visualisation des données, la formation des modèles et l'analyse des résultats.

Partie 2. Pourquoi utiliser des onglets dans Streamlit ?

La principale raison d'utiliser des onglets dans Streamlit est de regrouper du contenu connexe dans des vues indépendantes. Cela améliore non seulement l'expérience utilisateur en fournissant une interface claire et organisée, mais permet également un flux de travail plus efficace. Par exemple, dans un projet d'apprentissage automatique, vous pouvez avoir des onglets distincts pour la prétraitement des données, la formation des modèles, les métriques d'évaluation et les prédictions.

Partie 3. Comment créer des onglets dans Streamlit

Pour créer des onglets dans Streamlit, vous devez d'abord créer une liste de titres d'onglets. Chaque option de cette liste correspond au nom d'un onglet. Ensuite, pour chaque onglet, vous écrivez le contenu que vous souhaitez afficher. Voici un exemple simple :

import streamlit as st
 
st.title('Mon application')
 
# Créer les onglets
titres_onglets = ['Sujet A', 'Sujet B', 'Sujet C']
onglet1, onglet2, onglet3 = st.tabs(titres_onglets)
 
# Ajouter du contenu à chaque onglet
with onglet1:
    st.header('Sujet A')
    st.write('Contenu du sujet A')
 
with onglet2:
    st.header('Sujet B')
    st.write('Contenu du sujet B')
 
with onglet3:
    st.header('Sujet C')
    st.write('Contenu du sujet C')

Dans cet exemple, nous avons créé trois onglets intitulés 'Sujet A', 'Sujet B' et 'Sujet C'. Chaque onglet affiche un en-tête et du texte.

Partie 4. Créer plusieurs onglets dans Streamlit

La création de plusieurs onglets dans Streamlit suit le même processus que la création d'un seul onglet. Il vous suffit d'ajouter plus d'options à la liste des titres d'onglets, puis d'ajouter du contenu pour chaque onglet. Cela est particulièrement utile lorsque vous avez beaucoup de contenu connexe que vous souhaitez regrouper dans des sections distinctes.

Par exemple, disons que vous créez une application Streamlit pour un projet d'apprentissage automatique. Vous pouvez avoir des sections distinctes pour le prétraitement des données, la formation des modèles, l'évaluation des modèles et la visualisation des résultats. Chacune de ces sections peut être regroupée dans son propre onglet, ce qui rend votre application plus organisée et plus facile à naviguer.

Voici un exemple de création de plusieurs onglets dans Streamlit :

import streamlit as st
 
st.title("Mon projet d'apprentissage automatique")
 
# Créer les onglets
titres_onglets = ['Prétraitement des données', 'Formation des modèles', 'Évaluation des modèles', 'Visualisation des résultats']
onglets = st.tabs(titres_onglets)
 
# Ajouter du contenu à l'onglet Prétraitement des données
with onglets[0]:
    st.header('Prétraitement des données')
    st.write("C'est ici que vous pouvez prétraiter vos données.")
 
# Ajouter du contenu à l'onglet Formation des modèles
with onglets[1]:
    st.header('Formation des modèles')
    st.write("C'est ici que vous pouvez former votre modèle.")
 
# Ajouter du contenu à l'onglet Évaluation des modèles
with onglets[2]:
    st.header('Évaluation des modèles')
    st.write("C'est ici que vous pouvez évaluer votre modèle.")
 
# Ajouter du contenu à l'onglet Visualisation des résultats
with onglets[3]:
    st.header('Visualisation des résultats')
    st.write("C'est ici que vous pouvez visualiser vos résultats.")

Dans cet exemple, nous avons créé quatre onglets pour un projet d'apprentissage automatique. Chaque onglet correspond à une section différente du projet, et chaque onglet contient son propre contenu.

Vous pouvez ajouter autant d'onglets que vous le souhaitez, et chaque onglet peut contenir n'importe quel type de contenu, tel que du texte, des images, des graphiques et des widgets. Cela fait des onglets Streamlit un outil polyvalent pour créer des applications interactives et dynamiques.

La création de plusieurs onglets dans Streamlit est un moyen simple et efficace d'améliorer la fonctionnalité et l'expérience utilisateur de vos applications. Alors, commencez à explorer cette fonctionnalité et voyez comment elle peut bénéficier à vos projets.

Partie 5. Création d'onglets dynamiques dans Streamlit

Les onglets dynamiques dans Streamlit sont des onglets qui sont créés et rendus dynamiquement en fonction du contenu d'un serveur ou d'une API. Cela est avantageux lorsque le nombre d'onglets et leur contenu ne sont pas connus à l'avance et peuvent changer au fil du temps. Voici un exemple de création d'onglets dynamiques dans Streamlit :

import streamlit as st
 
st.title("Mon application")
 
# Fonction pour obtenir le contenu des onglets depuis le serveur
def obtenir_contenu_onglets():
    return [
        {"title": "Sujet A", "content": "Contenu du sujet A"},
        {"title": "Sujet B", "content": "Contenu du sujet B"},
        {"title": "Sujet C", "content": "Contenu du sujet C"},
    ]
 
# Obtenir le contenu des onglets depuis le serveur
contenu_onglets = obtenir_contenu_onglets()
 
# Créer les onglets
noms_onglets = [contenu["title"] for contenu in contenu_onglets]
onglets = st.tabs(noms_onglets)
 
# Parcourir chaque onglet et construire le contenu
for onglet, contenu_onglet in zip(onglets, contenu_onglets):
    with onglet:
        st.header(contenu_onglet["title"])
        st.write(contenu_onglet["content"])

Dans cet exemple, nous définissons d'abord une fonction obtenir_contenu_onglets qui imite ce qu'un serveur ou une API pourrait renvoyer. Cette fonction renvoie une liste de dictionnaires, contenant chacun un titre d'onglet et le contenu de l'onglet. Ensuite, nous créons les onglets et les parcourons pour écrire le contenu.

Par 6. Exemples pratiques des onglets Streamlit

Les onglets Streamlit sont une fonctionnalité polyvalente qui peut être exploitée dans de nombreuses applications, notamment dans le domaine de la science des données et de l'apprentissage automatique. Voici une plongée approfondie dans quelques utilisations pratiques des onglets Streamlit :

Onglets Streamlit pour les expérimentations d'apprentissage automatique

Imaginez que vous êtes plongé dans une expérience d'apprentissage automatique. Vous avez la prétraitement des données, l'entraînement du modèle, l'évaluation du modèle et la visualisation des résultats, le tout se déroulant simultanément. C'est un tourbillon d'étapes et de processus qui pourrait facilement devenir accablant. Mais c'est là que les onglets Streamlit interviennent pour vous sauver. En regroupant chaque étape dans des onglets séparés, vous facilitez non seulement la navigation des utilisateurs à travers l'expérience, mais vous améliorez également leur compréhension de l'ensemble du processus.

Par exemple, vous pourriez avoir une application Streamlit avec des onglets comme ceci :

import streamlit as st
 
st.title("Mon expérience d'apprentissage automatique")
 
# Créer les onglets
titres_onglets = ["Prétraitement des données", "Entraînement du modèle", "Évaluation du modèle", "Visualisation des résultats"]
onglets = st.tabs(titres_onglets)
 
# Ajouter le contenu à chaque onglet
with onglets[0]:
    st.header("Prétraitement des données")
    st.write("Ici, nous prétraitons les données...")
 
with onglets[1]:
    st.header("Entraînement du modèle")
    st.write("Ici, nous entraînons le modèle...")
 
with onglets[2]:
    st.header("Évaluation du modèle")
    st.write("Ici, nous évaluons le modèle...")
 
with onglets[3]:
    st.header("Visualisation des résultats")
    st.write("Ici, nous visualisons les résultats...")

Dans cet exemple, chaque étape de l'expérience d'apprentissage automatique a son propre onglet dédié, ce qui rend l'application plus organisée et conviviale.

Onglets Streamlit pour la visualisation des données

La visualisation des données est le cœur et l'âme de l'analyse de données et de l'apprentissage automatique. C'est l'art de peindre un tableau avec vos données, et les onglets Streamlit sont le canevas parfait pour ce chef-d'œuvre. Avec les onglets Streamlit, vous pouvez créer des onglets distincts pour différents types de visualisations, tels que des graphiques à barres, des diagrammes de dispersion et des cartes thermiques. Cela permet aux utilisateurs de passer facilement d'une visualisation à une autre et de tirer des enseignements des données.

Voici un exemple de l'utilisation des onglets Streamlit pour la visualisation des données :

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Charger des données
data = pd.read_csv("data.csv")
 
st.title("Mon application de visualisation des données")
 
# Créer les onglets
titres_onglets = ["Graphique à barres", "Diagramme de dispersion", "Carte thermique"]
onglets = st.tabs(titres_onglets)
 
# Ajouter le contenu à chaque onglet
with onglets[0]:
    st.header("Graphique à barres")
    st.bar_chart(data)
 
with onglets[1]:
    st.header("Diagramme de dispersion")
    fig, ax = plt.subplots()
    ax.scatter(data["x"], data["y"])
    st.pyplot(fig)
 
with onglets[2]:
    st.header("Carte thermique")
    st.heatmap(data.corr())

Dans cet exemple, chaque onglet affiche un type différent de visualisation des données, ce qui permet aux utilisateurs d'explorer les données sous différents angles.

Onglets Streamlit pour la création de tableaux de bord

Les onglets Streamlit peuvent être utilisés pour créer des tableaux de bord interactifs. Par exemple, vous pouvez avoir un onglet pour les saisies utilisateur, un autre onglet pour afficher les données et un autre onglet pour afficher les résultats de l'analyse des données. Cela rend le tableau de bord plus organisé et convivial.

Voici un exemple de tableau de bord Streamlit avec des onglets :

import streamlit as st
 
st.title("Mon tableau de bord")
 
# Créer les onglets
titres_onglets = ["Saisies utilisateur", "Affichage des données", "Analyse des données"]
onglets = st.tabs(titres_onglets)
 
# Ajouter le contenu à chaque onglet
with onglets[0]:
    st.header("Saisies utilisateur")
    st.text_input("Entrez du texte")
    st.number_input("Entrez un nombre")
 
with onglets[1]:
    st.header("Affichage des données")
    st.table({"column1": [1, 2, 3], "column2": [4, 5, 6]})
 
with onglets[2]:
    st.header("Analyse des données")
    st.line_chart([1, 2, 3, 4, 5])

Dans cet exemple, l'onglet "Saisies utilisateur" contient des widgets d'entrée, l'onglet "Affichage des données" affiche un tableau de données et l'onglet "Analyse des données" affiche un graphique linéaire.

Onglets Streamlit pour l'organisation de projets

Dans un grand projet avec plusieurs composants, les onglets Streamlit peuvent être utilisés pour organiser les composants en sections distinctes. Cela rend non seulement le projet plus gérable, mais améliore également l'expérience utilisateur en fournissant une interface propre et organisée.

Par exemple, si vous construisez une grande application avec plusieurs composants tels que le chargement de données, le nettoyage de données, l'analyse de données et la visualisation de données, vous pourriez organiser ces composants en onglets distincts comme ceci :

import streamlit as st
 
st.title("Mon grand projet")
 
# Créer les onglets
titres_onglets = ["Chargement de données", "Nettoyage de données", "Analyse de données", "Visualisation de données"]
onglets = st.tabs(titres_onglets)
 
# Ajouter le contenu à chaque onglet
with onglets[0]:
 
import streamlit as st
 
st.header('Chargement des données')
st.write('Ici nous chargeons les données...')
 
with st.echo(code_location = 'below'):
    st.header('Nettoyage des données')
    st.write('Ici nous nettoyons les données...')
 
with st.echo(code_location = 'below'):
    st.header('Analyse des données')
    st.write('Ici nous analysons les données...')
 
with st.echo(code_location = 'below'):
    st.header('Visualisation des données')
    st.write('Ici nous visualisons les données...')

Dans cet exemple, chaque composant du projet a son propre onglet dédié, ce qui rend l'application plus organisée et plus facile à naviguer.

Partie 7. Concepts avancés dans les onglets Streamlit

Les onglets Streamlit offrent une gamme de fonctionnalités avancées qui peuvent améliorer la fonctionnalité et l'expérience utilisateur de vos applications. Voici quelques concepts avancés dans les onglets Streamlit :

Conteneur d'onglets Streamlit et ses utilisations

Un conteneur d'onglets Streamlit est un conteneur qui contient le contenu d'un onglet. Vous pouvez ajouter n'importe quel contenu à un conteneur d'onglets, comme du texte, des images, des graphiques et des widgets. Le conteneur d'onglets offre un moyen facile de regrouper du contenu lié et d'améliorer la navigation de l'utilisateur.

Par exemple, vous pourriez avoir une application Streamlit avec un conteneur d'onglets comme ceci :

import streamlit as st
 
st.title('Mon application')
 
# Créer un conteneur d'onglets
tabs = st.tabs(['Onglet 1', 'Onglet 2', 'Onglet 3'])
 
# Ajouter du contenu au premier onglet
with tabs[0]:
    st.header('Onglet 1')
    st.write('Ceci est le contenu de l\'onglet 1.')
 
# Ajouter du contenu au deuxième onglet
with tabs[1]:
    st.header('Onglet 2')
    st.write('Ceci est le contenu de l\'onglet 2.')
 
# Ajouter du contenu au troisième onglet
with tabs[2]:
    st.header('Onglet 3')
    st.write('Ceci est le contenu de l\'onglet 3.')

Dans cet exemple, chaque onglet est un conteneur qui contient son propre contenu, et les utilisateurs peuvent passer d'un onglet à l'autre pour afficher un contenu différent.

Mise en page et conception par onglet Streamlit

Streamlit offre une API pratique pour créer et concevoir des applications interactives en Python. La mise en page par onglets est l'une des fonctionnalités de conception proposées par Streamlit. Avec une mise en page par onglets, vous pouvez organiser votre contenu dans des onglets séparés, ce qui rend votre application plus organisée et conviviale.

Voici un exemple d'une application Streamlit avec une mise en page par onglets :

import streamlit as st
 
st.title('Mon application')
 
# Créer une mise en page par onglets
tabs = st.tabs(['Onglet 1', 'Onglet 2', 'Onglet 3'])
 
# Ajouter du contenu au premier onglet
with tabs[0]:
    st.header('Onglet 1')
    st.write('Ceci est le contenu de l\'onglet 1.')
 
# Ajouter du contenu au deuxième onglet
with tabs[1]:
    st.header('Onglet 2')
    st.write('Ceci est le contenu de l\'onglet 2.')
 
# Ajouter du contenu au troisième onglet
with tabs[2]:
    st.header('Onglet 3')
    st.write('Ceci est le contenu de l\'onglet 3.')

Dans cet exemple, l'application a une mise en page par onglets avec trois onglets, et chaque onglet contient son propre contenu.

Navigation par onglets et interface utilisateur Streamlit

Les onglets Streamlit permettent une navigation facile entre des groupes de contenu liés. La transition entre les onglets est rapide et fluide, offrant une excellente expérience utilisateur. De plus, vous pouvez créer des onglets dynamiquement et y insérer du contenu, ce qui est particulièrement utile lorsque le nombre d'onglets et leur contenu ne sont pas connus à l'avance.

Par exemple, vous pourriez avoir une application Streamlit où le nombre d'onglets et leur contenu sont déterminés par l'entrée utilisateur :

import streamlit as st
 
st.title('Mon application dynamique')
 
# Obtenez le nombre d'onglets de l'utilisateur
num_tabs = st.number_input('Entrez le nombre d\'onglets', min_value=1, max_value=10, value=3)
 
# Créer des onglets
tab_titles = [f'Onglet {i+1}' for i in range(num_tabs)]
tabs = st.tabs(tab_titles)
 
# Ajouter du contenu à chaque onglet
for i in range(num_tabs):
    with tabs[i]:
        st.header(f'Onglet {i+1}')
        st.write(f'Ceci est le contenu de l\'onglet {i+1}.')

Dans cet exemple, l'utilisateur peut spécifier le nombre d'onglets, et l'application crée dynamiquement les onglets et y ajoute du contenu.

Contenu et affichage des onglets Streamlit

Les onglets Streamlit sont essentiellement des conteneurs pour tout ce que vous souhaitez créer dans votre application. Ils permettent d'afficher une variété de contenus, tels que des métriques, des graphiques, des tableaux et des widgets de saisie. Cela fait des onglets Streamlit un outil polyvalent pour créer des applications interactives et dynamiques.

Voici un exemple d'une application Streamlit qui utilise des onglets pour afficher différents types de contenu :

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
 
# Charger des données
data = pd.read_csv('data.csv')
 
st.title('Mon application de visualisation des données')
 
# Créer des onglets
tab_titles = ['Métriques', 'Graphique', 'Tableau', 'Saisie']
tabs = st.tabs(tab_titles)
 
# Ajouter du contenu à chaque onglet
with tabs[0]:
    st.header('Métriques')
    st.metric('Métrique 1', 123)
    st.metric('Métrique 2', 456)
 
with tabs[1]:
    st.header('Graphique')
    fig, ax = plt.subplots()
    ax.plot(data['x'], data['y'])
    st.pyplot(fig)
 
with tabs[2]:
    st.header('Tableau')
    st.line_chart(data)
 
with tabs[3]:
    st.header('Saisie')
    st.text_input('Entrez du texte')
    st.number_input('Entrez un nombre')

Dans cet exemple, l'onglet 'Métriques' affiche des métriques, l'onglet 'Graphique' affiche un graphique, l'onglet 'Tableau' affiche un graphique linéaire et l'onglet 'Saisie' contient des widgets de saisie.

Conclusion

Les onglets Streamlit sont une fonctionnalité puissante qui peut grandement améliorer la fonctionnalité et l'expérience utilisateur de vos applications. Que vous travailliez sur un projet de science des données, que vous créiez un tableau de bord ou que vous construisiez une application complexe, les onglets Streamlit peuvent vous aider à organiser votre contenu et rendre votre application plus conviviale. Alors, commencez à explorer les onglets Streamlit dès aujourd'hui et voyez comment ils peuvent bénéficier à vos projets.

Avez-vous 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.

PyGWalker pour la visualisation des données dans Streamlit (opens in a new tab)

Questions fréquemment posées

Est-ce que Streamlit supporte les onglets ?

Oui, Streamlit supporte les onglets. Vous pouvez créer plusieurs onglets dans votre application Streamlit pour organiser votre contenu et améliorer la navigation des utilisateurs.

Comment positionner les éléments dans Streamlit ?

Dans Streamlit, vous positionnez les éléments en les écrivant dans l'ordre dans lequel vous souhaitez qu'ils apparaissent. Streamlit s'exécute de haut en bas, donc l'ordre dans lequel vous écrivez vos éléments est l'ordre dans lequel ils apparaîtront dans votre application.

Comment fonctionne Streamlit ?

Streamlit fonctionne en transformant les scripts Python en applications web interactives. Il fournit un ensemble d'API de haut niveau pour créer des éléments interactifs, tels que des curseurs, des cases à cocher et des onglets. Lorsque vous exécutez votre script Streamlit, il démarre un serveur web et ouvre une fenêtre de navigateur pointant vers le serveur.

Quel est le rôle de Streamlit en Python ?

Streamlit est une bibliothèque Python pour créer des applications web interactives. Il permet aux développeurs Python et aux scientifiques des données de créer des applications d'analyse de données, d'apprentissage automatique et de visualisation de données, sans avoir besoin de connaître HTML, CSS ou JavaScript.