Gradio: Pythonで簡単にAIをWebアプリ化！ライブラリの基本と実践ガイド

この記事はSafie Engineers' Blog! Advent Calendar16日目の記事です。

はじめに
Gradioとは
- Gradioの主な特徴
Hello World!
認証機能
リアクティブインターフェース
ブロック構造とイベントリスナー
コンポーネントの種類
- 主要コンポーネント一覧
実装例
- ソースコード
- 画面
デプロイと共有
その他ドキュメント
関連記事
まとめ

はじめに

セーフィー株式会社開発本部第3開発部 AIVisionグループで画像認識AIの開発エンジニアをしている土井慎也です。

セーフィーには2023年1月に入社し、もうすぐ1年が経とうとしています。

今年を思い返せば、生成系AIを中心とした、AI界隈の発展がすごい1年でした。

毎日のようにいろんな技術が発表されて、使えそうなものはすぐにOSSに実装されていて、技術進歩の速度がものすごく速く感じました。

さて、今回はそんなAI界隈で広く使われているWEB UIツールのGradioについて紹介したいと思います。

Gradioとは

Gradioは、機械学習モデルを簡単にデモするためのPythonライブラリです。Gradioを使用すると、モデルの入力と出力に対応するインターフェースを簡単に作成でき、モデルを試すためのWeb UIを少ないコード量で生成できます。これにより、AIモデルの挙動を迅速に確認したり、他の人と共有したりすることが可能になります。

Gradioの主な特徴

シンプルなAPI: 数行のコードでUIを構築可能
多様なコンポーネント: テキスト、画像、音声など様々な入出力形式に対応
リアクティブな設計: 入力変更に応じたリアルタイム更新
認証機能: ユーザー認証システムの簡単な実装
HuggingFace連携: Spacesとの統合によるモデルの共有と展開
カスタマイズ性: レイアウトやスタイルのカスタマイズ

stable diffusionで有名なWEB UIの一つである、stable-diffusion-webuiもGradioを使用しています。

AI用のGithubともいえるHuggingFaceとの親和性も高く、HuggingFaceで公開されているモデルを簡単に試すことができたり、逆に自分のモデルを公開することもできます。

また、機械学習モデルに関係なくても、Gradioには色々なインターフェイスが用意されているので、簡易的なWeb UIが簡単に実装できます。

Gradioは日々アップデートで変化しているため、今回はあまり深くは解説せず、基本的な紹介といたします。

Hello World!

python3.8以上が実行可能な環境を用意します。

Gradioのインストール

pip install gradio

コード実装

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

# インターフェースの作成
# fn: 実行する関数
# inputs: 入力のコンポーネントの種類
# outputs: 出力のコンポーネントの種類
demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# Web UIの起動
demo.launch()

このように、わずか数行のコードで、簡単にWeb UIを作成することができます。 HTMLやCSS、JavaScriptなどを意識する必要はありません！

実行結果

https://gradio-hello-world.hf.space

認証機能

Gradioには認証機能が組み込まれています。

demo.launch(auth=auth_function)とすることで、認証機能を有効にすることができます。

認証機能のベースはFastAPIのOAuth2PasswordRequestFormを使用しているようです。

import gradio as gr

def greet(name):
    return "Hello " + name +  "!"

# 認証機能
def auth(user_name, password):
    # 例: ユーザー名とパスワード(反転)が一致したら認証OK
    # 実際にはDBと連携して認証するなどの処理が必要
    if user_name == password[::-1]:
        return True
    else:
        return False

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

# 認証機能を有効にする
demo.launch(auth=auth)

リアクティブインターフェース

gr.Interfaceでlive = Trueを指定すると、入力値を変更するたびに、リアルタイムで出力が更新されます。これにより、ユーザーは即座にフィードバックを得ることができ、インタラクティブな体験が向上します。

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2

# リアクティブインターフェースの作成
demo = gr.Interface(
    calculator,
    [
        "number",  # 数値入力
        gr.Radio(["add", "subtract", "multiply", "divide"]),  # 演算子選択
        "number"  # 数値入力
    ],
    "number",  # 出力は数値
    live=True,  # リアルタイム更新を有効化
)
demo.launch()

https://gradio-calculator-live.hf.space

ブロック構造とイベントリスナー

Blocksを使用すると、より細かくレイアウトを指定することができます。Interfaceよりも柔軟なUIデザインが可能になり、複雑なアプリケーションの構築に適しています。

また、イベントリスナーを使用することで、ボタンをクリックしたときの処理を指定することができます。これによりユーザーインタラクションに応じた動的な振る舞いを実装できます。

Hello World!をBlocksを使用して書き換えると、以下のようになります。

import gradio as gr


def greet(name):
    return "Hello " + name + "!"

# Blocksでレイアウトを構築
with gr.Blocks() as demo:
    # 入力コンポーネント
    name = gr.Textbox(label="Name")
    # 出力コンポーネント
    output = gr.Textbox(label="Output Box")
    # ボタンコンポーネント
    greet_btn = gr.Button("Greet")
    # イベントリスナー: ボタンクリック時にgreet関数を実行
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()