メインコンテンツへスキップ

gradioの部品まとめ

🎛️ はじめに

Gradioは、PythonでインタラクティブなWebアプリケーションを簡単に作成できるライブラリです。特にgr.Blocks()を使った構成では、with文の中にUIの「部品（コンポーネント）」を配置して、GUIを組み立てていきます。

この記事では、with gr.Blocks()の中に書ける各種部品の種類・用途・主な引数を体系的にまとめます。

🧱 Gradioの「部品」とは？

Gradioの部品とは、ボタンやテキストボックス、画像、スライダーなどのUI要素のことです。gr.Button() や gr.Textbox() などが該当します。

Gradioの部品の分類

  • 入力系（Input）：ユーザーから情報を受け取る

  • 出力系（Output）：処理結果を表示する

  • 構造系（Layout）：部品の配置やグループ化

  • メディア系（Media）：画像・音声・動画

  • 高度UI系（Advanced）：データテーブルやファイル管理など

📝 入力コンポーネント（Input Components）

🔤 gr.Textbox

  • 用途：1行または複数行のテキスト入力

  • 主な引数：

    • label: ラベル文字列

    • lines: 行数（デフォルト1）

    • placeholder: プレースホルダ

    • value: 初期値

    • interactive: 編集可能にする

🔘 gr.Radio

  • 用途：選択肢の中から1つを選択

  • 主な引数：

    • choices: 選択肢のリスト

    • value: 初期選択肢

    • label: ラベル

✅ gr.Checkbox

  • 用途：ON/OFFの切り替え

  • 主な引数：

    • label: 表示ラベル

    • value: 初期値（True/False）

📋 gr.CheckboxGroup

  • 用途：複数選択できるチェックボックスのセット

  • 主な引数：

    • choices: 選択肢リスト

    • value: 初期選択リスト

🔽 gr.Dropdown

  • 用途：選択肢の中から1つ（または複数）選ぶ

  • 主な引数：

    • choices, value, label, multiselect

🎚️ gr.Slider / gr.Number

  • 用途：数値の入力（スライダーや直接入力）

  • 主な引数：

    • minimum, maximum, step, value, label

🗃️ gr.File

  • 用途：ファイルのアップロード

  • 主な引数：

    • file_types: ['image', 'text', 'pdf'] など

    • type: 'binary', 'filepath'

    • label

📤 出力コンポーネント（Output Components）

📄 gr.Textbox（出力にも使える）

  • interactive=False にすることで出力専用にできる

🖼️ gr.Image

  • 用途：画像の表示

  • 主な引数：

    • type: 'numpy', 'pil', 'filepath'

    • label

    • width, height, show_label

📊 gr.Plot

  • 用途：matplotlibやplotlyなどのグラフ表示

  • 入力：figureオブジェクト

📈 gr.Dataframe

  • 用途：表形式データの表示（入力兼出力も可能）

  • 主な引数：

    • headers, datatype, value, interactive

📦 メディア系コンポーネント

🔊 gr.Audio

  • 音声ファイルの再生・録音・アップロード

  • type='filepath' で音声出力としても使える

🎥 gr.Video

  • 動画ファイルの表示

📐 レイアウト系コンポーネント（構造用）

📚 gr.Row, gr.Column

  • 用途：UI部品を横並び（Row）・縦並び（Column）にグループ化

with gr.Row():
    gr.Textbox(label='A')
    gr.Textbox(label='B')

🪟 gr.Accordion

  • 折りたたみ可能なセクション

🧩 gr.Tab, gr.TabItem

  • タブ切り替えUIの実装

🔧 高度な部品

📦 gr.Dataset

  • サンプルデータを選択するインターフェース

🧮 gr.JSON

  • JSON構造のデータ表示用

🖱️ イベントを扱う部品（アクション系）

🕹️ gr.Button

  • ボタンをクリックすることでイベント（click）を発火

btn = gr.Button("実行")
btn.click(fn=処理関数, inputs=[入力部品], outputs=[出力部品])

🔄 その他の便利コンポーネント

🔁 gr.State

  • セッションをまたいでデータを保持する隠れた入力/出力（非表示）

🏁 おわりに

GradioのBlocksで使える部品は、GUI構築に必要な要素をほぼ網羅しています。ここで紹介した部品を適切に組み合わせることで、コードだけでリッチなWebアプリが作れるのがGradioの魅力です。

【情報】Gradioの部品はバージョンによって追加・変更されることがあります。常に最新版のドキュメント（https://www.gradio.app/docs/）を参考にするのがおすすめです。


上に戻る