在其他網站中嵌入您的 Space

Space 執行後，您可能希望將其嵌入到網站或部落格中。嵌入或共享您的 Space 是讓您的受眾與您的作品和演示互動的好方法，而無需他們進行任何設定。要嵌入 Space，其可見性需要是公共的。

直接 URL

每個 Space 都分配有一個唯一的 URL，您可以使用該 URL 共享您的 Space 或將其嵌入到網站中。

此 URL 的形式為："https://<space-subdomain>.hf.space"。例如，Space NimaBoscarino/hotdog-gradio 對應的 URL 是 "https://nimaboscarino-hotdog-gradio.hf.space"。子域名是唯一的，僅當您移動或重新命名 Space 時才會更改。

您的 Space 始終從該子域名的根目錄提供服務。

您可以從選項選單中直接找到 Space URL 以及如何嵌入它的示例程式碼片段

使用 IFrames 嵌入

Space 的預設嵌入方法是使用 IFrames。在您希望嵌入 Space 的 HTML 位置新增以下元素

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

例如，使用 NimaBoscarino/hotdog-gradio Space

使用 WebComponents 嵌入

如果您希望嵌入的 Space 是基於 Gradio 的，您可以使用 Web Components 來嵌入您的 Space。WebComponents 比 IFrames 更快，並且會自動適應您的網頁，因此您無需為您的元素配置 width 或 height。首先，您需要透過將以下指令碼新增到您的 HTML 來匯入與 Space 中 Gradio 版本對應的 Gradio JS 庫。

然後，在您希望嵌入 Space 的位置新增一個 gradio-app 元素。

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

有關更多詳細資訊，請檢視 Gradio 文件。