Spacesの組み込みSDKとしてStreamlitを使用するオプションは非推奨になりました。 StreamlitでSpaceをデプロイする場合は、Docker SDKを選択し、Streamlitテンプレートを使用してください。

Streamlit Spaces

Streamlitは、リアクティブなアプローチで、Pythonを使用して機能豊富なWebアプリを構築する自由度をユーザーに提供します。アプリの状態が変更されるたびに、コードが再実行されます。Streamlitはデータ可視化にも優れており、Bokeh、Plotly、Altairなどの複数のチャートライブラリをサポートしています。SpacesでStreamlitアプリを構築およびホスティングする方法については、このブログ記事をご覧ください。

新しい Space を作成する際に SDK としてStreamlitを選択すると、README.mdファイルの YAML ブロック内のsdkプロパティをstreamlitに設定することで、Space が最新バージョンの Streamlit で初期化されます。Streamlit のバージョンを変更したい場合は、sdk_versionプロパティを編集できます。

Space で Streamlit を使用するには、New Spaceフォームから Space を作成する際に、SDK としてStreamlitを選択します。これにより、YAML 設定ブロックに次のプロパティを含むREADME.mdが作成されます。

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

sdk_version を編集できますが、サポートされていない Streamlit バージョンを使用すると問題が発生する可能性があることに注意してください。すべての Streamlit バージョンがサポートされているわけではなく、利用可能なバージョンについては参照セクションを参照してください。

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

Streamlit Spaces では、ポート 8501 のみ（デフォルトポート）が許可されています。そのため、Space に config.toml ファイルを提供する場合は、デフォルトポートが上書きされないようにしてください。

最初のStreamlit Space: ホットドッグ分類器

以下のセクションでは、Spaceの作成、設定、およびコードのデプロイに関する基礎を学びます。Streamlitを使用して、画像にホットドッグが含まれているかどうかを検出できるjulien-c/hotdog-not-hotdogモデルのデモに使用する、Hot Dog ClassifierというSpaceを作成します 🌭

完成したバージョンは、NimaBoscarino/hotdog-streamlit でホストされています。

新しいStreamlit Spaceを作成する

まず、新しいSpaceを作成し、SDKとしてStreamlitを選択します。Hugging Face SpacesはGitリポジトリであるため、コミットをプッシュすることで、Spaceを段階的（かつ協働的）に作業できます。続行する前に、ファイルの作成と編集の方法については、リポジトリの入門ガイドをご覧ください。

依存関係を追加します

Hot Dog Classifierでは、モデルを使用するために🤗 Transformers pipelineを使用します。そのため、まずいくつかの依存関係をインストールする必要があります。これは、リポジトリにrequirements.txtファイルを作成し、そこに以下の依存関係を追加することで実行できます。

transformers
torch

Spacesランタイムが依存関係のインストールを処理します!

Streamlit アプリの作成

Streamlit アプリを作成するには、リポジトリにapp.pyという名前の新しいファイルを作成し、以下のコードを追加します。

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

このPythonスクリプトは、Streamlitインターフェースで使用されるjulien-c/hotdog-not-hotdogモデルを読み込むために🤗 Transformers pipelineを使用しています。Streamlitアプリでは画像のアップロードを期待しており、アップロードされた画像はhot dogまたはnot hot dogとして分類されます。コードをapp.pyファイルに保存したら、Appタブにアクセスしてアプリの動作を確認してください。

他のウェブページにStreamlit Spacesを埋め込む

HTMLの<iframe>タグを使用して、Streamlit Spaceをインラインフレームとして他のウェブページに埋め込むことができます。SpaceのURLを、.hf.spaceサフィックスで終わるようにして含めるだけです。SpaceのURLを確認するには、Spacesのオプションにある「Embed this Space」ボタンを使用できます。

例えば、上記のデモは以下のタグを使用してこのドキュメントに埋め込むことができます。

<iframe
  src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

URLに?embed=trueを追加した点にご注意ください。これによりStreamlitアプリの埋め込みモードが有効になり、一部のスペーサーとフッターが削除されて、スリムな埋め込み表示になります。

Streamlit Spacesを自動リサイズIFrameで埋め込む

Streamlit は 1.17.0 以降、埋め込まれた Streamlit アプリケーションのコンテンツ量に合わせて親 iframe のサイズが自動的に調整されるよう、iframe の自動リサイズをサポートしています。

iFrame Resizer ライブラリに依存しており、次の例のように数行のコードを追加する必要があります。

• idは、自動リサイズの対象を指定するために使用される<iframe />に設定されます。
• iFrame Resizerはscriptタグを介して読み込まれます。
• iFrameResize() 関数は、ターゲットの iframe 要素の ID を引数として呼び出され、そのサイズが自動的に変更されるようにします。

iFrameResize()の第1引数にオプションを渡すことができます。詳細はドキュメントを参照してください。

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

また、ドキュメントもご参照ください。