Partager ses démos avec les autres

Maintenant que vous avez construit une démo, vous voudrez probablement la partager à d’autres personnes. Les démos Gradio peuvent être partagées de deux façons : en utilisant un lien de partage temporaire (temporary share link) ou un hébergement permanent (permanent hosting on Spaces).

Nous aborderons ces deux approches sous peu. Mais avant de partager votre démo, vous voudrez peut-être la peaufiner 💅.

Polir votre démo <i> Gradio </i>

Pour ajouter du contenu supplémentaire à votre démo, la classe Interface supporte quelques paramètres optionnels :

• title : vous pouvez donner un titre à votre démo, qui apparaît au-dessus des composants d’entrée et de sortie.
• description : vous pouvez donner une description (en texte, Markdown, ou HTML) pour l’interface, qui apparaît au-dessus des composants d’entrée et de sortie et en dessous du titre.
• article : vous pouvez également écrire un article étendu (en texte, Markdown ou HTML) expliquant l’interface. S’il est fourni, il apparaît sous les composants d’entrée et de sortie.
• theme : vous n’aimez pas les couleurs par défaut ? Définissez le thème pour utiliser une des couleurs suivantes : default, huggingface, grass, peach. Vous pouvez également ajouter le préfixe dark-, par exemple dark-peach pour un thème sombre (ou juste dark pour le thème sombre par défaut).
• examples : pour rendre votre démo beaucoup plus facile à utiliser, vous pouvez fournir quelques exemples d’entrées pour la fonction. Ceux-ci apparaissent sous les composants de l’interface utilisateur et peuvent être utilisés pour remplir l’interface. Ils doivent être fournis sous forme de liste imbriquée, dans laquelle la liste extérieure est constituée d’exemples et chaque liste intérieure est constituée d’une entrée correspondant à chaque composant d’entrée.
• live : si vous voulez que votre modèle soit relancé à chaque fois que l’entrée change, vous pouvez mettre live=True. Ceci est utile pour les modèles rapides (nous verrons un exemple à la fin de cette section). En utilisant les options ci-dessus, nous obtenons une interface plus complète. Exécutez le code ci-dessous pour pouvoir discuter avec Rick et Morty :

title = "Ask Rick a Question"  # "Posez une question à Rick"
description = """
The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
# Le robot a été entraîné à répondre à des questions basées sur les dialogues de Rick et Morty.
# Demandez à Rick ce que vous voulez !
<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
"""

article = "Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of."
# Jetez un coup d'œil au [bot original Rick et Morty](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) sur lequel cette démo est basée.

gr.Interface(
    fn=predict,
    inputs="textbox",
    outputs="text",
    title=title,
    description=description,
    article=article,
    examples=[["What are you doing?"], ["Where should we time travel to?"]],
    # ["Que faites-vous ?"], ["Où devrions-nous voyager dans le temps ?"]
).launch()

En utilisant les options ci-dessus, nous obtenons une interface plus complète. Essayez l’interface ci-dessous :

Partager votre démo avec des liens temporaires

Maintenant que nous avons une démo fonctionnelle de notre modèle d’apprentissage automatique, apprenons à partager facilement un lien vers notre interface. Les interfaces peuvent être facilement partagées publiquement en mettant share=True dans la méthode launch() :

gr.Interface(classify_image, "image", "label").launch(share=True)

Cela génère un lien public et partageable que vous pouvez envoyer à n’importe qui ! Lorsque vous envoyez ce lien, l’utilisateur de l’autre côté peut essayer le modèle dans son navigateur pendant 72 heures au maximum. Le traitement s’effectuant sur votre appareil (tant qu’il reste allumé !), vous n’avez pas à vous soucier de la mise en place de dépendances. Si vous travaillez à partir d’un notebook Google Colab, un lien de partage est toujours créé automatiquement. Il ressemble généralement à quelque chose comme ceci : XXXXX.gradio.app. Bien que le lien soit servi par un lien Gradio, nous ne sommes qu’un proxy pour votre serveur local, et nous ne stockons pas les données envoyées par les interfaces.

