Creer des Spaces Gradio & Streamlit sur HuggingFace - Guide Exhaustif

Auteur : AYI-NEDJIMI | Consultant IA & Cybersecurite

Ce tutoriel vous guide dans la creation de Spaces HuggingFace avec Gradio et Streamlit : composants, themes, secrets, hardware GPU, stockage persistant, domaines personnalises, API client et integration dans vos sites web.

Pour approfondir le deploiement de chatbots RAG, consultez : Chatbot Entreprise RAG LangChain

---

1. Vue d'Ensemble des Spaces

Les Spaces HuggingFace hebergent gratuitement vos applications IA. Quatre types disponibles :

1.1 Creer un Space

from huggingface_hub import HfApi

api = HfApi(token="hf_votre_token")

# Creer un Space Gradio
api.create_repo(
    repo_id="mon-username/mon-space",
    repo_type="space",
    space_sdk="gradio",
    private=False
)

# Creer un Space Streamlit
api.create_repo(
    repo_id="mon-username/mon-space-streamlit",
    repo_type="space",
    space_sdk="streamlit",
    private=False
)

---

2. Creer une Application Gradio Pas a Pas

2.1 Application Minimale

import gradio as gr

def saluer(nom):
    return f"Bonjour {nom} ! Bienvenue sur HuggingFace Spaces."

demo = gr.Interface(
    fn=saluer,
    inputs=gr.Textbox(label="Votre nom", placeholder="Entrez votre nom..."),
    outputs=gr.Textbox(label="Message de bienvenue"),
    title="Mon Premier Space",
    description="Decouvrez Gradio avec cette application simple.",
    examples=[["Alice"], ["Bob"], ["Charlie"]]
)

demo.launch()

2.2 Application avec Modele HuggingFace

import gradio as gr
from transformers import pipeline

# Charger un modele
classifier = pipeline("sentiment-analysis", model="nlptown/bert-base-multilingual-uncased-sentiment")

def analyze_sentiment(text):
    if not text.strip():
        return "Veuillez entrer du texte."
    result = classifier(text)[0]
    stars = result['label']
    confidence = result['score']
    return f"Sentiment: {stars}\nConfiance: {confidence:.2%}"

demo = gr.Interface(
    fn=analyze_sentiment,
    inputs=gr.Textbox(
        label="Texte a analyser",
        placeholder="Entrez un texte pour analyser son sentiment...",
        lines=5
    ),
    outputs=gr.Textbox(label="Resultat"),
    title="Analyse de Sentiment Multilingue",
    description="Analysez le sentiment de n'importe quel texte (FR, EN, DE, ES, IT).",
    examples=[
        ["Ce produit est absolument fantastique !"],
        ["Terrible experience, je ne recommande pas."],
        ["Le service etait correct, rien de special."],
    ],
    theme=gr.themes.Soft()
)

demo.launch()

2.3 Application Multi-Onglets avec Blocks

import gradio as gr
from transformers import pipeline

sentiment = pipeline("sentiment-analysis")
summarizer = pipeline("summarization", model="facebook/bart-large-cnn")

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# Hub NLP - Outils de Traitement du Langage")
    gr.Markdown("Plusieurs outils NLP dans une seule application.")

    with gr.Tab("Analyse de Sentiment"):
        with gr.Row():
            with gr.Column():
                sentiment_input = gr.Textbox(label="Texte", lines=5)
                sentiment_btn = gr.Button("Analyser", variant="primary")
            with gr.Column():
                sentiment_output = gr.Textbox(label="Resultat")

        sentiment_btn.click(
            fn=lambda text: str(sentiment(text)[0]),
            inputs=sentiment_input,
            outputs=sentiment_output
        )

    with gr.Tab("Resume de Texte"):
        with gr.Row():
            with gr.Column():
                summary_input = gr.Textbox(label="Texte long", lines=10)
                max_length = gr.Slider(50, 300, value=130, label="Longueur max")
                summary_btn = gr.Button("Resumer", variant="primary")
            with gr.Column():
                summary_output = gr.Textbox(label="Resume")

        summary_btn.click(
            fn=lambda text, ml: summarizer(text, max_length=int(ml))[0]['summary_text'],
            inputs=[summary_input, max_length],
            outputs=summary_output
        )

    with gr.Tab("A propos"):
        gr.Markdown(
            "## A propos de cette application\n"
            "Cette application demonstre les capacites de Gradio et HuggingFace Transformers.\n\n"
            "**Modeles utilises:**\n"
            "- Sentiment: distilbert-base-uncased-finetuned-sst-2-english\n"
            "- Resume: facebook/bart-large-cnn\n\n"
            "**Auteur:** AYI-NEDJIMI"
        )

