靜態 HTML Spaces

除了使用 Streamlit 或 Gradio，Spaces 也支援為您的應用程式提供自訂 HTML。請在 Spaces README.md 檔案頂部的 YAML 區塊中設定 sdk: static。接著，您就可以將 HTML 程式碼放置於 index.html 檔案中。

以下是一些使用自訂 HTML 的 Spaces 範例：

• Smarter NPC：在 Spaces 中透過 iframe 顯示 PlayCanvas 專案。
• Huggingfab：在 Spaces 中顯示 Sketchfab 模型。
• Diffuse the rest：繪圖並進行擴散運算（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 上更新