Corentin DUCLOUX – 💻 Streamlit

Présentation

Un framework python récent, lancé en 2019.

Et avant Streamlit, qu’est ce qu’il y avait ?

Flask Prise en main très complexe, plus adaptée pour les Software Engineers.
Plotly Dash Prise en main plus simple que Flask, concept assez similaire à Shiny avec séparation des composants UI et server.

Pourquoi Streamlit ?

Objectif : Simplifier au maximum le développement d’applications Data.

User Interface ?

Inputs ?

Outputs ?

Interactions ?

Callbacks ?

Et pourquoi pas juste un script ?

Installation

On passe à l’installation ?

Lancement d’un terminal :
Et ensuite on installe via pip avec la commande

python -m pip install streamlit

Prise en main

Lançons la démo pour voir de quoi Streamlit est capable.

👋 Hello Streamlit

python -m streamlit hello

Un premier jet !

app.py

import streamlit as st

st.set_page_config(page_icon="🐍", page_title="PyApp")
st.title("😎 Ma première app super stylée")

st.markdown("Du *markdown* dans l'app ? **Rien de plus simple !**")
st.markdown("- Lien vers [`streamlit`](https://streamlit.io/)")
st.markdown(
    """
    > Des couleurs ? :orange[orange], :red[rouge], :green[vert]
    """
)

st.code(
    """
    [[i for i in range(5)] for j in range(2)] 
    # Du code non-exécutable
    """,
    language="python"
)

st.divider()

🚀 et pour lancer l’appli :

python -m streamlit run app.py

Ce qu’on a vu jusqu’ici

st.set_page_config() pour configurer le favicon et le titre de l’onglet dans le navigateur
st.title() pour donner un titre à notre app
st.markdown() pour ajouter du texte avec différents types de formattage : italique, gras, ajout de liens, etc.
st.code() pour inclure du code non-exécutable provenant de différents langages : python, SQL, CSS, etc.
st.divider() pour tracer une ligne horizontale

Intégration de LaTeX

Identité D’Euler

Ajoutons ces quelques lignes de code.

st.header("Ajoutons du LaTeX")
st.subheader("Identité d'*Euler*", divider="blue")
st.latex("e^{i \pi} + 1 = 0")
st.caption(
    """
    L'identité d'*Euler* est souvent citée comme
    un exemple de beauté mathématique.
    """
)

Présentation de widgets

Testons quelques widgets !

st.selectbox()
st.button()

fruit = st.selectbox(
    "Fruit",
    ("🍓 Fraise", "🍊 Orange", "🥭 Mangue", "🍌 Banane", "🍏 Pomme"),
    index = None,
    placeholder = "Sélectionner un fruit"
)

bouton = st.button("Voir les détails du fruit sélectionné")

if bouton:
    st.write(f"T'as la dalle ! Tu veux manger une **{fruit}**")

Options de layout

st.columns() Colonnes
st.container() Conteneur
st.expander() Expandeur
st.tabs() Tabs
st.sidebar() Sidebar
st.popover() Popover

Colonnes

colonne_1, colonne_2 = st.columns(2)

Explication visuelle par Donald J. Trump

Sidebar

On va changer notre interface utilisateur pour ajouter une Sidebar et regrouper nos widgets.

with st.sidebar:
    prenom = st.text_input("🤠 Ecris ton prénom *cow-boy* !")
    reussite = st.checkbox("Tu penses avoir ton année ?")
    note_pf = st.number_input(
        "Ta note en Concurrence et Innovation",
        min_value=0,
        max_value=5,
        step=1
    )
    epanouissement = st.select_slider(
        "Ton épanouissement en master",
        range(11)
    )

Tabs

On va ajouter quelques onglets (Tabs) à notre application pour diversifier l’interface.

tab_1, tab_2, tab_3 = st.tabs(
    ["🔎 Infos sur l'année", "📄 DataFrame", "📊 Graphiques"]
)

if prenom:
    with tab_1:
        if reussite:
            st.balloons()
            st.write(f"Félicitations pour ton année *{prenom}* ! 🎈")
        else:
            st.snow()
            st.write(
                f"**Aie**... 🥶 c'est un travail insuffisant *{prenom}*"
            )

Des messages de statut

ℹ️ st.info()
❌ st.error()
⚠️ st.warning()
✅ st.success()

