Gradio Spaces

Gradioは、入力リストからモデルを実行し、出力を画像、オーディオ、3Dオブジェクトなどの形式で表示するための、簡単で直感的なインターフェースを提供します。Gradioには現在、Matplotlib、Bokeh、Plotlyを使用してデータ可視化を作成するためのPlot output コンポーネントも用意されています。詳細については、GradioチームによるGetting startedガイドをご覧ください。

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

Gradioのすべての機能について詳しく知るには、Gradioのドキュメントをご覧ください。また、Gradio Guidesには、はじめるのに役立つ便利なチュートリアルが掲載されています。

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

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

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

新しいGradio Spaceを作成する

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

依存関係を追加します

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

transformers
torch

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

Gradioインターフェースを作成します

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

import gradio as gr
from transformers import pipeline

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

def predict(input_img):
    predictions = pipeline(input_img)
    return input_img, {p["label"]: p["score"] for p in predictions} 

gradio_app = gr.Interface(
    predict,
    inputs=gr.Image(label="Select hot dog candidate", sources=['upload', 'webcam'], type="pil"),
    outputs=[gr.Image(label="Processed Image"), gr.Label(label="Result", num_top_classes=2)],
    title="Hot Dog? Or Not?",
)

if __name__ == "__main__":
    gradio_app.launch()

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

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

Web Components または HTML の <iframe> タグを使用して、他のウェブページに Gradio Space を埋め込むことができます。詳細については、ドキュメントまたはGradio のドキュメントを参照してください。