将 Space 嵌入到其他网站

当你的 Space 运行稳定之后，你可能希望把它嵌入到自己的网站或博客中。
嵌入或分享 Space 是一种很好的方式，可以让你的受众无需任何本地配置，就能直接体验你的工作成果和 Demo。
要嵌入某个 Space，该 Space 必须是公开可见的。

通过直接 URL

每个 Space 都会分配一个唯一的 URL，你可以用它来分享 Space，或者嵌入到网页中。

这个 URL 的形式为："https://<space-subdomain>.hf.space"。例如，Space NimaBoscarino/hotdog-gradio 对应的 URL 是 "https://nimaboscarino-hotdog-gradio.hf.space"。这个子域名是唯一的，只有在你移动或重命名 Space 时才会发生变化。

你的 Space 始终从这个子域名的根路径提供服务。

你可以在 Space 的选项菜单中找到它的 URL，以及如何嵌入的示例代码片段：

使用 IFrame 嵌入

Space 的默认嵌入方式是使用 IFrame。只需要在你希望嵌入 Space 的 HTML 位置加入如下元素：

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

例如，使用 NimaBoscarino/hotdog-gradio 这个 Space 时，可以这样写：

使用 Web Components 嵌入

如果你要嵌入的 Space 是基于 Gradio 构建的，你可以使用 Web Components 的方式来嵌入 Space。
Web Components 相比 IFrame 更加轻量，并且会自动适配你的网页，你无需手动设置元素的 width 或 height。

首先，你需要在 HTML 中加入对应的 <script>，引入和该 Space 所用版本匹配的 Gradio JS 库：

然后，在你希望嵌入 Space 的位置添加一个 gradio-app 元素：

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

更多细节可以参考 Gradio 文档。