with st.sidebar:
    with st.expander("On regarde quelques messages ?"):
        st.info(
            f"Ton épanouissement en master : {epanouissement}/10",
            icon="👨‍🏫"
        )
        st.error(
            f"Ta note en Concurrence et Innovation : {note_pf}",
            icon="👀"
        )
        st.warning("Ceci est un avertissement générique", icon="⚠")
        st.success("Message de réussite.", icon="✅")

Et avec des vraies données ? (I)

On a vu tout un tas d’éléments d’UI, mais on a pas vraiment interragi avec des données dignes de ce nom.

Morale de l’histoire : Installe polars

Et avec des vraies données ? (II)

Exemple avec des données de cas de COVID-19 aux Etats-Unis entre 2020 et 2022 : + 2.5 millions de lignes !

import polars as pl

df_covid = pl.read_csv(
    "https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv"
)

Problèmes

L’import met trois ans
En plus, chaque action dans l’appli relance l’import…

On est pas rendus…

Solution (I)

Deux décorateurs très utiles :

@st.cache_data et @st.cache_resource

Solution (II)

@st.cache_data
def import_covid_usa(link: str) -> pl.DataFrame:
    """Fonction d'import des données optimisée."""
    return pl.read_csv(link)

💡 Et maintenant, observons la différence !

df_covid = import_covid_usa(
    "https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv"
)

Note

On attend une seule fois pour l’import des données, ce qui est beaucoup plus satisfaisant pour l’utilisateur.

Solution la plus optimale ici : base de données

Affichage d’un tableau

On a maintenant envie d’afficher nos données sous forme de tableau.

with tab_2:
    st.dataframe(
        df_covid,
        hide_index=True,
        use_container_width=True,
        column_config={
            "date": st.column_config.DateColumn("📅 Date", format="DD/MM/YYYY")
        },
    )

Grande flexibilité dans l’affichage.

📊 Et pour les graphiques ?

On va chercher à visualiser le nombre de morts par état à une certaine date.

with tab_3:
    st.subheader("Nombre de personnes mortes de COVID-19 *(Noël 2020)*")

    deaths_by_state_christmas = (
        df_covid.filter(pl.col("date") == "2020-12-25")
        .group_by("state")
        .agg(pl.col("deaths").sum())
    )

    st.bar_chart(deaths_by_state_christmas, x="state", y="deaths")

De nombreuses options de visualisation à la volée :

st.line_chart()
st.scatter_chart()
st.map()
etc.

DeltaGenerator

Mais comment tout ça marche ?

Au coeur de tous ces composants permettant de créer l’interface utilisateur, il y a une classe : le DeltaGenerator.

Système basé sur protobuf, crée par GOOGLE

Pour aller + loin

Secrets management

def check_password():
    """Returns `True` if the user had the correct password."""

    def password_entered():
        """Checks whether a password entered by the user is correct."""
        if hmac.compare_digest(st.session_state["password"], st.secrets["password"]):
            st.session_state["password_correct"] = True
            del st.session_state["password"]  # Don't store the password.
        else:
            st.session_state["password_correct"] = False

    # Return True if the password is validated.
    if st.session_state.get("password_correct", False):
        return True

    # Show input for password.
    st.text_input(
        "Mot de passe",
        type="password",
        on_change=password_entered,
        key="password",
        placeholder="Veuillez insérer le mot de passe pour accéder à l'application.",
    )
    if "password_correct" in st.session_state:
        st.error("😕 Mot de passe incorrect")
    return False


if not check_password():
    st.stop()

Exemples concrets

🍷 Projet de Machine Learning : Wine Scraping
🚗 Projet de Machine Learning : EstimyCar

API Reference : https://docs.streamlit.io/library/api-reference

💻 Streamlit

Présentation

Pourquoi Streamlit ?

Installation

Prise en main

Un premier jet !

Ce qu’on a vu jusqu’ici

Intégration de LaTeX

Présentation de widgets

Options de layout

Colonnes

Sidebar

Tabs

Des messages de statut

Et avec des vraies données ? (I)

Et avec des vraies données ? (II)

On est pas rendus…

Solution (I)

Solution (II)

Affichage d’un tableau

📊 Et pour les graphiques ?

DeltaGenerator

Pour aller + loin

Exemples concrets

FIN

(Un dernier meme pour la route)