Streamlit : Crée ton app de data IA interactive en 20 minutes (de zéro à héro)

Tu as écrit un super script Python qui analyse des données ou utilise une IA. Il marche dans ton terminal. Mais personne d'autre ne peut l'utiliser — tes collègues, tes potes, ton patron. Ils ne vont pas ouvrir un terminal et taper `python3 mon_script.py`. Ce dont tu as besoin, c'est d'une interface. Et c'est exactement ce que Streamlit te permet de faire : transformer ton script Python en application web interactive, sans écrire une seule ligne de HTML, CSS ou JavaScript.

Dans ce tutoriel, on va construire ensemble une mini-application complète : un classifieur d'images par IA qui tourne directement dans ton navigateur. Tu vas écrire moins de 80 lignes de Python, et à la fin tu auras une vraie app web que tu pourras partager avec le monde entier.

Illustration suggérée : un écran splitté en deux — à gauche un terminal noir avec python3 script.py, à droite la même app transformée en page web colorée avec des widgets, des graphiques et un drag-and-drop d'image. Flèche entre les deux avec "Streamlit ".

1. C'est quoi Streamlit, concrètement ?

Streamlit est un framework Python open-source créé en 2019. Son concept est radicalement simple :

Tu écris du Python normal.
Streamlit transforme automatiquement tes variables en widgets interactifs.
À chaque interaction utilisateur, ton script est réexécuté de haut en bas (mais intelligemment : avec un cache pour ne pas tout recalculer).
Résultat : une app web qui tourne dans ton navigateur.

Pas de HTML. Pas de CSS. Pas de JavaScript. Pas de Flask, Django, ou FastAPI à configurer. Juste du Python.

Concrètement, voici ce que trois lignes de Streamlit produisent :

python

import streamlit as st
st.title("Ma première app")
st.write("Hello, le monde !")

Et paf — une page web avec un titre et du texte. C'est tout.

2. Installation : prépare ton environnement

On va travailler proprement, dans un environnement virtuel. Tu vas avoir besoin de Python 3.8 minimum (vérifie avec python3 --version).

bash

# Crée un dossier pour ton projet
mkdir mon-app-streamlit
cd mon-app-streamlit

# Crée un environnement virtuel
python3 -m venv venv

# Active-le
# Sur Linux/Mac :
source venv/bin/activate
# Sur Windows :
# venv\Scripts\activate

# Installe Streamlit
pip install streamlit

# Vérifie que tout est OK
streamlit --version

Tu devrais voir quelque chose comme Streamlit, version 1.42.0. Parfait, on est prêts.

3. Ton premier fichier : hello.py

Crée un fichier app.py avec ce contenu minimal :

python

import streamlit as st

st.set_page_config(
    page_title="Mon Classifieur IA",
    page_icon="",
    layout="centered"
)

st.title(" Classifieur d'images par IA")
st.markdown("Dépose une image et je te dis ce qu'elle contient !")

Lance l'app avec :

bash

streamlit run app.py

Ton navigateur s'ouvre automatiquement sur http://localhost:8501. Tu vois ta première page Streamlit !

Ce que set_page_config fait : - page_title : le titre dans l'onglet du navigateur - page_icon : l'emoji dans l'onglet - layout="centered" : le contenu est centré (sinon utilise "wide" pour du plein écran)

4. Ajoute un upload d'image (drag-and-drop)

Modifie ton app.py pour ajouter un widget d'upload :

python

import streamlit as st
from PIL import Image
import io

st.set_page_config(
    page_title="Mon Classifieur IA",
    page_icon="",
    layout="centered"
)

st.title(" Classifieur d'images par IA")
st.markdown("Dépose une image et je te dis ce qu'elle contient !")

# Widget d'upload
fichier = st.file_uploader(
    "Choisis une image...",
    type=["jpg", "jpeg", "png", "webp"],
    help="Formats acceptés : JPG, PNG, WEBP"
)

if fichier is not None:
    # Affiche l'image uploadée
    image = Image.open(fichier)
    st.image(image, caption="Image chargée ", use_container_width=True)
    
    # Infos sur l'image
    st.info(f" Dimensions : {image.size[0]}×{image.size[1]} pixels")

Relance avec streamlit run app.py (ou laisse Ctrl+C puis relance, ou Streamlit détecte le changement auto si tu as st.rerun). Dépose une image — tu la vois s'afficher instantanément.

Ce que tu dois voir : une zone de drag-and-drop avec "Browse files", puis ton image qui s'affiche en dessous une fois chargée.

