L’option d’utiliser Streamlit comme SDK intégré par défaut pour Spaces est obsolète. Si vous souhaitez déployer un Space avec Streamlit, veuillez sélectionner le SDK Docker, puis utiliser le modèle Streamlit.

Espaces Streamlit

Streamlit offre aux utilisateurs la liberté de créer une application web complète avec Python de manière réactive. Votre code est réexécuté à chaque changement d’état de l’application. Streamlit est également idéal pour la visualisation de données et prend en charge plusieurs bibliothèques de graphiques, telles que Bokeh, Plotly et Altair. Lisez cet article de blog sur la création et l’hébergement d’applications Streamlit dans Spaces.

Sélectionner Streamlit comme SDK lors de la création d’un nouvel espace initialise votre espace avec la dernière version de Streamlit en définissant la propriété sdk sur streamlit dans le bloc YAML de votre fichier README.md. Si vous souhaitez modifier la version de Streamlit, vous pouvez éditer la propriété sdk_version.

Pour utiliser Streamlit dans un Space, sélectionnez Streamlit comme SDK lors de la création d'un Space via le formulaire Nouveau Space. Cela crée un dépôt avec un README.md contenant les propriétés suivantes dans le bloc de configuration YAML :

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

Vous pouvez modifier le sdk_version, mais notez que des problèmes peuvent survenir si vous utilisez une version de Streamlit non prise en charge. Toutes les versions de Streamlit ne sont pas supportées, veuillez donc consulter la section de référence pour voir quelles versions sont disponibles.

Pour des informations détaillées sur Streamlit, reportez-vous à la documentation Streamlit.

Seul le port 8501 est autorisé pour les Spaces Streamlit (port par défaut). Par conséquent, si vous fournissez un fichier config.toml pour votre Space, assurez-vous que le port par défaut n'est pas remplacé.

Votre premier espace Streamlit : 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 Streamlit qui servira à démontrer le modèle 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-streamlit.

Créer un nouvel espace Streamlit

Nous commencerons par créer un nouvel espace et en choisissant Streamlit 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 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 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’application Streamlit

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

import streamlit as st
from transformers import pipeline
from PIL import Image

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

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

Ce script Python utilise un 🤗 Transformers pipeline pour charger le modèle julien-c/hotdog-not-hotdog, utilisé par l’interface Streamlit. L’application Streamlit vous demandera de télécharger 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, rendez-vous dans l’onglet App pour voir votre application en action !

Intégrer des Spaces Streamlit dans d'autres pages web

Vous pouvez utiliser la balise HTML <iframe> pour intégrer un Space Streamlit en tant que cadre en ligne sur d’autres pages web. Il suffit d’inclure l’URL de votre Space, qui se termine par le suffixe .hf.space. Pour trouver l’URL de votre Space, vous pouvez utiliser le bouton « Intégrer ce Space » dans les options des Spaces.

Par exemple, la démonstration ci-dessus peut être intégrée dans cette documentation avec la balise suivante :

<iframe
  src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

Veuillez noter que nous avons ajouté ?embed=true à l’URL, ce qui active le mode d’intégration de l’application Streamlit, supprimant certains espaces et le pied de page pour des intégrations plus fines.

Intégrer des Spaces Streamlit avec des iFrames à redimensionnement automatique

Streamlit prend en charge le redimensionnement automatique des iframes depuis la version 1.17.0, de sorte que la taille de l'iframe parente est automatiquement ajustée pour s'adapter au volume de contenu de l'application Streamlit intégrée.

Elle s’appuie sur la bibliothèque iFrame Resizer, pour laquelle vous devez ajouter quelques lignes de code, comme dans l’exemple suivant où

• id est défini sur <iframe />, qui est utilisé pour spécifier la cible du redimensionnement automatique.
• Le iFrame Resizer est chargé via la balise script.
• La fonction iFrameResize() est appelée avec l'identifiant de l'élément iframe cible, afin que sa taille change automatiquement.

Nous pouvons passer des options au premier argument de iFrameResize(). Consultez la documentation pour plus de détails.

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

De plus, vous pouvez consulter notre documentation.