Chatbot — Interface avec Streamlit

Section 11.4.11 : Chatbot — Interface avec Streamlit

🎯 Objectif pédagogique

Construire une interface web complète pour votre chatbot IA avec Streamlit. Vous serez capable de créer un chatbot fonctionnel avec interface graphique, sidebar de configuration, et affichage temps réel des réponses.

Du terminal au web — Streamlit entre en jeu

Marc a un chatbot qui fonctionne en terminal. C'est bien pour tester, mais personne ne l'utilisera comme ça. Streamlit transforme un script Python en application web en quelques lignes. Zéro HTML, zéro CSS, zéro JavaScript.

Setup minimal

# pip install streamlit openai python-dotenv

# app.py
import streamlit as st
from openai import OpenAI
import os
from dotenv import load_dotenv

load_dotenv()
client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))

# Configuration de la page
st.set_page_config(
    page_title="CareerBot — Assistant Emploi 🤖",
    page_icon="🤖",
    layout="centered"
)

st.title("🤖 CareerBot")
st.caption("Ton assistant de recherche d'emploi IA")

Chat interface complète

# System prompt
SYSTEM_PROMPT = """Tu es CareerBot, un assistant de recherche d'emploi spécialisé 
dans la reconversion professionnelle vers les métiers tech/data/IA.
Ton : professionnel, chaleureux, direct. Tu tutoies.
Limite tes réponses à 300 mots max.
Termine toujours par une question ou suggestion d'action."""

# Initialiser l'historique dans session_state
if "messages" not in st.session_state:
    st.session_state.messages = []

# Sidebar — Configuration
with st.sidebar:
    st.header("⚙️ Configuration")
    model = st.selectbox("Modèle", ["gpt-4o-mini", "gpt-4o"], index=0)
    temperature = st.slider("Créativité", 0.0, 1.5, 0.7, 0.1)
    
    st.divider()
    st.header("📋 Profil")
    background = st.text_input("Expérience", "Finance, 8 ans")
    target = st.text_input("Objectif", "Data Analyst")
    
    if st.button("🗑️ Nouvelle conversation"):
        st.session_state.messages = []
        st.rerun()

# Afficher l'historique des messages
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# Chat input
if prompt := st.chat_input("Pose ta question..."):
    # Ajouter le message utilisateur
    st.session_state.messages.append(\{"role": "user", "content": prompt\})
    
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # Construire le contexte enrichi
    enriched_system = f"""\{SYSTEM_PROMPT\}
    
## Profil de l'utilisateur :
- Background : \{background\}
- Objectif : \{target\}"""
    
    # Générer la réponse avec streaming
    with st.chat_message("assistant"):
        messages = [\{"role": "system", "content": enriched_system\}] + st.session_state.messages
        
        stream = client.chat.completions.create(
            model=model,
            messages=messages,
            temperature=temperature,
            stream=True
        )
        
        response = st.write_stream(stream)  # Streamlit gère le streaming !
    
    # Sauvegarder la réponse
    st.session_state.messages.append(\{"role": "assistant", "content": response\})

Fonctionnalités avancées

# Ajoutez ces features à votre chatbot :

# 1. Upload de fichier (CV en PDF)
with st.sidebar:
    uploaded_file = st.file_uploader("📄 Ton CV (PDF)", type=["pdf", "txt"])
    if uploaded_file:
        cv_text = uploaded_file.read().decode("utf-8")  # Pour .txt
        st.session_state.cv = cv_text
        st.success("CV chargé !")

# 2. Boutons d'action rapide
col1, col2, col3 = st.columns(3)
with col1:
    if st.button("📝 Analyser mon CV"):
        prompt = "Analyse mon CV et donne-moi des suggestions d'amélioration."
with col2:
    if st.button("🎯 Préparer un entretien"):
        prompt = "Prépare-moi pour un entretien Data Analyst."
with col3:
    if st.button("📊 Marché de l'emploi"):
        prompt = "Quelles sont les tendances du marché data analyst en 2025 ?"

# 3. Afficher les métriques
with st.sidebar:
    st.header("📊 Stats")
    st.metric("Messages", len(st.session_state.messages))
    tokens_approx = sum(len(m["content"].split()) for m in st.session_state.messages)
    st.metric("Tokens ≈", tokens_approx)
    cost = tokens_approx * 0.00015 / 1000  # Approximation gpt-4o-mini
    st.metric("Coût ≈", f"$\{cost:.4f\}")

Lancer l'application

# Dans le terminal :
streamlit run app.py

# L'app s'ouvre automatiquement dans le navigateur à http://localhost:8501
# Hot reload : chaque modification du fichier se reflète en temps réel

🏋️ Exercice pratique (30 minutes)

1. →Installez Streamlit et créez l'app de chatbot complète
2. →Ajoutez la sidebar avec configuration du modèle et profil
3. →Implémentez le streaming des réponses
4. →Ajoutez 3 boutons d'action rapide
5. →Testez réellement l'interface dans votre navigateur