Gradio入門2026｜PythonでAIデモを10分で公開する手順

Gradioのコードは最短3行。関数を1つ書き、入力と出力の型を指定し、launch()を呼ぶ。それだけでブラウザにUIが立ち上がる。

機械学習モデルを作ったものの、デモ環境の構築に苦戦した経験がある人は多いだろう。FlaskでHTMLを書き、CSSでレイアウトを整え、JavaScriptでフォームの送信処理を実装する。モデル本体より周辺コードの方が長くなる、あの徒労感。Gradioはその工程をゼロにする。

コードはGradio 5系以降の最新APIに準拠している。古い記事のgr.Chatbotが動かなくなった原因と対処は後述のFAQにまとめた。

Gradio vs Streamlit -- どちらを選ぶか

結論。MLモデルを「触れる形で見せたい」ならGradio一択。share=Trueの1行で72時間有効な公開URLが出る。SlackやNotionに貼るだけで共有が完結する。Streamlitが強いのはデータの可視化やマルチページの分析ダッシュボード。両方を比較検討したい場合はStreamlit入門2026も参照してほしい。

インストールと最初のアプリ

pip install gradio

これだけ。Python 3.10以上の仮想環境で動く。依存パッケージはpipが全部入れる。

最初のアプリを3行で書く。

import gradio as gr

def greet(name):
    return f"こんにちは、{name}さん！"

gr.Interface(fn=greet, inputs="textbox", outputs="textbox").launch()

python app.pyを実行すると、http://127.0.0.1:7860にUIが立ち上がる。名前を入れてSubmitを押すと、挨拶が返る。それだけ確認できれば十分だ。

同時に、http://127.0.0.1:7860/api/にREST APIドキュメントが自動生成されている。UIとAPIが同時に手に入る。フロントエンドを自前で書くチームがいても、バックエンドのエンドポイントとしてそのまま渡せる。この設計がGradioを試食コーナーではなくプロダクションの入り口にしている。

Interface -- 関数をUIでラップする

gr.InterfaceはGradioの基本単位。「関数の入力と出力をUIに変換する」、ただそれだけの仕事をする。

画像分類モデルのデモを例にとる。

import gradio as gr
from PIL import Image

def classify(image):
    # ここに分類ロジックを入れる
    width, height = image.size
    return {
        "猫": 0.85,
        "犬": 0.10,
        "その他": 0.05,
    }

demo = gr.Interface(
    fn=classify,
    inputs=gr.Image(type="pil"),
    outputs=gr.Label(num_top_classes=3),
    title="画像分類デモ",
    description="画像をアップロードすると分類結果を表示します",
)

demo.launch()

inputsにgr.Image(type="pil")を渡すと、ファイルアップロードUIが自動生成される。outputsのgr.Labelは辞書を受け取ってバーチャートを描画する。コンポーネントは30種類以上あり、gr.Audio、gr.Video、gr.Sliderなど入出力の型に応じて選ぶ。

Interfaceの限界は1点。レイアウトが固定されている。入力が左（または上）、出力が右（または下）。コンポーネントの配置を自由に変えたいなら、次のBlocksに進む。

Blocks -- 自由なレイアウトを組む

Interfaceが「関数の自動販売機」なら、Blocksは「自分で棚を組める店舗」だ。

import gradio as gr

def translate(text, target_lang):
    # 翻訳ロジック（ここではダミー）
    return f"[{target_lang}] {text}"

def count_chars(text):
    return len(text)

with gr.Blocks() as demo:
    gr.Markdown("# 翻訳ツール")

    with gr.Row():
        with gr.Column():
            input_text = gr.Textbox(label="原文", lines=5)
            lang = gr.Dropdown(["英語", "中国語", "韓国語"], label="翻訳先", value="英語")
            translate_btn = gr.Button("翻訳", variant="primary")
        with gr.Column():
            output_text = gr.Textbox(label="翻訳結果", lines=5)
            char_count = gr.Number(label="文字数")

    translate_btn.click(fn=translate, inputs=[input_text, lang], outputs=output_text)
    input_text.change(fn=count_chars, inputs=input_text, outputs=char_count)

demo.launch()

