この記事はSafie Engineers' Blog! Advent Calendar 16日目の記事です。
はじめに
セーフィー株式会社 開発本部 第3開発部 AIVisionグループで画像認識AIの開発エンジニアをしている土井 慎也です。
セーフィーには2023年1月に入社し、もうすぐ1年が経とうとしています。
今年を思い返せば、生成系AIを中心とした、AI界隈の発展がすごい1年でした。
毎日のようにいろんな技術が発表されて、使えそうなものはすぐにOSSに実装されていて、技術進歩の速度がものすごく速く感じました。
さて、今回はそんなAI界隈で使われているWEB UIツールの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):
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 + "!"
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()
https://gradio-hello-blocks.hf.space
詳しいBlocksとイベントリスナーについて
www.gradio.app
詳しいレイアウトの方法について
www.gradio.app
コンポーネントの種類
コンポーネントで用意されているもので一般的なものだと、text, number, checkbox, radio, dropdown, file, button, slider, などがあり、そのほかには、画像や音声、動画、グラフ、チャットなどの様々なンポーネントが用意してあります。
コンポーネントの種類
gradio.app
また、Gradioのメジャーアップデートでカスタムコンポーネントも最近追加されたので、今後ユーザーによって多くのカスタムコンポーネントが実装されていき、より種類が豊富になっていくと思います。
カスタムコンポーネントの作成方法
www.gradio.app
実装例
最近発表され、話題になっている動画生成AI、MagicAnimate のWebUIになります。
ソースコード
huggingface.co
画面
zcxu-eric-magicanimate.hf.space
その他ドキュメント
www.gradio.app
www.gradio.app
関連記事
実際にアプリを作ってみた記事です。良ければご覧ください。
engineers.safie.link
まとめ
Gradioが用意しているコンポーネントで事足りる場合、それらを組み合わせることで、AIに関わらずPythonで作られたソフトウェアは簡単にWeb UIを作成することができます。
フロントエンドの知識がなくても、簡単かつ迅速にWeb UIを作成することができるので、Pythonで開発したものをすぐにWebアプリ化したいAIエンジニアなどにとっては、非常に便利なツールだと思います。
セーフィーでも、Gradioを使用して社内向けに気軽にAIを試せるデモ環境を迅速に用意し、PoCやその他検証などに活用できないかを現在検証しています。