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

FastAPIとGradioの連携サンプル

🧪シナリオ

ここでは「テキストを受け取って、英語で大文字変換して返す」簡単なAPIをFastAPIで作り、それをGradioのインターフェースで呼び出して表示する流れを作ります。

🧱Step1: FastAPIによるAPI作成

# fastapi_app.py
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class TextRequest(BaseModel):
    text: str

@app.post("/uppercase")
def to_uppercase(data: TextRequest):
    return {"result": data.text.upper()}

このAPIは、POST /uppercase にテキストを送ると、全て大文字に変換して返します。

FastAPIを起動するには以下のコマンドを使います：

uvicorn fastapi_app:app --reload

🧩Step2: GradioによるGUI構築

# gradio_ui.py
import gradio as gr
import requests

def call_api(user_input):
    res = requests.post(
        "http://127.0.0.1:8000/uppercase", 
        json={"text": user_input}
    )
    return res.json()["result"]

demo = gr.Interface(
    fn=call_api,
    inputs="text",
    outputs="text",
    title="大文字変換APIデモ"
)

demo.launch()

このコードでは、GradioのInterfaceを使ってテキスト入力欄と出力欄を作り、FastAPIのAPIにアクセスして結果を表示しています。

🔁連携のポイント

  • FastAPIは8000番ポート、Gradioは7860番で起動する

  • GradioがFastAPIのエンドポイントに**requests.post()で通信**する

  • 両方のPythonスクリプトは別ターミナルで起動

🧪Step3: 実行方法

  1. ターミナルAでFastAPIを起動：

    uvicorn fastapi_app:app --reload

  2. ターミナルBでGradioを起動：

    python gradio_ui.py

  3. ブラウザで http://127.0.0.1:7860/ にアクセスしてGUIを使う

🎯まとめ：この構成のメリット

  • バックエンドとフロントをPythonだけで完結

  • APIとUIを分離して設計できる

  • Gradioでプロトタイプを即公開できる

  • FastAPI部分を本番用に作り直せば、フロントだけそのまま流用可能

この構成は「まず試してみたい」ときにとても強力です。機械学習モデルをAPIとして公開し、Gradioで体験してもらうといった用途にも応用できます。

上に戻る