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

Gradio Blocks入門：Blocksだからできる複雑UIを体験しよう

🧰 はじめに

Gradioの Interface は手軽で便利ですが、自由なレイアウトや複数要素の制御には限界があります。
そこで登場するのが gr.Blocks。これはUI部品を明示的に組み合わせることで、柔軟で実用的なWebアプリを構築できます。

本記事では、「入力 → 分析 → 出力」という3段構成のUIを作りながら、Blocksの実践的な使い方を学びます。

🎯 目標：単語分析アプリ（Blocks版）

今回は以下のような画面を構築します：

  • 左：文章の入力欄（大きめのテキストボックス）

  • 中央：実行ボタン

  • 右：分析結果を複数表示（単語数・文字数・平均語長）

  • 下部：ログ出力エリア（逐次追記される）

これを1つの画面に自然に配置できるのはBlocksの力です！

🧾 コード全体（解説つき）

import gradio as gr

def analyze_text(text, history):
    words = text.strip().split()
    num_words = len(words)
    num_chars = len(text)
    avg_word_length = round(num_chars / num_words, 2) if num_words > 0 else 0

    log_entry = f"✔️ 分析完了：{num_words}語, {num_chars}文字, 平均語長 {avg_word_length}"
    new_history = (history or "") + log_entry + "\n"

    return num_words, num_chars, avg_word_length, new_history

with gr.Blocks() as demo:
    gr.Markdown("## 📊 英文テキストの詳細分析ツール")

    with gr.Row():
        with gr.Column(scale=3):
            input_text = gr.Textbox(label="文章を入力", lines=8, placeholder="ここに英文を入力...", show_copy_button=True)
        with gr.Column(scale=1):
            analyze_button = gr.Button("分析する")
        with gr.Column(scale=3):
            num_words = gr.Number(label="単語数", interactive=False)
            num_chars = gr.Number(label="文字数", interactive=False)
            avg_length = gr.Number(label="平均語長", interactive=False)

    history = gr.Textbox(label="ログ", lines=6, interactive=False)

    analyze_button.click(
        fn=analyze_text,
        inputs=[input_text, history],
        outputs=[num_words, num_chars, avg_length, history]
    )

demo.launch()

🧩 Blocksのポイント解説

1. with gr.Row() / with gr.Column()

  • 行や列を明示的に定義できるので、左右に要素を並べる、下部にログを表示するなどが簡単。

  • scale を使えば比率指定もでき、レスポンシブな画面が作れる。

2. 複数の出力が返せる

  • Interfaceでは暗黙的に並ぶ出力を Blocksでは明示的に部品として定義・受け渡しできる。

3. 逐次ログ出力

  • historyのような「前回の値を引き継ぐ」ようなロジックも、Blocksなら引数として渡せる。

  • StatefulなUI設計が可能。

✅ このサンプルで学べること

機能 学べる内容
入力欄（複数行） Textbox(lines=8)の使い方と、長文入力の扱い方
レイアウト制御 Row + Column を組み合わせた実用的な3分割UI
複数出力 関数の返り値を複数コンポーネントに同時に反映
状態の保存（ログ） 前の値を引き継いだ連続処理（擬似的な状態管理）
非インタラクティブな出力欄 interactive=False でユーザー編集不可にする方法

🚀 応用のヒント

  • 結果を表やグラフで表示：gr.Dataframeやgr.Plotを使って視覚化も可能。

  • 翻訳APIやキーフレーズ抽出を追加：文章処理アプリへ発展

  • ログをファイル保存：gr.Fileを使えばダウンロードリンクも作れる

おわりに

Blocks はGradioを「UIフレームワーク」として本格的に活用するための強力なツールです。
今回のサンプルのように「複数の部品・自由なレイアウト・状態の受け渡し」が求められるアプリでは、Interfaceでは限界があるため、Blocksが圧倒的に適しています。

小さなツールでも、Blocksを使いこなすことで実用性と拡張性がぐっと高まります。
ぜひこのサンプルをベースに、自分だけのミニアプリを作ってみてください！

上に戻る