Streamlit c'est quoi ?

• Streamlit est un cadriciel Python open source pour créer rapidement des petites applications web interactives
• Idéal pour la visualisation et l'analyse de données ainsi que la création de tableaux de bord interactifs
• Aucune compétence frontend (HTML/CSS/JS) nécessaire
• Si on sait écrire un script Python, on sait développer une application Streamlit

Exemples

Streamlit Gallerie (https://streamlit.io/gallery)

• Météo à Seatlle : https://demo-seattle-weather.streamlit.app
• Ondes gravitationnelles : https://gw-quickview.streamlit.app

iMio (https://gitlab.imio.be/imio-stats)

• Agatha : https://stats-staging.imio.be/agatha/
• POCs : https://stats-staging.imio.be/pocs/

Extensions

• Une petite liste : https://streamlit.io/components
• Folium/Leaflet : https://folium.streamlit.app
• Pydantic : https://github.com/lukasmasuch/streamlit-pydantic

Atelier pratique

• Résultat
  https://stats-staging.imio.be/pocs/tree
• Code
  https://gitlab.imio.be/imio-stats/stats-pocs/-/blob/main/src/apps/tree.py

Créer une app streamlit avec uv

uv init ifm
cd ifm
uv add streamlit

cat > main.py << 'EOF'
import streamlit as st

st.title("Arbres de la ville de Namur")
st.write("Petite application Streamlit de visualisation des données des arbres de la ville de Namur.")
EOF

uv run streamlit run main.py

Charger les données de ODWB

• Dataset : https://www.odwb.be/explore/dataset/namur-arbres/
• Maximum 100 enregistrements par requête

import pandas as pd
import requests

@st.cache_data()
def load_data_from_odwb():
    url = "https://www.odwb.be/api/explore/v2.1/catalog/datasets/namur-arbres/records?where=nom_simplifie IS NOT NULL and hauteur IS NOT NULL&limit=100"
    response = requests.get(url)
    return response.json()["results"]

odwb_data = load_data_from_odwb()
# Transforme les données JSON en un dataframe plat
data = pd.json_normalize(odwb_data)
# Affiche les données dans un tableau
st.dataframe(data)
# Affiche les arbres par localité
st.scatter_chart(
    data[data["hauteur"] > 0],
    x="acom_nom_m",
    y="hauteur",
    x_label="Localité",
    y_label="Hauteur (m)",
)

Créer des filtres

st.header("Filtres")
with st.container(horizontal=True):
    name_filter = st.selectbox(
        label="Type",
        index=None,
        placeholder="Tous",
        options=sorted(data["nom_simplifie"].dropna().unique().tolist()),
    )
    locality_filter = st.selectbox(
        label="Localité",
        index=None,
        placeholder="Toutes",
        options=sorted(data["acom_nom_m"].dropna().unique().tolist()),
    )
    min_height_filter = st.slider(
        label="Hauteur minimale (m)",
        min_value=0,
        max_value=int(data["hauteur"].max()),
        value=0,
    )

Filtrer les données

def filter_data(data, name=None, locality=None, min_height=0):
    # Commencer avec un masque qui sélectionne toutes les lignes
    mask = pd.Series([True] * len(data), index=data.index)
    # Appliquer le filtre par nom vernaculaire
    if name is not None:
        mask = mask & (data["nom_simplifie"] == name)
    # Appliquer le filtre par localité
    if locality is not None:
        mask = mask & (data["acom_nom_m"] == locality)
    # Appliquer le filtre par hauteur minimale
    if min_height > 0:
        mask = mask & (data["hauteur"] >= min_height)
    # Appliquer le masque final une seule fois
    return data[mask]

filtered_data = filter_data(
  data, name=name_filter, locality=locality_filter, min_height=min_height_filter
)
st.subheader(f"Nombre d'arbres dans la sélection : {len(filtered_data)}")
st.dataframe(filtered_data)

Déployer une application

Le Département SaaS a mis en place l'infrastructure pour déployer des applications streamlit derrière les url http://stats-staging.imio.be et http://stats.imio.be

• Définir une image Docker
  https://gitlab.imio.be/imio-stats/stats-pocs/-/blob/main/Dockerfile
• Définir le CI Gitlab
  https://gitlab.imio.be/imio-stats/stats-pocs/-/blob/main/.gitlab-ci.yml
• Définir le service dans k8s
  https://gitlab.imio.be/infra/k8s/imio-stats/-/tree/main/staging/stats-pocs

Questions ?