Intégrer votre Space dans un autre site web

Une fois votre Space en ligne et opérationnel, vous souhaiterez peut-être l’intégrer dans un site web ou un blog. Intégrer ou partager votre Space est un excellent moyen de permettre à votre audience d’interagir avec votre travail et vos démonstrations sans qu’aucune configuration ne soit nécessaire de leur côté. Pour intégrer un Space, sa visibilité doit être publique ou protégée. Les Spaces protégés gardent leur code source privé sur le Hub tout en restant accessibles publiquement via leurs URL d’intégration (et les domaines personnalisés, lorsqu’ils sont configurés). Consultez visibilité des Spaces pour plus de détails.

URL directe

Un Space se voit attribuer une URL unique que vous pouvez utiliser pour partager votre Space ou l’intégrer dans un site web.

Cette URL est de la forme : "https://<space-subdomain>.hf.space". Par exemple, le Space NimaBoscarino/hotdog-gradio a l’URL correspondante "https://nimaboscarino-hotdog-gradio.hf.space". Le sous-domaine est unique et ne change que si vous déplacez ou renommez votre Space.

Votre espace est toujours servi à partir de la racine de ce sous-domaine.

Vous pouvez trouver l’URL de l’espace ainsi que des extraits d’exemples montrant comment l’intégrer directement depuis le menu des options :

Intégration avec des iFrames

La méthode d'intégration par défaut pour un Space est l'utilisation d'IFrames. Ajoutez l'élément suivant à l'emplacement HTML où vous souhaitez intégrer votre Space :

<iframe
    src="https://<space-subdomain>.hf.space"
    frameborder="0"
    width="850"
    height="450"
></iframe>

Par exemple, en utilisant l'Espace NimaBoscarino/hotdog-gradio :

Intégration avec WebComponents

Si l’Space que vous souhaitez intégrer est basé sur Gradio, vous pouvez utiliser les Web Components pour intégrer votre Space. Les Web Components sont plus rapides que les IFrames et s’adaptent automatiquement à votre page web, vous n’avez donc pas besoin de configurer width ou height pour votre élément. Tout d’abord, vous devez importer la bibliothèque JS Gradio correspondant à la version de Gradio du Space en ajoutant le script suivant à votre HTML.

Ensuite, ajoutez un élément gradio-app à l'endroit où vous souhaitez intégrer votre Space.

<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>

Consultez la documentation de Gradio pour plus de détails.