# Gradio Spaces

**Gradio** fournit une interface simple et intuitive pour exécuter un modèle à partir d'une liste d'entrées et afficher les sorties sous forme d'images, d'audio, d'objets 3D, etc. Gradio dispose désormais même d'un [composant de sortie de graphique](https://gradio.app/docs/#o_plot) pour créer des visualisations de données avec Matplotlib, Bokeh et Plotly ! Pour plus de détails, consultez le guide [Prise en main](https://gradio.app/getting_started/) de l'équipe Gradio.

Sélectionner **Gradio** comme SDK lors de la [création d'un nouvel espace](https://huggingface.co/new-space) initialise votre espace avec la dernière version de Gradio en définissant la propriété `sdk` sur `gradio` dans le bloc YAML de votre fichier `README.md`. Si vous souhaitez changer la version de Gradio, vous pouvez modifier la propriété `sdk_version`.

Consultez la [documentation de Gradio](https://gradio.app/docs/) pour en découvrir toutes les fonctionnalités et parcourez les [Guides Gradio](https://gradio.app/guides/) pour des tutoriels pratiques qui vous aideront à démarrer !

## Votre premier Space Gradio : classifieur de hot-dogs

Dans les sections suivantes, vous apprendrez les bases de la création d'un Space, de sa configuration et du déploiement de votre code dessus. Nous allons créer un Space **Hot Dog Classifier** avec Gradio qui servira à démontrer le modèle [julien-c/hotdog-not-hotdog](https://huggingface.co/julien-c/hotdog-not-hotdog), capable de détecter si une image donnée contient un hot dog 🌭

Vous pouvez trouver une version complétée de ce projet hébergée sur [NimaBoscarino/hotdog-gradio](https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio).

## Créer un nouvel espace Gradio

Nous commencerons par [créer un nouvel espace](https://huggingface.co/new-space) et en choisissant **Gradio** comme SDK. Les espaces Hugging Face sont des dépôts Git, ce qui signifie que vous pouvez travailler sur votre espace de manière incrémentale (et collaborative) en poussant des commits. Consultez le guide [Getting Started with Repositories](./repositories-getting-started) pour apprendre à créer et modifier des fichiers avant de continuer.

## Ajouter les dépendances

Pour le **Hot Dog Classifier**, nous utiliserons un [🤗 Transformers pipeline](https://huggingface.co/docs/transformers/pipeline_tutorial) pour exploiter le modèle, il nous faut donc commencer par installer quelques dépendances. Cela peut se faire en créant un fichier **requirements.txt** dans notre dépôt et en y ajoutant les dépendances suivantes :

```
transformers
torch
```

Le runtime Spaces s’occupera d’installer les dépendances !

## Créer l'interface Gradio

Pour créer l'application Gradio, créez un nouveau fichier dans le dépôt nommé **app.py**, et ajoutez le code suivant :

```python
import gradio as gr
from transformers import pipeline

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

def predict(input_img):
    predictions = pipeline(input_img)
    return input_img, {p["label"]: p["score"] for p in predictions} 

gradio_app = gr.Interface(
    predict,
    inputs=gr.Image(label="Select hot dog candidate", sources=['upload', 'webcam'], type="pil"),
    outputs=[gr.Image(label="Processed Image"), gr.Label(label="Result", num_top_classes=2)],
    title="Hot Dog? Or Not?",
)

if __name__ == "__main__":
    gradio_app.launch()
```

Ce script Python utilise un [🤗 Transformers pipeline](https://huggingface.co/docs/transformers/pipeline_tutorial) pour charger le modèle [julien-c/hotdog-not-hotdog](https://huggingface.co/julien-c/hotdog-not-hotdog), utilisé par l'interface Gradio. L'application Gradio s'attend à ce que vous téléversiez une image, qu'elle classera ensuite en *hot dog* ou *not hot dog*. Une fois que vous avez enregistré le code dans le fichier **app.py**, visitez l'onglet **App** pour voir votre application en action !

## Intégrer des Gradio Spaces sur d'autres pages web

Vous pouvez intégrer un Space Gradio sur d'autres pages web en utilisant soit des Web Components, soit la balise HTML `<iframe>`. Consultez [notre documentation](./spaces-embed) ou la [documentation de Gradio](https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces) pour plus de détails.

