Présentation du framework web Python Stream

Salut la Communauté!

Dans cet article, je présenterai le framework web Python Streamlit.

Ci-dessous, vous trouverez les sujets que nous aborderons:

• 1-Introduction au framework web Streamlit
• 2-Installation du module Streamlit
• 3-Lancement de l'application Streamlit
• 4-Commandes de base de Streamlit
• 5-Affichage du contenu multimédia 
• 6-Widgets d'input
• 7-Affichage des progrès et de l'état
• 8-Barre latérale et conteneur
• 9-Visualisation des données
• 10-Affichage de DataFrame

 

Commençons donc par le premier sujet.

1-Introduction au framework web Python Streamlit 

Streamlit est un framework Python open-source qui permet aux data scientists et aux ingénieurs en apprentissage automatique de créer des applications web interactives de manière simple et rapide.
Grâce à sa syntaxe simple et à son intégration facile avec les bibliothèques de science des données les plus répandues, Streamlit est devenu la référence en matière de prototypage et de partage de projets.

Pour plus de détails, veuillez consulter Documentations Streamlit

2-Installation du module Streamlit

Pour commencer à construire notre application Web Streamlit, il est nécessaire d'installer le module à l'aide du programme d'installation de paquets pip.

Pour installer Streamlit, exécutez la commande suivante:

pip install streamlit

La commande pour tester l'installation se trouve ci-dessous: 

streamlit hello

Lorsque la commande mentionnée ci-dessus est saisissée dans le terminal, la page suivante s'ouvre automatiquement:

 

3-Lancement de l'application Streamlit

Streamlit est simple à utiliser. Tout d'abord, on ajoute quelques commandes Streamlit à un script Python ordinaire, puis on le lance à l'aide de streamlit run:

streamlit run your_python_file.py 

Aussitôt que vous exécutez le script, un serveur Streamlit local s'active et votre application s'ouvre dans un nouvel onglet de votre navigateur web par défaut.  Notez que l'application est votre canevas, où vous dessinerez des graphiques, des textes, des widgets, des tableaux, etc.

Une autre façon d'exécuter Streamlit est de le faire en tant que module Python. Cela peut s'avérer utile pour configurer un IDE, par exemple PyCharm, afin qu'il fonctionne avec Streamlit:

python -m streamlit run your_python_file.py

N'oubliez pas de sauvegarder le fichier source chaque fois que vous souhaitez mettre à jour votre application. Dans ce cas, Streamlit détecte les changements éventuels et vous demande si vous souhaitez réexécuter votre application. Sélectionnez "Always rerun" (toujours réexécuter) en haut à droite de votre écran pour mettre à jour automatiquement votre application à chaque fois que vous modifiez son code source. Cela vous permettra de travailler dans une boucle interactive rapide : vous saisissez du code, vous l'enregistrez, vous l'essayez en direct, puis vous saisissez à nouveau du code, vous l'enregistrez, vous l'essayez, et ainsi de suite jusqu'à ce que vous soyez satisfait des résultats. Cette boucle étroite entre le codage et la visualisation des résultats en direct est l'une des façons dont Streamlit vous facilite la vie.

4-Commandes de base de Streamlit

Cette fonction permet d'ajouter à une application web des chaînes formatées, des graphiques de Matplotlib, des diagrammes d'Altair, des graphiques de Plotly, des cadres de données, des modèles de Keras et beaucoup d'autres.

Créons le fichier main.py ci-dessous:

import streamlit as st

st.write("Hello ,let's learn how to build a streamlit app together")

Lancez le fichier main.py en exécutant la commande suivante:

streamlit run main.py

st.title() : Cette fonction permet d'ajouter un titre à l'application.
st.header() : Cette fonction est utilisée pour attribuer l'en-tête d'une section.
st.markdown() : Cette fonction est utilisée pour définir la démarque d'une section. 
st.subheader(): Cette fonction est utilisée pour définir le sous-titre d'une section.
st.caption(): Cette fonction est utilisée pour écrire des légendes.
st.code(): Cette fonction est utilisée pour définir un code.  
st.latex(): Cette fonction affiche des expressions mathématiques formatées en LaTeX. 

