Spaceを別のウェブサイトに埋め込む

Spaceが正常に動作するようになったら、ウェブサイトやブログに埋め込みたい場合があるでしょう。 Spaceを埋め込む、または共有することは、視聴者がセットアップなしであなたの作品やデモと対話できるようにする優れた方法です。 Spaceを埋め込むには、その表示設定がpublicまたはprotectedである必要があります。Protected Spaceは、Hub上でソースコードを非公開に保ちつつ、埋め込みURL（設定されている場合はカスタムドメイン）を通じて公開アクセス可能になります。詳細はSpace visibilityを参照してください。

直接URL

Spaceには、そのSpaceを共有したりウェブサイトに埋め込んだりするために使用できる一意のURLが割り当てられます。

このURLは、"https://<space-subdomain>.hf.space" という形式です。例えば、Space NimaBoscarino/hotdog-gradio に対応するURLは "https://huggingface.co/proxy/nimaboscarino-hotdog-gradio.hf.space" です。サブドメインは一意であり、Spaceを移動または名前を変更した場合にのみ変更されます。

スペースは常にこのサブドメインのルートから配信されます。

オプションメニューから、SpaceのURLと、それを埋め込むためのサンプルスニペットを直接確認できます:

IFrames による埋め込み

Spaceのデフォルトの埋め込み方法はIFramesを使用することです。Spaceを埋め込みたいHTMLの位置に、以下の要素を追加してください:

<iframe
    src="https://<space-subdomain>.hf.space"
    frameborder="0"
    width="850"
    height="450"
></iframe>

例えば、NimaBoscarino/hotdog-gradio Space を使用する場合:

WebComponents による埋め込み

埋め込みたい Space が Gradio ベースの場合、Web Components を使用して Space を埋め込むことができます。WebComponents は IFrames よりも高速で、Web ページに自動的に調整されるため、要素の width や height を設定する必要はありません。 まず、Space の Gradio バージョンに対応する Gradio JS ライブラリを、HTML に以下のスクリプトを追加してインポートする必要があります。

次に、Space を埋め込みたい場所に gradio-app 要素を追加します。

<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>

詳細については、Gradioのドキュメントを参照してください。