【Gradio】はじめてのハンズオン：数行コードで動くWebアプリ入門

こんにちは、JS2IIUです。
Pythonで機械学習モデルやデータ処理ツールを作ったとき、「Web上で誰かに使ってもらいたい」と思うことはありませんか？
そんなときに便利なのが Gradio（グラディオ） というライブラリです。
Gradioは、Pythonコードから簡単にWebアプリを構築できるツールで、数行のコードでインタラクティブなUIを作ることができます。本記事では、Gradioのインストールから「Hello, World!」アプリの作成までを丁寧に解説し、初めての方でもすぐに体験できるようにご案内します。今回もよろしくお願いします。

1. Gradioとは？

Gradioは、機械学習モデルや関数を対話的なWebインターフェースに変換するためのPythonライブラリです。以下のような特徴があります。

• 数行のコードでGUI化できる
• ブラウザで動作（ローカル／共有リンクのどちらも対応）
• 画像・テキスト・音声・表形式の入力に対応
• Hugging Face Spacesと統合可能でデプロイが簡単

開発元はHugging Face。日々活発に更新されており、AIの世界で急速に存在感を高めています。

GitHubのスター数をプロットしたグラフです。人気が急上昇してきているのがわかります。

2. Gradioを使う準備

GradioはPythonで動作します。以下の手順でセットアップしましょう。

ステップ1：Python環境を用意する

Python 3.8 以降がおすすめです。

python --version
# Python 3.8以上であることを確認

python --version
# Python 3.8以上であることを確認

仮想環境の作成（任意ですが推奨）：

python -m venv gradio_env
source gradio_env/bin/activate  # Windowsなら gradio_env\Scripts\activate

python -m venv gradio_env
source gradio_env/bin/activate  # Windowsなら gradio_env\Scripts\activate

ステップ2：Gradioをインストールする

pip install gradio

pip install gradio

数秒でインストール完了します。

3. 「Hello, Gradio!」最小アプリを作ってみよう

Gradioが本当に手軽に使えるのか、最小構成のコードで試してみましょう。

サンプルコード

import gradio as gr

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

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

import gradio as gr

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

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

実行方法

上記のコードを app.py などに保存して、以下のように実行します：

python app.py

python app.py

ブラウザが自動で立ち上がり、次のような画面が表示されます：

• テキストボックスに名前を入力
• 「Submit」ボタンを押す
• 「こんにちは、〇〇さん！」と返ってくる

Gradioはこれだけのコードで、バックエンド（Python関数）とフロントエンド（Webフォーム）をつなぐUIを生成してくれます。

下の図はアプリを実行した時のコンソールの出力です。http://127.0.0.1:7860にアクセスすると上記スクショのページが表示されます。

4. Gradioの基本コンポーネント

Gradioでは多くの入力・出力コンポーネントが用意されています。代表的なものをいくつか紹介します。

入力コンポーネント

出力コンポーネント

複数の入力／出力も簡単に設定可能です：

def add_and_multiply(a, b):
    return a + b, a * b

demo = gr.Interface(fn=add_and_multiply, 
                    inputs=["number", "number"], 
                    outputs=["number", "number"])
demo.launch()

def add_and_multiply(a, b):
    return a + b, a * b

demo = gr.Interface(fn=add_and_multiply, 
                    inputs=["number", "number"], 
                    outputs=["number", "number"])
demo.launch()

5. ChatUI・DataFrameなど最新のUIを試す

Gradioは近年、「チャット形式UI」「表形式（DataFrame）入出力」など、より実用的なUIにも対応しています。

ChatUIの例

import gradio as gr

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    txt = gr.Textbox()

    def respond(message, history):
        return history + [(message, f"あなたは「{message}」と言いました")]

    txt.submit(respond, [txt, chatbot], chatbot)

demo.launch()

import gradio as gr

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    txt = gr.Textbox()

    def respond(message, history):
        return history + [(message, f"あなたは「{message}」と言いました")]

    txt.submit(respond, [txt, chatbot], chatbot)

demo.launch()

チャットボット風のインターフェースを簡単に構築できます。

6. Gradioの動作の仕組み（簡単に解説）

Gradioは、次のような構造で動作します：

1. Python関数をfn=で指定
2. UI入力部品をinputs=で指定（テキスト、画像など）
3. UI出力部品をoutputs=で指定
4. launch()でサーバーを立ち上げ、ローカルWebアプリとして動作

裏側でFlaskやFastAPIのようなWebサーバーが動いており、データをクライアント側とやり取りしています。

7. 今後に向けて：Gradioでできること

Gradioはこの他にも多くのことができます。

• 機械学習モデル（scikit-learn, transformers）との連携
• Hugging Face Spacesへのデプロイ
• 画像生成AI・音声認識・翻訳ツールなどのプロトタイピング
• テーマ変更（ダークモードなど）やレスポンシブデザイン

次回以降、以下のようなテーマで記事を続けていく予定です。

• Gradioのカスタマイズ（CSS/JS挿入など）
• Hugging Face Spacesへの公開手順
• StreamlitやDashとの違いと使い分け

まとめ

Gradioは「とにかく早く、誰かに試してもらいたい」Pythonユーザーにとって最適なライブラリです。

• インストールが簡単
• 数行のコードでUIが完成
• ブラウザで即確認できる

ぜひ、あなたのPythonコードを「見せられる形」にする第一歩として、Gradioを活用してみてください。

参考リンク

• Gradio公式ドキュメント
• Gradio GitHubリポジトリ
• Hugging Face Spaces

最後まで読んでいただきありがとうございます。
ご質問ご感想はコメント欄へよろしくおねがします。