レイアウトはシンプルだ。gr.Row()とgr.Column()でグリッドを組み、gr.Tab()でタブ切り替えも書ける。

Blocksの核心はイベントリスナーにある。.click()、.change()、.submit()でコンポーネント間を接続する。上のコードでは、ボタンクリックで翻訳を実行し、テキスト変更で文字数をリアルタイム更新している。Interfaceでは不可能だった「複数の独立したイベント」が、Blocksなら自然に書ける。

イベント制御まで不要なら、もっと特化した選択肢がある。

ChatInterface -- チャットボットを5行で作る

筆者もFlaskとWebSocketでチャットUIを書いた経験があるが、このコードを見て手が止まった。メッセージ履歴の管理、スクロール制御、入力フォーム。ChatInterfaceがそれを全部やる。

import gradio as gr

def echo(message, history):
    return f"あなたの入力: {message}"

gr.ChatInterface(fn=echo, title="エコーボット").launch()

5行。履歴表示、入力フィールド、送信ボタン、全部付く。

実用的なチャットボットにするなら、ストリーミング対応が必要になる。yieldを使うだけでいい。

import gradio as gr
import time

def slow_reply(message, history):
    response = f"回答: {message}に対する応答です。"
    partial = ""
    for char in response:
        partial += char
        time.sleep(0.03)
        yield partial

demo = gr.ChatInterface(
    fn=slow_reply,
    title="ストリーミングボット",
    examples=["Pythonとは？", "機械学習の始め方"],
)
demo.launch()

returnをyieldに変えるだけでストリーミング表示になる。ChatGPTのように1文字ずつ表示が流れる。OpenAIやAnthropicのAPIと組み合わせれば、10分で本格的なチャットボットのデモが完成する。

実際にFlaskで同じUIを試したところ、HTML/CSS/JS/WebSocket処理で150〜200行かかった。ChatInterfaceは5行。コード量で30〜40分の1だ。もったいないと感じるのが、この機能を知らずにFlaskで書き始めてしまうケース。履歴の受け渡し、UIの再描画、ストリーム処理がfnの引数とyieldだけで済む。

HuggingFace Spacesにデプロイする

ローカルで動いたアプリを公開する。2つの方法がある。

方法1: share=True（一時的な共有）

demo.launch(share=True)

実行すると72時間有効な公開URLが発行される。社内デモやSlackで共有するには十分だ。ただしプロセスを止めるとURLも死ぬ。以前、share=Trueで生成したURLをSlackに貼ったところ、社外の人にも踏まれた経験がある。URLさえ知っていれば誰でもアクセスできる点は意識しておくべきだ。

方法2: HuggingFace Spaces（永続的な公開）

恒久的に公開するならHuggingFace Spacesを使う。無料枠でホスティングできる。

手順は3ステップ。

Step 1: HuggingFaceアカウントを作成し、CLIでログインする。

pip install huggingface_hub
huggingface-cli login

Step 2: アプリのディレクトリでgradio deployを実行する。対話的にSpace名とハードウェアを選ぶ。requirements.txtがあれば依存関係は自動で拾う。注意点として、requirements.txtを書いておかないとデプロイ後にインポートエラーが出る。先に書いておく。

gradio deploy

Step 3: 完了。https://huggingface.co/spaces/ユーザー名/アプリ名にアクセスすると、アプリが公開されている。GitHub Actionsと連携すれば、git pushのたびに自動デプロイも組める。

HuggingFace入門2026ではSpacesの詳細設定やGPU割り当てについて扱っているので、リソースが必要なモデルを載せる場合はそちらも確認してほしい。

よくある質問

まとめ

• Interface: 関数の入出力を指定するだけ。最短3行でUIが立つ
• Blocks: Row/Columnで自由にレイアウト。イベントリスナーで複数操作を制御
• ChatInterface: チャットUIを5行で構築。yieldでストリーミング対応
• デプロイ: share=Trueで一時共有、gradio deployでHuggingFace Spacesに恒久公開

gr.Interfaceで始めて、レイアウトへの不満が出た時点でgr.Blocksに書き換える。これ以外の順番で覚える必要はない。ChatInterfaceはLLM APIを叩くデモを作るときだけ使えばいい。