demo.launch()

---

3. Composants Gradio en Detail

3.1 Chatbot

import gradio as gr

def chatbot(message, history):
    # history est une liste de [user_msg, bot_msg]
    response = f"Vous avez dit: '{message}'. C'est votre message #{len(history)+1}."
    return response

demo = gr.ChatInterface(
    fn=chatbot,
    title="Mon Chatbot",
    description="Un chatbot simple pour demontrer gr.ChatInterface",
    examples=["Bonjour!", "Comment ca va?", "Qu'est-ce que HuggingFace?"],
    retry_btn="Reessayer",
    undo_btn="Annuler",
    clear_btn="Effacer",
)

demo.launch()

3.2 Image, Audio, Video

import gradio as gr

# Composant Image
def flip_image(image):
    return image.transpose(1)  # Miroir horizontal

image_demo = gr.Interface(
    fn=flip_image,
    inputs=gr.Image(type="pil", label="Image originale"),
    outputs=gr.Image(label="Image retournee"),
    title="Retourner une Image"
)

# Composant Audio
def reverse_audio(audio):
    sr, data = audio
    return sr, data[::-1]

audio_demo = gr.Interface(
    fn=reverse_audio,
    inputs=gr.Audio(label="Audio original"),
    outputs=gr.Audio(label="Audio inverse"),
    title="Inverser un Audio"
)

# Composant Video
# gr.Video(label="Video")

# Composant DataFrame
import pandas as pd

def filter_data(min_score):
    df = pd.DataFrame({
        "Modele": ["GPT-4", "Llama 3.1", "Mistral", "Qwen 2.5"],
        "Score": [95, 88, 85, 87],
        "Taille": ["1.7T", "70B", "7B", "72B"]
    })
    return df[df["Score"] >= min_score]

df_demo = gr.Interface(
    fn=filter_data,
    inputs=gr.Slider(70, 100, value=85, label="Score minimum"),
    outputs=gr.Dataframe(label="Modeles filtres"),
    title="Comparateur de LLM"
)

3.3 Composants Avances

import gradio as gr

with gr.Blocks() as demo:
    # Accordion
    with gr.Accordion("Parametres avances", open=False):
        temperature = gr.Slider(0, 2, value=0.7, label="Temperature")
        top_p = gr.Slider(0, 1, value=0.9, label="Top P")
        max_tokens = gr.Slider(50, 2000, value=500, label="Max Tokens")

    # Galerie d'images
    gallery = gr.Gallery(label="Resultats", columns=3, height="auto")

    # Upload de fichiers
    file_upload = gr.File(label="Telecharger un fichier", file_types=[".csv", ".json", ".txt"])

    # Code
    code = gr.Code(language="python", label="Code source")

    # Markdown
    md = gr.Markdown("## Resultat")

    # JSON
    json_output = gr.JSON(label="Reponse API")

    # Checkbox et Radio
    checkbox = gr.Checkbox(label="Mode avance")
    radio = gr.Radio(["Option A", "Option B", "Option C"], label="Choisir")
    dropdown = gr.Dropdown(["Modele 1", "Modele 2", "Modele 3"], label="Selectionner")

---

4. Themes et CSS Personnalise

4.1 Themes Integres

import gradio as gr

# Themes disponibles
# gr.themes.Base()
# gr.themes.Default()
# gr.themes.Glass()
# gr.themes.Monochrome()
# gr.themes.Soft()

demo = gr.Interface(
    fn=lambda x: x,
    inputs="text",
    outputs="text",
    theme=gr.themes.Soft()
)

4.2 Theme Personnalise

import gradio as gr

custom_theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="gray",
    neutral_hue="slate",
    font=gr.themes.GoogleFont("Inter"),
    font_mono=gr.themes.GoogleFont("JetBrains Mono"),
).set(
    body_background_fill="*neutral_50",
    block_background_fill="white",
    block_border_width="1px",
    block_border_color="*neutral_200",
    input_border_width="1px",
    button_primary_background_fill="*primary_500",
)

4.3 CSS Personnalise

import gradio as gr