Gardez cependant à l’esprit que ces liens sont accessibles au public, ce qui signifie que n’importe qui peut utiliser votre modèle pour la prédiction ! Par conséquent, assurez-vous de ne pas exposer d’informations sensibles à travers les fonctions que vous écrivez, ou de permettre que des changements critiques se produisent sur votre appareil. Si vous définissez share=False (la valeur par défaut), seul un lien local est créé.

Hébergement de votre démo sur <i> Hugging Face Spaces </i>

Un lien de partage que vous pouvez passer à vos collègues est cool, mais comment pouvez-vous héberger de façon permanente votre démo et la faire exister dans son propre « espace » sur internet ?

Hugging Face Spaces fournit l’infrastructure pour héberger de façon permanente votre démo Gradio sur internet et gratuitement ! Spaces vous permet de créer et de pousser vers un dépôt (public ou privé) le code de votre interface Gradio. Il sera placé dans un fichier app.py. Lisez ce tutoriel étape par étape pour commencer ou regardez la vidéo ci-dessous.

✏️ Appliquons ça !

En utilisant ce que nous avons appris dans les sections précédentes, créons la démo de reconnaissance de croquis que nous avons décrit dans la section un de ce chapitre. Ajoutons quelques personnalisations à notre interface et définissons share=True pour créer un lien public que nous pouvons faire circuler.

Nous pouvons charger les étiquettes depuis class_names.txt et charger le modèle Pytorch pré-entraîné depuis pytorch_model.bin. Téléchargez ces fichiers en suivant le lien et en cliquant sur « download » dans le coin supérieur gauche de l’aperçu du fichier. Regardons le code ci-dessous pour voir comment nous utilisons ces fichiers pour charger notre modèle et créer une fonction predict() :

from pathlib import Path
import torch
import gradio as gr
from torch import nn

LABELS = Path("class_names.txt").read_text().splitlines()

model = nn.Sequential(
    nn.Conv2d(1, 32, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(32, 64, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(64, 128, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Flatten(),
    nn.Linear(1152, 256),
    nn.ReLU(),
    nn.Linear(256, len(LABELS)),
)
state_dict = torch.load("pytorch_model.bin", map_location="cpu")
model.load_state_dict(state_dict, strict=False)
model.eval()


def predict(im):
    x = torch.tensor(im, dtype=torch.float32).unsqueeze(0).unsqueeze(0) / 255.0
    with torch.no_grad():
        out = model(x)
    probabilities = torch.nn.functional.softmax(out[0], dim=0)
    values, indices = torch.topk(probabilities, 5)
    return {LABELS[i]: v.item() for i, v in zip(indices, values)}

Maintenant que nous avons une fonction predict(). La prochaine étape est de définir et de lancer notre interface Gradio :

interface = gr.Interface(
    predict,
    inputs="sketchpad",
    outputs="label",
    theme="huggingface",
    title="Sketch Recognition",
    description="Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!",
    # Qui veut jouer au Pictionary ? Dessinez un objet courant comme une pelle ou un ordinateur portable, et l'algorithme le devinera en temps réel !
    article="<p style='text-align: center'>Sketch Recognition | Demo Model</p>",
    live=True,
)
interface.launch(share=True)

Remarquez le paramètre live=True dans Interface, qui signifie que la démo de sketchs fait une prédiction chaque fois que quelqu’un dessine sur le bloc (pas de bouton de soumission !).

De plus, nous avons également défini l’argument share=True dans la méthode launch(). Cela créera un lien public que vous pourrez envoyer à n’importe qui ! Lorsque vous envoyez ce lien, l’utilisateur de l’autre côté peut essayer le modèle de reconnaissance de croquis. Pour réitérer, vous pouvez également héberger le modèle sur Hugging Face Spaces, ce qui nous permet d’intégrer la démo ci-dessus.

La prochaine fois, nous couvrirons d’autres façons dont Gradio peut être utilisé avec l’écosystème d’Hugging Face !