Skip to main content

静态 HTML Spaces

Spaces 也支持使用自定义 HTML 来构建应用，而不必使用 Streamlit 或 Gradio。你可以在 Spaces 仓库 README.md 顶部的 YAML 区块中设置 sdk: static，然后将 HTML 代码放在 index.html 文件中。

以下是一些使用自定义 HTML 的 Space 示例：

  • Smarter NPC：通过 iframe 在 Space 中展示 PlayCanvas 项目。
  • Huggingfab：在 Space 中展示 Sketchfab 模型。
  • Diffuse the rest：支持绘制并“补完”图像剩余部分。

在对外提供静态资源之前添加自定义构建步骤​

Static Spaces 支持在对外提供静态资源之前添加自定义构建步骤。这对于需要构建流程的前端框架（如 React、Svelte、Vue）非常有用。每当你的 Space 更新时，构建命令都会自动执行。

你可以在 Spaces 仓库 README.md 顶部的 YAML 区块中同时添加 app_build_command 和 app_file：

例如：

  • app_build_command: npm run build
  • app_file: dist/index.html

示例 Space：

在底层，这一机制会触发一次构建，并将生成的文件存储在一个特殊的 refs/convert/build 引用中。

Space 变量​

你可以向 Space 注入自定义环境变量。如果你为 Space 启用了 OAuth，OAuth 信息（如 client ID 和 scope）也会以环境变量的形式提供。

在 JavaScript 中，可以通过 window.huggingface.variables 对象访问这些变量。例如，要访问 OAUTH_CLIENT_ID 变量，可以使用 window.huggingface.variables.OAUTH_CLIENT_ID。

这里有一个启用自定义环境变量和 OAuth、并在 HTML 中展示这些变量的 Space 示例：

Last updated on