css = """
.gradio-container {
    max-width: 900px !important;
    margin: auto !important;
}
.output-text {
    font-size: 18px;
    font-weight: bold;
    color: #1a73e8;
}
footer {
    display: none !important;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# Mon Application Stylisee")
    input_text = gr.Textbox(label="Entree")
    output_text = gr.Textbox(label="Sortie", elem_classes=["output-text"])
    btn = gr.Button("Executer", variant="primary")
    btn.click(fn=lambda x: x.upper(), inputs=input_text, outputs=output_text)

demo.launch()

---

5. requirements.txt et Dependances

Chaque Space a besoin d'un fichier requirements.txt :

# requirements.txt
transformers==4.46.0
torch==2.5.0
gradio==5.5.0
datasets==3.1.0
accelerate==1.1.0
sentence-transformers==3.3.0
langchain==0.3.7
chromadb==0.5.15
pandas==2.2.3
plotly==5.24.1

Fichier README.md (Metadata du Space)

---
title: Mon Super Space
emoji: "AI"
colorFrom: blue
colorTo: purple
sdk: gradio
sdk_version: 5.5.0
app_file: app.py
pinned: false
license: mit
tags:
  - cybersecurity
  - nlp
---

---

6. Secrets et Variables d'Environnement

6.1 Configurer des Secrets

Les secrets sont chiffres et accessibles uniquement par le Space :

1. Allez dans Settings > Repository secrets
2. Ajoutez vos cles : HF_TOKEN, OPENAI_API_KEY, etc.

import os

# Acceder aux secrets dans votre code
hf_token = os.environ.get("HF_TOKEN", "")
api_key = os.environ.get("OPENAI_API_KEY", "")

# Utiliser dans votre application
from huggingface_hub import InferenceClient
client = InferenceClient(token=hf_token)

6.2 Variables d'Environnement

Contrairement aux secrets, les variables sont visibles publiquement :

# Variables d'environnement publiques
MODEL_NAME = os.environ.get("MODEL_NAME", "gpt2")
MAX_TOKENS = int(os.environ.get("MAX_TOKENS", "500"))

---

7. Options Hardware

# Configurer le hardware via la metadata
# ---
# hardware: t4-small
# ---

---

8. Stockage Persistant

Par defaut, les fichiers crees pendant l'execution sont perdus au redemarrage. Le stockage persistant resout ce probleme :

import os

# Le stockage persistant est monte sur /data
PERSISTENT_DIR = "/data"

# Sauvegarder des resultats
def save_results(data):
    os.makedirs(PERSISTENT_DIR, exist_ok=True)
    with open(f"{PERSISTENT_DIR}/results.json", "w") as f:
        import json
        json.dump(data, f)

# Charger des resultats
def load_results():
    filepath = f"{PERSISTENT_DIR}/results.json"
    if os.path.exists(filepath):
        with open(filepath) as f:
            import json
            return json.load(f)
    return {}

---

9. Domaines Personnalises

Vous pouvez lier un domaine personnalise a votre Space :

1. Allez dans Settings > Custom domain
2. Entrez votre domaine (ex: demo.mon-site.fr)
3. Ajoutez un enregistrement CNAME vers <space-name>.hf.space

---

10. Embedding de Spaces dans vos Sites Web

10.1 iFrame

<iframe
  src="https://AYI-NEDJIMI-mon-space.hf.space"
  frameborder="0"
  width="100%"
  height="800"
  style="border-radius: 12px; border: 1px solid #e5e7eb;"
></iframe>

10.2 Web Component HuggingFace

<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/4.44.1/gradio.js"
></script>

<gradio-app src="https://AYI-NEDJIMI-mon-space.hf.space"></gradio-app>

---

11. API Gradio et Client

Chaque Space Gradio expose automatiquement une API :

11.1 Client Python

from gradio_client import Client

# Se connecter a un Space
client = Client("AYI-NEDJIMI/mon-space")

# Appeler l'API
result = client.predict(
    "Bonjour, analysez ce texte",
    api_name="/predict"
)
print(result)

# Lister les endpoints disponibles
client.view_api()

11.2 Client JavaScript

import { Client } from "@gradio/client";

const client = await Client.connect("AYI-NEDJIMI/mon-space");
const result = await client.predict("/predict", {
  text: "Bonjour, analysez ce texte"
});
console.log(result.data);

11.3 API REST (cURL)

curl -X POST https://AYI-NEDJIMI-mon-space.hf.space/api/predict \
  -H "Content-Type: application/json" \
  -d '{"data": ["Bonjour, analysez ce texte"]}'

---

Conclusion

Les Spaces HuggingFace sont la maniere la plus simple de deployer des applications IA. Avec Gradio, vous pouvez creer des interfaces riches et interactives en quelques lignes de code. Combinez cela avec le hardware GPU, le stockage persistant et l'API automatique, et vous avez une plateforme de deploiement complete.

Explorez notre collection CyberSec AI : CyberSec AI Portfolio

---

Tutoriel redige par AYI-NEDJIMI - Consultant IA & Cybersecurite