静态 HTML Spaces

Spaces 也支持为您的应用使用自定义 HTML，而不是使用 Streamlit 或 Gradio。在 Spaces **README.md** 文件顶部的 `YAML` 块中设置 `sdk: static`。然后，您可以将 HTML 代码放置在 **index.html** 文件中。

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

• Smarter NPC：在 Spaces 中使用 iframe 显示 PlayCanvas 项目。
• Huggingfab：在 Spaces 中显示 Sketchfab 模型。
• Diffuse the rest：绘制并扩散其余部分

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

静态 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

示例 Spaces

• Svelte 应用
• React 应用

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

Space 变量

自定义环境变量可以传递给您的 Space。如果您的 Space 启用了 OAuth，OAuth 信息（如客户端 ID 和作用域）也作为环境变量可用。

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

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

• 静态变量

< > 在 GitHub 上更新