Incorpore seu Space em outro site

Quando seu Space estiver no ar e funcionando, você pode querer incorporá-lo em um site ou em seu blog. Incorporar ou compartilhar seu Space é uma ótima maneira de permitir que seu público interaja com seu trabalho e demonstrações sem exigir nenhuma configuração do lado deles. Para incorporar um Space, sua visibilidade precisa ser pública ou protegida. Spaces protegidos mantêm seu código-fonte privado no Hub, mas permanecem acessíveis publicamente por meio de suas URLs de incorporação (e domínios personalizados, quando configurados). Consulte Visibilidade do Space para mais detalhes.

URL direta

Um Space recebe uma URL exclusiva que você pode usar para compartilhar seu Space ou incorporá-lo em um site.

Esta URL tem o formato: "https://<space-subdomain>.hf.space". Por exemplo, o Space NimaBoscarino/hotdog-gradio tem a URL correspondente "https://nimaboscarino-hotdog-gradio.hf.space". O subdomínio é único e só muda se você mover ou renomear seu Space.

Seu espaço é sempre servido a partir da raiz deste subdomínio.

Você pode encontrar a URL do Space, juntamente com exemplos de trechos de código para incorporá-lo, diretamente no menu de opções:

Incorporação com IFrames

O método de incorporação padrão para um Space é o uso de IFrames. Adicione no local do HTML onde você deseja incorporar seu Space o seguinte elemento:

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

Por exemplo, usando o Space NimaBoscarino/hotdog-gradio:

Embedding com WebComponents

Se o Space que você deseja incorporar for baseado em Gradio, você pode usar Web Components para incorporar seu Space. WebComponents são mais rápidos que IFrames e se ajustam automaticamente à sua página da web, de modo que você não precisa configurar width ou height para seu elemento. Primeiro, você precisa importar a biblioteca Gradio JS que corresponde à versão do Gradio no Space adicionando o seguinte script ao seu HTML.

Em seguida, adicione um elemento gradio-app onde você deseja incorporar seu Space.

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

Confira a documentação do Gradio para mais detalhes.