Hugging Face's logo
加入 Hugging Face 社区

并获得增强的文档体验

开始使用

在其他网站中嵌入您的 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 更快,并且会自动适应您的网页,因此您无需为您的元素配置 widthheight。首先,您需要通过将以下脚本添加到您的 HTML 来导入与 Space 中 Gradio 版本对应的 Gradio JS 库。

然后,在您希望嵌入 Space 的位置添加一个 gradio-app 元素。

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

有关更多详细信息,请查看 Gradio 文档

< > 在 GitHub 上更新