5. Branche l'IA : classification avec MobileNetV2

Maintenant, on va utiliser un vrai modèle d'IA pour classifier l'image. On utilise MobileNetV2 via PyTorch — c'est un modèle léger (14 Mo) qui reconnaît 1000 catégories d'objets, et il tourne même sur un laptop sans GPU.

Installe les dépendances :

bash

pip install torch torchvision pillow

Puis voici le code complet de app.py :

python

import streamlit as st
from PIL import Image
import torch
import torchvision.transforms as transforms
from torchvision.models import mobilenet_v2, MobileNet_V2_Weights
import io

# ─── CONFIG ────────────────────────────────────────
st.set_page_config(
    page_title="Classifieur IA",
    page_icon="",
    layout="centered"
)

# ─── CHARGEMENT DU MODÈLE (avec cache) ────────────
@st.cache_resource
def charger_modele():
    """Charge MobileNetV2 pré-entraîné sur ImageNet."""
    with st.spinner(" Chargement du modèle IA..."):
        # Charge les poids et les labels ImageNet
        weights = MobileNet_V2_Weights.IMAGENET1K_V1
        modele = mobilenet_v2(weights=weights)
        modele.eval()  # Passe en mode évaluation (pas d'entraînement)
        
        # Transformations pour préparer l'image
        transform = transforms.Compose([
            transforms.Resize(256),
            transforms.CenterCrop(224),
            transforms.ToTensor(),
            transforms.Normalize(
                mean=[0.485, 0.456, 0.406],
                std=[0.229, 0.224, 0.225]
            )
        ])
        
        # Liste des labels ImageNet
        labels = weights.meta["categories"]
        
    return modele, transform, labels

modele, transform, labels = charger_modele()

# ─── INTERFACE ─────────────────────────────────────
st.title(" Classifieur d'images par IA")
st.markdown(
    "Dépose une image et je te dis ce qu'elle contient, "
    "grâce à un réseau de neurones qui tourne directement "
    "**dans ton navigateur** (enfin, sur ton serveur local )."
)

fichier = st.file_uploader(
    " Choisis une image...",
    type=["jpg", "jpeg", "png", "webp"],
    help="Formats acceptés : JPG, PNG, WEBP"
)

if fichier is not None:
    # Affiche l'image
    image = Image.open(fichier).convert("RGB")
    col1, col2 = st.columns([1, 1])
    
    with col1:
        st.image(image, caption="Image chargée ", use_container_width=True)
    
    with col2:
        # Prédiction
        with st.spinner(" Analyse en cours..."):
            # Prépare l'image pour le modèle
            tenseur = transform(image).unsqueeze(0)  # Ajoute la dimension batch
            
            # Inférence (pas de calcul de gradient)
            with torch.no_grad():
                predictions = modele(tenseur)
                probabilites = torch.nn.functional.softmax(predictions[0], dim=0)
            
            # Top 5 prédictions
            top5_probs, top5_indices = torch.topk(probabilites, 5)
            
            st.subheader(" Top 5 prédictions")
            for i in range(5):
                label = labels[top5_indices[i].item()]
                prob = top5_probs[i].item() * 100
                
                # Jauge de progression plus jolie
                couleur = "" if prob > 50 else "" if prob > 20 else ""
                st.write(f"{couleur} **{label}** — {prob:.1f}%")
                st.progress(min(prob / 100, 1.0))

# ─── PIED DE PAGE ──────────────────────────────────
st.divider()
st.caption(
    "Propulsé par MobileNetV2 (PyTorch) + Streamlit. "
    "Ton image n'est jamais envoyée sur Internet — tout tourne en local."
)

Sauvegarde et relance streamlit run app.py. Ça y est — tu as une application de classification d'images qui tourne !

6. Comment ça marche : décryptage ligne par ligne

Le cache magique `@st.cache_resource`

Streamlit réexécute ton script à chaque interaction. Sans cache, le modèle serait rechargé à chaque fois (3-5 secondes). @st.cache_resource dit à Streamlit : « Stocke le résultat en mémoire, et réutilise-le tant que le code ne change pas. »

`modele.eval()`

Passe le modèle en mode évaluation. Pas de dropout, pas de batch norm apprenante — le modèle est figé pour l'inférence.

`torch.no_grad()`

Désactive le calcul des gradients. Ça économise de la mémoire et accélère l'inférence, puisque tu n'entraînes pas le modèle.

Les colonnes `st.columns`

Tu crées une disposition en deux colonnes côte à côte. Pratique pour comparer l'image et les résultats.

