GradioのComponents（コンポーネント）の基本と使い方: webアプリのパーツを作ろう

某

どーも！某 (@7254bou)です！

Gradioはwebアプリを簡単に作れるpythonライブラリです。基本的な使い方を知りたい方は、下記をご参照ください。

2023-01-21Google Colab上でwebアプリが作れるGradioの使い方

今回はそんなGradioの基本的な機能であるコンポーネントについて詳しくまとめます。

Components（コンポーネント）とは

Components（コンポーネント）は、Gradioのコア機能の1つでwebアプリのパーツを簡単に作るためのものです。Componentsはwebアプリのパーツとしてコンポーネントを定義します。

少しわかりにくいですが、ここではComponentsはGradioのクラスであり、コンポーネントはwebアプリのパーツ（いわゆるUI）を表します。Componentsクラスを用いて実際のwebアプリのパーツ（コンポーネント）を作成するイメージですね。

入力コンポーネントと出力コンポーネント

Componentsは、「入力」と「出力」のどちらに対しても使用することができます。

「入力」コンポーネントは、ユーザーがwebアプリに入力することができるもので、「出力」コンポーネントはアプリケーションがユーザーに表示するものです。

3つの入力コンポーネント（テキストボックス、数値、画像）と2つの出力コンポーネント（数値、ギャラリー）の例を考えてみましょう。以下は、入力コンポーネントが関数に何を送り、出力コンポーネントが関数から何を要求するかの図（Gradio Docsより引用）です。

図を見ると、入力コンポーネントに入れられた値からgradioを介して、それぞれの形式（str, int, numpy.array)で関数の引数として渡されています。その後関数の返数をgradioがそれぞれの形式（float, List[str]）で受け取って出力コンポーネントに表示しています。

Gradioで作るのはシンプルなwebアプリなので、結構単純な仕組みですね。

コンポーネントとイベント

コンポーネントには、それぞれ対応するイベントがあります。イベントは、ユーザーが何らかの行動を起こすことで引き起こされるメソッドです。例えばクリックされたり、値が変更されることなどがイベントになります。何かしらのアプリを作成したことがある方は、イベントトリガーが使えるといえばわかりやすいと思います。

イベントは全部で10種類ありますが、全てのコンポーネントが10種類のイベントを使えるわけではなく、対応しているもののみです。どのコンポーネントがイベントに対応しているかは、それぞれのコンポーネントを参照してください。

コンポーネントクラスとショートカット文字列

Gradioのコンポーネントは、ショートカット文字列を使うとより簡単に使用できます。ショートカット文字列はデフォルト設定で簡潔にコンポーネントを記述できる文字列のことです。デフォルトの設定で問題ない場合は、ショートカット文字列を使って爆速でアプリを開発しましょう。

コンポーネントの細かい設定をしたい場合は、コンポーネントクラス（gr.Textbox()など)を使ってパラメータを指定することでコンポーネントの設定を調整できます。

例: ショートカット文字列（”text”）を使って、入出力のテキストボックスを作成する

import gradio as gr
def greet(name): return "Hello " + name + "!"
app = gr.Interface( fn=greet, inputs="text", outputs="text"
)
app.launch()

上記のコードを実行すると下記の画像のようになります。

コンポーネントの種類

ここではGradioで使えるコンポーネントの基本的な情報をまとめます。お試しで軽く使う場合は、inputsあるいはoutputsにショートカットを指定すると簡単に使えます。

Textbox

ユーザが文字列を入力したり、文字列出力を表示するためのテキストエリアを作成します。

Textboxの詳しい使い方については下記記事をご覧ください。

2023-02-11Gradioで文字列が使用できるTextboxコンポーネントの使い方

Number

ユーザーが数値を入力したり、数値を出力したりするための数値フィールドを作成します。

Slider

最小値から最大値まで、ステップサイズ step のスライダーを作成します。

Sliderの詳しい使い方については下記記事をご覧ください。

2023-01-21Gradioでスライダーが作れるSliderの使い方

Checkbox

TrueまたはFalseに設定可能なチェックボックスを作成します。

CheckboxGroup

チェックボックスのグループを作成し、そのサブセットをチェックできるようにします。

Radio

1つだけ選択可能なラジオボタンのセットを作成します。

Dropdown

項目を選択するためのドロップダウンを作成します。

Image

画像のアップロード/描画（入力）または画像の表示（出力）に使用できるコンポーネントを作成します。

Video

動画のアップロード/録画（入力として）または動画の表示（出力として）に使用できるコンポーネントを作成します。ブラウザで動画を再生するには、互換性のあるコンテナとコーデックの組み合わせが必要です。許可される組み合わせは、.mp4 と h264 コーデック、.ogg と theora コーデック、そして .webm と vp9 コーデックです。出力する動画がブラウザで再生できないことをコンポーネントが検出した場合、再生可能な mp4 への変換を試みます。変換に失敗した場合は、元の動画が返されます。

Audio

音声のアップロード/録音（入力）または音声の表示（出力）に使用できるコンポーネントを作成します。

File

汎用ファイルのアップロード（入力）および汎用ファイルの表示（出力）に使用できるコンポーネントを作成します。

Dataframe

データフレーム用の表計算ソフトのようなコンポーネントで2次元の入力を受け付けたり、表示したりすることができる。

Timeseries

時系列csvファイルのアップロード/プレビュー、または時系列からなるデータフレームをグラフィカルに表示するために使用できるコンポーネントを作成します。

State

同じユーザーがデモを実行したときに、セッションの状態を保存する特別な隠しコンポーネントです。State変数の値は、ユーザーがページをリフレッシュしたときにクリアされます。

Button

任意の click() イベントを割り当てることができるボタンを作成するために使用します。ボタンのラベル (値) は、入力として使用するか、関数の出力を介して設定することができます。

UploadButton

アップロードボタンを作成し、クリックすると、指定されたファイルタイプを満たすファイル、または一般的なファイル（file_type が設定されていない場合）をアップロードできるようにするために使用します。

ColorPicker

ユーザーが文字列入力で色を選択するためのカラーピッカーを作成します。

Label

分類ラベルと、提供されている場合は上位カテゴリの信頼度スコアが表示されます。

HighlightedText

カテゴリや数値でハイライトされているスパンを含むテキストを表示します。

JSON

任意のJSON出力を表示するために使用します。

HTML

任意の HTML 出力を表示するために使用します。

Gallery

画像の一覧をスクロールできるギャラリーとして表示する場合に使用します。

Chatbot

ユーザーが送信したメッセージと応答の両方を表示するチャットボットの出力を表示します。太字、斜体、コード、画像を含むMarkdownのサブセットをサポートします。

Model 3D

3Dモデルファイル（.obj、.glb、.gltf）のアップロードや閲覧を可能にするコンポーネントです。

Plot

各種プロットを表示するコンポーネントを作成します（matplotlib, plotly, bokehのいずれかに対応）。

ScatterPlot

散布図を表示するコンポーネントを作成します。

LinePlot

折れ線グラフを表示するコンポーネントを作成します。

Markdown

任意のMarkdown出力をレンダリングするために使用されます。ドル記号で囲まれたラテックスもレンダリングすることができます。

Dataset

データセットを表示するための出力ウィジェットを作成するために使用します。例題ボックスをレンダリングするために使用します。

Interpretation

コンポーネントの解釈ウィジェットを作成するために使用します。

参考

参考

Gradio

参考

Gradio Docs