import streamlit as st

st.title("This is the app title")
st.header("This is the header")
st.markdown("This is the markdown")
st.subheader("This is the subheader")
st.caption("This is the caption")
st.code("x = 2021")
st.latex(r''' a+a r^1+a r^2+a r^3 ''')

5-Affichage du contenu multimédia 

Nous avons énuméré ci-dessous quelques fonctions permettant d'afficher des images, des vidéos et des fichiers audio.

st.image(): Cette fonction est utilisée pour représenter une image.
st.audio(): Cette fonction est utilisée pour afficher un fichier audio. 
st.video(): Cette fonction est utilisée pour afficher une vidéo.

import streamlit as st

st.subheader("Image :")
st.image("kid.jpg")

st.subheader("Audio :")
st.audio("audio.mp3")

st.subheader("Video :")
st.video("video.mp4")

6-Widgets d'input

Les widgets sont les composants les plus importants de l'interface utilisateur. Streamlit dispose de plusieurs widgets qui vous permettent de créer de l'interactivité directement dans vos applications grâce à des boutons, des curseurs, des saisies de texte, etc.

st.checkbox(): Cette fonction renvoie une valeur booléenne. Lorsque la case est cochée, elle renvoie la valeur True (vrai). Sinon, elle renvoie une valeur False (Faux).
st.button(): Cette fonction permet d'afficher un widget de type bouton. 
st.radio(): Cette fonction permet d'afficher un widget de type bouton radio 
st.selectbox(): Cette fonction permet d'afficher un widget de type sélection. 
st.multiselect(): Cette fonction est utilisée pour afficher un widget de sélection multiple. 
st.select_slider(): Cette fonction est utilisée pour afficher un widget de sélection. 
st.slider(): Cette fonction est utilisée pour afficher un widget de courseur.

import streamlit as st

st.checkbox('Yes')
st.button('Click Me')
st.radio('Pick your gender', ['Male', 'Female'])
st.selectbox('Pick a fruit', ['Apple', 'Banana', 'Orange'])
st.multiselect('Choose a planet', ['Jupiter', 'Mars', 'Neptune'])
st.select_slider('Pick a mark', ['Bad', 'Good', 'Excellent'])
st.slider('Pick a number', 0, 50)

st.number_input(): Cette fonction affiche un widget de saisie numérique..
st.text_input(): Cette fonction expose un widget de saisie de texte.
st.date_input(): Cette fonction affiche un widget de saisie de date pour choisir une date..
st.time_input(): Cette fonction affiche un widget de saisie de l'heure pour choisir une heure.
st.text_area(): Cette fonction montre un widget de saisie de texte avec plus d'une ligne de texte.
st.file_uploader(): Cette fonction est exploitée pour démontrer un widget de téléchargement de fichiers.
st.color_picker(): Cette fonction est exploitée pour démontrer un widget de téléchargement de fichiers.

import streamlit as st

st.number_input('Pick a number', 0, 10)
st.text_input('Email address')
st.date_input('Traveling date')
st.time_input('School time')
st.text_area('Description')
st.file_uploader('Upload a photo')
st.color_picker('Choose your favorite color')

7-Affichage des progrès et de l'état

Nous allons maintenant expliquer comment ajouter une barre de progression et des messages d'état tels qu'erreur et succès à notre application.

st.balloons(): Cette fonction est utilisée pour afficher des ballons de célébration. 
st.progress(): Cette fonction est utilisée pour afficher une barre de progression. 
st.spinner(): Cette fonction est utilisée pour afficher un message d'attente temporaire pendant l'exécution.

import streamlit as st
import time

st.balloons()  # Ballons pour une célébration
st.subheader("Progress bar")
st.progress(10)  # Barre de progression
st.subheader("Wait the execution")
with st.spinner('Wait for it...'):
    time.sleep(10)  # Simulation d'un délai de processus

st.success(): Cette fonction affiche un message de succès.
st.error(): Cette fonction est utilisée pour afficher un message d'erreur. 
st.warning(): Cette fonction est utilisée pour afficher un message d'avertissement.
st.info(): Cette fonction révèle un message d'information.<
st.exception(): Cette fonction est utilisée pour afficher un message d'exception.

