今回はPython言語で機械学習用のUIが
サクサク作れるGradioについてです


解説動画はこちら






Gradioについて

機械学習用のモデルを一般の人が使うには
いちいちHTMLやJavascriptとかを書いて
適切なUIを実装しないと使えません


Gradio を使用すると
すべてPythonでデモを構築して
共有するところまでできちゃいます



導入方法

コマンドラインで
インストールコマンドを実行するだけです
pip install gradio



主なGradio操作方法

1.どこか作業用のディレクトリを用意する
2.ディレクトリ内にGradioのコードを書いた
 Pythonファイルを作る(app.py)
3.ターミナルなどからコマンドで実行する
 gradio ファイル名



サンプル起動用のファイル

デモサイトのソースです
sample.py

import gradio as gr

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

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

ファイルを作成したらターミナルを起動して
ファイルの有る場所に移動し
次のコマンドを実行します

gradio sample.py



アプリケーションが起動したら
以下のURLにアクセスすると見る事ができます

http://127.0.0.1:7860 or 7861
http://localhost:7860 or 7861

ポート番号は起動時にターミナルに表示されるので
それを入力しましょう

スクリーンショット 2023-07-08 16.57.27

こんな感じの画面が出たら成功です



Gradioの仕組み

デモソース
import gradio as gr

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

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
gradioをimportして
gr.Interface でインターフェイスを作成します


画面に表示されるのがインターフェイスです
スクリーンショット 2023-07-08 16.57.27


インターフェイスは3つの必須パラメータで
初期化を行います

1 . fn: UIをラップする関数

2 . inputs: 入力に使用するコンポーネント
(例"text": 、"image"または"audio")

3 . outputs: 出力に使用するコンポーネント
(例"text"、"image"、 または"label")

関数の引数や戻り値は
対応する入力ソースの数や
出力するソースの数に合わせる必要があります

入力と出力、そして何をするかを関数で定義して
gr.Interfaceの引数に指定して実行するだけ
という非常にシンプルな作りになっています



コンポーネントについて

GradioではUI変更用にさまざまな部品が用意されていて
これを使用してさまざまなUIを作成することができます

部品のサンプルソースです
import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
demo.launch()
スクリーンショット 2023-07-08 17.01.22

入力として
・テキスト
・チェックボタン
・スライダー
が配置されています

部品を配置してUIをサクサク作る事ができます

これらを簡単に作成出来るのも
Gradioの強みですね




サンプルアプリ

huggingfaceの画像判別モデルを使用して
画像判別を行うUIサンプルアプリです

今回は
huggingface/google/vit-base-patch16-224
というモデルを使用する事にします

サンプルアプリのソース
import gradio as gr

demo = gr.Interface.load(
    "huggingface/google/vit-base-patch16-224",
    examples=[
    "./images/ファイル名",
    "./images/ファイル名",
    ])
    
demo.launch()

事前に画像ファイルを用意しておき
imagesというディレクトリ の中に配置しておきます

examples の部分のファイル名を
正しく指定しておきましょう

こんな感じの画面が出ます


スクリーンショット 2023-07-08 17.05.54

画像ファイルをクリックして「送信」をクリックすると
画像の判別結果が右側に出る仕組みです

このように判別モデルなんかも
数行のコードで使う事ができてしまうUIが
簡単に作成できてしまうので
非常に便利です

作ったコードを
Google colabなどで配布すれば
簡単に共有も出来てしまいます


huggingfaceにモデルを置いておけば
どこでも使う事ができるので
オープンソースで公開を検討している場合は
非常にお手軽に使う事ができます



今回は機械学習用のUIが
サクサク作れてしまう
Gradio をご紹介しました

それでは