靜態 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 上更新