静态 HTML Spaces

Spaces 还支持使用自定义 HTML 来构建应用，而无需使用 Streamlit 或 Gradio。请在 Spaces 的 README.md 文件顶部的 YAML 块中设置 sdk: static。然后，您可以将 HTML 代码放入 index.html 文件中。

静态 Spaces 对所有人免费：它们直接提供服务，无需在计算资源上运行，因此与 Gradio 和 Docker Spaces 不同，创建它们无需付费计划。

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

• 更智能的 NPC：在 Spaces 中通过 iframe 展示 PlayCanvas 项目。
• Huggingfab：在 Spaces 中显示 Sketchfab 模型。
• 扩散其余部分：绘制并扩散其余部分

在提供服务之前添加构建步骤

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

示例空间：

• Svelte 应用
• React 应用

在底层，它会启动构建，并将生成的文件存储在一个特殊的refs/convert/build引用中。

空间变量

可以将自定义的 环境变量 传递给你的 Space。如果你已为 Space 启用 OAuth，那么 OAuth 信息（例如客户端 ID 和 scope）也可作为环境变量使用。

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

下面是一个使用自定义环境变量并启用 oauth 的 Space 示例，并在 HTML 中显示这些变量：

• 静态变量

Update on GitHub