HuggingFace Hub スペース : Streamlit スペース

by

HuggingFace Hub スペース : Streamlit スペース (翻訳/解説)

翻訳 : (株)クラスキャット セールスインフォメーション
作成日時 : 01/05/2023

* 本ページは、HuggingFace Hub Spaces の以下のドキュメントを翻訳した上で適宜、補足説明したものです：

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

クラスキャット 人工知能 研究開発支援サービス

◆ クラスキャット は人工知能・テレワークに関する各種サービスを提供しています。お気軽にご相談ください :

◆ 人工知能とビジネスをテーマに WEB セミナーを定期的に開催しています。スケジュール。
  • お住まいの地域に関係なく Web ブラウザからご参加頂けます。事前登録 が必要ですのでご注意ください。

◆ お問合せ : 本件に関するお問い合わせ先は下記までお願いいたします。

  • 株式会社クラスキャット セールス・マーケティング本部 セールス・インフォメーション
  • sales-info@classcat.com  ;  Web: www.classcat.com  ;   ClassCatJP

 

 

HuggingFace Hub スペース : Streamlit スペース

Streamlit はユーザに Python でフル機能の web アプリケーションをリアクティブに構築する自由を与えます。アプリケーションの状態が変化するたびに貴方のコードが再実行されます。Streamlit はまたデータ可視化のためにも素晴らしく、Bokeh, Plotly と Altair のような幾つかのチャート・ライブラリをサポートします。Streamlit アプリケーションをスペースで構築してホストすることについてはこの ブログ記事 を読んでください。

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

スペースで Streamlit を使用するには、New Space フォーム を通してスペースを作成するとき SDK として Streamlit を選択します。これは YAML 設定ブロックで次のプロパティを含む README.md を含むレポジトリを作成します :

sdk: streamlit
sdk_version: 1.10.0 # The latest supported version

sdk_version を編集できますが、サポートされていない Streamlit バージョンを使用するとき問題が発生する場合があることに注意してください。すべての Streamlit バージョンがサポートされているわけではないので、どのバージョンが利用可能かを確認するには リファレンス・セクション を参照してください。

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

 

初めての Streamlit スペース: ホットドッグ分類器

以下のセクションでは、スペースの作成、その設定、そして貴方のコードをそれに配備する基本を学習します。私たちは Streamlit で ホットドッグ分類器 スペースを作成します、これは与えられた写真がホットドッグ🌭 を含むかを検出可能な julien-c/hotdog-not-hotdog モデルを実演するために使用されます。

NimaBoscarino/hotdog-streamlit にホストされている、これの完成版を見つけることができます。

 

新しい Streamlit スペースの作成

まったく 新しいスペースを作成 して SDK として Streamlit を選択することから始めます。Hugging Face スペースは Git レポジトリです、つまりコミットをプッシュすることにより貴方のスペースで徐々に (そして共同的に) 作業できます。続ける前に、Getting Started with レポジトリ ガイドを見てファイルを作成して編集できる方法を学習してください。

 

依存関係の追加

ホットドッグ分類器 について、モデルを使用するために 🤗 Transformers パイプライン を使用していきますので、2, 3 の依存関係をインストールすることから始める必要があります。これはレポジトリに requirements.txt ファイルを作成して、次の依存関係をそれに追加することで行なうことができます :

transformers
torch

The Spaces runtime will handle installing the dependencies!

 

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 パイプライン を使用します。Streamlit アプリケーションは画像をアップロードすることを想定し、それをホットドッグであるか否かを分類します。コードを app.py ファイルにセーブしたら、App タブにアクセスしてアプリケーションを実際に見ることができます！

 

他の web ページに Streamlit スペースを埋め込む

Streamlit スペースを埋め込むために他の web ページでインライン・フレームとして HTML <iframe> タグを使用できます。単純にスペースの URL を含み、.hf.space サフィックスで終わります。貴方のスペースの URL を見つけるには、スペースのオプションの “Embed this Space” ボタンを使用できます。

例えば、上のデモは次のタグでこれらの docs に埋め込むことができます :

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

 

以上