`st.progress()`

Une barre de progression visuelle pour chaque probabilité. C'est plus parlant qu'un simple chiffre.

7. Va plus loin : 3 améliorations que tu peux coder en 5 minutes

7.1 Ajouter un seuil de confiance

python

seuil = st.slider("Seuil de confiance minimum", 0, 100, 10, help="Affiche uniquement les prédictions au-dessus de ce seuil")

# Dans la boucle d'affichage :
if prob >= seuil:
    st.write(f"...")

7.2 Permettre de prendre une photo avec la webcam

python

photo = st.camera_input("Ou prends une photo ")

if photo is not None:
    image = Image.open(photo).convert("RGB")
    # même traitement que pour fichier...

7.3 Sauvegarder l'historique des prédictions

python

if "historique" not in st.session_state:
    st.session_state.historique = []

# Après prédiction :
st.session_state.historique.append({
    "fichier": fichier.name,
    "top1": labels[top5_indices[0].item()],
    "confiance": top5_probs[0].item()
})

# Afficher l'historique
with st.expander(" Historique des prédictions"):
    for h in st.session_state.historique:
        st.write(f"- **{h['top1']}** ({h['confiance']:.0%}) — *{h['fichier']}*")

8. Mets ton app en ligne gratuitement

Tu veux que le monde entier puisse utiliser ton classifieur ? Utilise Streamlit Community Cloud, c'est gratuit :

bash

# 1. Pousse ton code sur GitHub
git init
git add app.py requirements.txt
git commit -m "Mon classifieur IA avec Streamlit"
git push origin main

# 2. Crée un fichier requirements.txt
echo "streamlit
torch
torchvision
pillow" > requirements.txt

Puis va sur share.streamlit.io, connecte ton compte GitHub, sélectionne ton dépôt, et Streamlit déploie ton app automatiquement en 30 secondes. Tu obtiens une URL publique du type https://ton-app.streamlit.app.

9. Pièges classiques — et comment les éviter

Piège	Symptôme	Solution
Oubli d'environnement virtuel	`ModuleNotFoundError: No module named 'streamlit'`	Toujours `source venv/bin/activate` avant de lancer
Modèle rechargé à chaque interaction	L'app est lente, 5 sec de latence à chaque clic	Utilise `@st.cache_resource` sur la fonction de chargement
Image non convertie en RGB	`ValueError: pic should be 2/3 dimensional`	Fais `Image.open(fichier).convert("RGB")`
`st.session_state` non initialisé	`AttributeError: st.session_state has no attribute...`	Vérifie l'existence avec `if "cle" not in st.session_state:`
Fichier trop gros pour Streamlit Cloud	Déploiement qui timeout	Limite la RAM : les modèles légers (MobileNet, DistilBERT) sont tes amis. Pas de LLM 7B sur le free tier !
App qui rame sur mobile	Interface qui lag sur téléphone	Utilise `layout="centered"` plutôt que `"wide"`, et `use_container_width=True` pour les images

10. Pour aller plus loin

Streamlit + Ollama — Branche Ollama (que tu as peut-être installé grâce au tutoriel précédent) pour créer un chatbot local avec interface web. Streamlit gère le chat, Ollama gère l'IA. Tout en local, tout gratuit.

Streamlit + LangChain — Construis une app RAG (Retrieval-Augmented Generation) avec une interface Streamlit. Upload un PDF, pose des questions dessus, vois les réponses.

Streamlit Components — La galerie officielle propose des dizaines de composants custom : cartes interactives, éditeurs de code, lecteurs PDF, graphiques 3D... Tu peux tout intégrer en deux lignes.

En résumé

Tu viens de construire une application web complète de classification d'images, en moins de 80 lignes de Python pur. Aucune ligne de HTML, CSS ou JavaScript. Streamlit a géré toute la partie web pour toi.

La recette est toujours la même : 1. `st.title()` → donne un titre 2. `st.file_uploader()` / `st.slider()` / etc. → crée des widgets 3. Ton code Python → traite les données 4. `st.write()` / `st.image()` / `st.progress()` → affiche les résultats

Et si tu veux partager ton app avec le monde, Streamlit Community Cloud la déploie gratuitement en 30 secondes.

À toi de jouer ! Prends n'importe quel script Python que tu utilises — analyse de données, prédiction IA, génération de texte — et donne-lui une interface en 20 minutes chrono. Le seul prérequis, c'est de savoir écrire du Python. Et ça, tu sais déjà le faire.