import streamlit as st

st.success("You did it!")
st.error("Error occurred")
st.warning("This is a warning")
st.info("It's easy to build a Streamlit app")
st.exception(RuntimeError("RuntimeError exception"))

8-Barre latérale et conteneur

Nous pouvons également créer une barre latérale ou un conteneur sur votre page pour organiser votre application. La hiérarchie et la disposition des pages de votre application peuvent avoir un impact considérable sur le confort d'utilisation. L'organisation de votre contenu permet aux visiteurs de mieux comprendre votre site et d'y naviguer plus facilement. Cela les aide également à trouver plus rapidement ce qu'ils cherchent et augmente la probabilité qu'ils reviennent. 

Barre latérale

Transmettre un élément à st.sidebar()&nbsp permet d'épingler cet élément à gauche, ce qui permet aux utilisateurs de se concentrer sur le contenu et rend l'application plus organisée et plus facile à gérer.

import streamlit as st

st.sidebar.title("This is writter inside sidebar")
st.sidebar.button("Click")
st.sidebar.radio("Pick your gender",["Male","Female"])

Conteneur

st.container() ;est utilisé pour construire un conteneur invisible dans lequel vous pouvez placer des éléments créant une disposition et une hiérarchie utiles.

import streamlit as st

container = st.container()
container.write("This is written inside the container")
st.write("This is written outside the container")

import streamlit as st
import numpy as np

with st.container():
    st.write("This is inside the container")

    st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")

9-Visualisation des données

La visualisation des données simplifie la narration en rassemblant les données dans un format plus simple, en mettant en évidence les tendances et les valeurs aberrantes. Une bonne visualisation transmet un message narratif, en éliminant le bruit des données et en mettant l'accent sur les informations utiles. Cependant, c'est bien plus compliqué que de simplement habiller un graphique pour l'embellir ou d'ajouter la partie "info" d'une infographie.
Une visualisation de données efficace est un délicat exercice d'équilibre entre la forme et la fonction. Un graphique simple pourrait être trop ennuyeux pour attirer l'attention ou communiquer un message puissant, tandis que la visualisation la plus étonnante pourrait ne pas réussir à transmettre la bonne idée. Les données et les éléments visuels doivent fonctionner ensemble. Cependant, combiner une bonne analyse avec une excellente narration est un art. 

st.pyplot(): Cette fonction est utilisée pour afficher une graphique matplotlib.pyplot.

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

rand = np.random.normal(1, 2, size=20)
fig, ax = plt.subplots()
ax.hist(rand, bins=15)
st.pyplot(fig)

st.line_chart(): Cette fonction permet d'afficher un graphique linéaire.

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])
st.line_chart(df)

st.bar_chart(): Cette fonction permet d'afficher un diagramme à barres.

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])
st.bar_chart(df)

st.map(): Cette fonction permet d'afficher des cartes dans l'application. Cependant, elle nécessite les valeurs de latitude et de longitude qui ne peuvent pas être nulles/NA.

import pandas as pd
import numpy as np
import streamlit as st

df = pd.DataFrame(
    np.random.randn(500, 2) / [50, 50] + [37.76, -122.4], columns=['lat', 'lon']
)
st.map(df)

10-Affichage de DataFrame

st.dataframe(): Cette commande permet d'afficher un DataFrame sous forme de table interactive. Elle fonctionne avec une variété d'objets de type collection et DataFrame.

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))

st.dataframe(df)  # Identique à st.write(df)

Vous pouvez également passer un objet Pandas Styler pour modifier le style du DataFrame rendu:

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(10, 20), 
                  columns=("col %d" % i for i in range(20)))

st.dataframe(df.style.highlight_max(axis=0))

Summary

Dans cet article, après avoir présenté le framework web Streamlit, j'ai montré comment installer l'application Streamlit et la faire fonctionner. Nous avons également exploré quelques commandes de base, des widgets et des fonctionnalités de visualisation de données.

Dans mon prochain article, nous créerons une application web Streamlit pour nous connecter au jeu de données IRIS et nous explorerons ensemble les concepts avancés de Streamlit.

Merci!