Hub documentation
静的 HTML Spaces
静的 HTML Spaces
Spacesでは、StreamlitやGradioの代わりに、アプリ用のカスタムHTMLをホストすることもできます。README.mdファイルの先頭にあるYAMLブロック内にsdk: staticを設定してください。その後、HTMLコードをindex.htmlファイルに配置できます。
Static Spacesはすべてのユーザーに無料です。計算リソースを消費せずに直接配信されるため、GradioやDockerのSpacesとは異なり、作成に有料プランは必要ありません。
カスタムHTMLを使用したSpacesの例をいくつか示します。
- Smarter 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 buildapp_file: dist/index.html
スペースの例:
内部では、ビルドを開始し、生成されたファイルをrefs/convert/buildという特別なrefに保存します。
スペース変数
カスタムの環境変数をSpaceに渡すことができます。SpaceでOAuthを有効化している場合、クライアントIDやスコープなどのOAuth情報も環境変数として利用できます。
これらの変数を JavaScript で使用するには、window.huggingface.variables オブジェクトを使用できます。例えば、OAUTH_CLIENT_ID 変数にアクセスするには、window.huggingface.variables.OAUTH_CLIENT_ID を使用できます。
カスタム環境変数とoauthを有効にして、変数をHTMLに表示するSpaceの例を以下に示します。
Update on GitHub