HuggingFace Hub スペース : スペースを埋め込む (翻訳/解説)
翻訳 : (株)クラスキャット セールスインフォメーション
作成日時 : 01/05/2023
* 本ページは、HuggingFace Hub Spaces の以下のドキュメントを翻訳した上で適宜、補足説明したものです：
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
- 人工知能研究開発支援
- 人工知能研修サービス(経営者層向けオンサイト研修)
- テクニカルコンサルティングサービス
- 実証実験(プロトタイプ構築)
- アプリケーションへの実装
- 人工知能研修サービス
- PoC(概念実証)を失敗させないための支援
- お住まいの地域に関係なく Web ブラウザからご参加頂けます。事前登録 が必要ですのでご注意ください。
◆ お問合せ : 本件に関するお問い合わせ先は下記までお願いいたします。
- 株式会社クラスキャット セールス・マーケティング本部 セールス・インフォメーション
- sales-info@classcat.com ; Web: www.classcat.com ; ClassCatJP
HuggingFace Hub スペース : スペースを埋め込む
貴方のスペースが起動して稼働したら、それを web サイトや貴方のブログに埋め込むことを望むかもしれません。スペースの埋め込みや共有は、オーディエンスに彼らの側でのセットアップを要求することなしに、貴方のワークやデモと相互作用することを可能にする素晴らしい方法です。スペースを埋め込むためには、その可視性が public である必要があります。
Direct URL
スペースは、スペースを共有したり web サイトに埋め込むために使用できる、一意な URL が割り当てられます
この URL は “https://<space-subdomain>.hf.space” の形式です。例えば、スペース NimaBoscarino/hotdog-gradio は “https://nimaboscarino-hotdog-gradio.hf.space” の対応する URL を持ちます。サブドメインは一意で、貴方のスペースを移動か名前変更する場合に限り変更されます。
貴方のスペースはこのサブドメインのルートから常にサービス提供されます。
スペース URL を、オプションメニューからそれを直接埋め込む方法のサンプルスニペットとともに、見つけることができます :
IFrames による埋め込み
スペースに対するデフォルトの埋め込み手法は IFrames を使用することです。スペースを埋め込みたい HTML の場所に以下の要素を追加します :
<iframe
src="https://<space-subdomain>.hf.space"
frameborder="0"
width="850"
height="450"
></iframe>
WebComponent を使用した埋め込み
埋め込みたいスペースが Gradio ベースの場合、スペースを埋め込むために Web コンポーネントを使用できます。WebComponents は IFrames より速く、自動的に web ページに合わせて調整しますので、要素の width や height を設定する必要はありません。最初に、以下のスクリプトを HTML に追加することにより、スペースの Gradio バージョンに対応した Gradio JS ライブラリをインポートする必要があります。
それから、スペースを埋め込みたい場所に gradio-app 要素を追加します。
<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>
Check out the Gradio documentation for more details.
以上