Gradio: Pythonで簡単にAIをWebアプリ化

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

はじめに
Gradioとは
Hello World!
認証機能
リアクティブインターフェース
ブロック構造とイベントリスナー
コンポーネントの種類
実装例
- ソースコード
- 画面
その他ドキュメント
まとめ

はじめに

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

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

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

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

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

Gradioとは

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

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 + "!"

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

demo.launch()

fn: 実行する関数
inputs: 入力のコンポーネントの種類（list型で複数指定可能）
outputs: 出力のコンポーネントの種類（list型で複数指定可能）
demo.launch(): 実行

こんな感じに、少ないコードで、簡単にWeb UIを作成することができます。 HTMLやCSS、jsなどを意識する必要はありません！

実行結果

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を使用すると、より細かくレイアウトを指定することができます。

また、イベントリスナーを使用することで、ボタンをクリックしたときの処理を指定することができます。

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

import gradio as gr


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

# Block
with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    # イベントリスナー
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()