# Streamlit Spaces

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

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

Space で Streamlit を使用するには、[**New Space**フォーム](https://huggingface.co/new-space)から Space を作成する際に、SDK として**Streamlit**を選択します。これにより、YAML 設定ブロックに次のプロパティを含む`README.md`が作成されます。

```yaml
sdk: streamlit
sdk_version: 1.25.0 # The latest supported version
```

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

Streamlitの詳細については、[Streamlitのドキュメント](https://docs.streamlit.io/)を参照してください。

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

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

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

完成したバージョンは、[NimaBoscarino/hotdog-streamlit](https://huggingface.co/spaces/NimaBoscarino/hotdog-streamlit) でホストされています。

## 新しいStreamlit Spaceを作成する

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

## 依存関係を追加します

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

```
transformers
torch
```

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

## Streamlit アプリの作成

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

```python
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](https://huggingface.co/julien-c/hotdog-not-hotdog)モデルを読み込むために[🤗 Transformers pipeline](https://huggingface.co/docs/transformers/pipeline_tutorial)を使用しています。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>
```

<iframe src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true" frameborder="0" height="364" title="Streamlit app" class="container p-0 grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
>

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

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

Streamlit は [1.17.0](https://docs.streamlit.io/library/changelog#version-1170) 以降、埋め込まれた Streamlit アプリケーションのコンテンツ量に合わせて親 iframe のサイズが自動的に調整されるよう、iframe の自動リサイズをサポートしています。

[`iFrame Resizer`](https://github.com/davidjbradshaw/iframe-resizer) ライブラリに依存しており、次の例のように数行のコードを追加する必要があります。

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

`iFrameResize()`の第1引数にオプションを渡すことができます。詳細は[ドキュメント](https://github.com/davidjbradshaw/iframe-resizer/blob/v4/docs/parent_page/options.md)を参照してください。

```html
<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>
```

また、[ドキュメント](./spaces-embed)もご参照ください。