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

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コンポーネント

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

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

Number

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

Slider

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

Sliderコンポーネント

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のサブセットをサポートします。

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

Model 3D

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

Plot

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

ScatterPlot

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

LinePlot

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

Markdown

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

Dataset

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

Interpretation

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

参考

• https://www.gradio.app/
• https://www.gradio.app/docs/