Встраивание вашего Space на другой сайт

Когда ваш Space запущен и работает, вы можете захотеть встроить его в веб-сайт или блог. Встраивание или шаринг вашего Space — отличный способ дать вашей аудитории возможность взаимодействовать с вашими работами и демонстрациями без необходимости какой-либо настройки с их стороны. Чтобы встроить Space, его видимость должна быть public или protected. Protected Spaces сохраняют исходный код в частном порядке на Hub, оставаясь при этом общедоступными через свои URL для встраивания (и custom domains, если они настроены). Подробнее см. в разделе Space visibility.

Прямая ссылка

Каждому Space присваивается уникальный URL, который можно использовать для шаринга вашего Space или его встраивания в веб-сайт.

Этот URL имеет вид: "https://<space-subdomain>.hf.space". Например, у Space NimaBoscarino/hotdog-gradio соответствующий URL — "https://nimaboscarino-hotdog-gradio.hf.space". Поддомен уникален и меняется только при перемещении или переименовании вашего Space.

Ваше пространство всегда обслуживается из корня этого поддомена.

Ссылку на Space и примеры кода для его встраивания можно найти в меню параметров:

Встраивание с помощью IFrames

Метод встраивания Space по умолчанию — использование IFrames. Добавьте в HTML в том месте, где вы хотите встроить свой Space, следующий элемент:

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

Например, с использованием пространства NimaBoscarino/hotdog-gradio:

Встраивание с помощью WebComponents

Если Space, который вы хотите встроить, основан на Gradio, вы можете использовать Web Components для встраивания вашего Space. Web Components работают быстрее, чем IFrames, и автоматически подстраиваются под вашу веб-страницу, поэтому вам не нужно настраивать width или height для вашего элемента. Сначала вам нужно импортировать библиотеку Gradio JS, соответствующую версии Gradio в Space, добавив следующий скрипт в ваш HTML.

Затем добавьте элемент gradio-app в то место, где вы хотите встроить свой Space.

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

Подробнее см. в документации Gradio.