Gradio 3 (機械学習 Web App の構築) : 概要 / クイックスタート (翻訳/解説)
翻訳 : (株)クラスキャット セールスインフォメーション
作成日時 : 12/30/2022 (v3.15.0)
* 本ページは、github の gradio-app/gradio レポジトリの以下のドキュメントを翻訳した上で適宜、補足説明したものです：
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
Gradio 3 (機械学習 Web App の構築) : 概要 / クイックスタート
Gradio はオープンソース Python ライブラリで、機械学習やデータサイエンスのデモや web アプリケーションを構築するために使用されます。
Gradio を使用すれば、貴方の機械学習モデルやデータサイエンス・ワークフロー周りに美しいユーザインターフェイスを素早く作成できて、ユーザが自身の画像をドラッグ & ドロップし、テキストを貼り付け、自身の声を録音して、そして貴方のデモと相互作用することで、すべてブラウザを通してユーザは「試す」ことができます。
Gradio is useful for:
- クライアント/協力者/ユーザ/生徒に対して貴方の機械学習モデルの デモを実演する (Demoing)。
- 自動共有可能リンク (automatic shareable links) を使用して貴方のモデルを素早く配備して (Deploying) モデル性能のフィードバックを得られます。
- 開発中、組み込み操作とインタープリテーション・ツールを使用して対話的にモデルをデバッグできます (Debugging)。
クイックスタート
前提条件 : Gradio は Python 3.7 かまたはそれ以上を必要とします、that’s all!
What Does Gradio Do?
貴方の機械学習モデル, API やデータサイエンス・ワークフローを他の人と共有するベストな方法の一つは、ユーザや協力者がブラウザでデモを試すことを可能にする 対話的なアプリケーション を作成することです。
Gradio は すべて Python で、デモを構築してそれらを共有する ことを可能にします。そして通常はわずか数行のコードでです！So let’s get started.
Hello, World
簡単な “Hello, World” サンプルで Gradio を実行するには、これら 3 つのステップに従います :
- pip を使用して Gradio をインストールします :
pip install gradio - 下のコードを Python スクリプトとして、あるいは Jupyter Notebook (or Google Colab) 内で実行します :
import gradio as gr def greet(name): return "Hello " + name + "!" demo = gr.Interface(fn=greet, inputs="text", outputs="text") demo.launch() - 下のデモが Jupyter Notebook 内に自動的に表示されるか、スクリプトで実行している場合には http://localhost:7860 でブラウザにポップアップします :
Interface クラス
デモを作成するために、gradio.Interface を作成したことにお気づきでしょう。この Interface クラスは任意の Python 関数をユーザインターフェイスでラップすることができます。上記のサンプルでは、単純なテキストベースの関数を見ましたが、関数は音楽 generator から税金計算機、事前訓練済み機械学習モデルの予測関数まで任意のものであり得ます。
中核となる Interface クラスは 3 つの必須パラメータで初期化されます :
- fn: UI 周りをラップする関数
- inputs: 入力 (e.g. “text”, “image” or “audio”) のためにどのコンポーネントを使用するか
- outputs: 出力 (e.g. “text”, “image” or “label”) のためにどのコンポーネントを使用するか
入出力を提供するために使用されるこれらのコンポーネントを詳しく見てみましょう。
コンポーネント属性
前のサンプルで幾つかの単純な Textbox コンポーネントを見ましたが、UI コンポーネントの見え方や動作方法を変更したい場合にはどうでしょう？
入力テキストフィールドをカスタマイズしたいとしましょう – 例えば、それをより大きくてテキストプレースホルダーを持つことを望む場合です。文字列ショートカットを使用するかわりに Textbox の実際のクラスを使用すれば、コンポーネント属性を通して遥かに多くのカスタマイズ性にアクセスできます。
import gradio as gr
def greet(name):
return "Hello " + name + "!"
demo = gr.Interface(
fn=greet,
inputs=gr.Textbox(lines=2, placeholder="Name Here..."),
outputs="text",
)
demo.launch()
複数の入力と出力コンポーネント
複数の入出力を持つ、より複雑な関数を持つと仮定します。以下の例では、文字列, ブーリアンと数値を受け取り、文字列と数値を返す関数を定義しています。入力と出力のコンポーネントのリストを渡す方法を見てみましょう。
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()
単純にコンポーネントをリストでラップするだけです。入力リストの各コンポーネントは順番に、関数のパラメータの一つに対応しています。出力リストの各コンポーネントは、再度順番に、関数により返される値の一つに対応しています。
画像サンプル
Gradio は Image, DataFrame, Video や Label のような多くのタイプのコンポーネントをサポートします。これらの感じをつかむために画像-to-画像変換関数を試しましょう！
import numpy as np
import gradio as gr
def sepia(input_img):
sepia_filter = np.array([
[0.393, 0.769, 0.189],
[0.349, 0.686, 0.168],
[0.272, 0.534, 0.131]
])
sepia_img = input_img.dot(sepia_filter.T)
sepia_img /= sepia_img.max()
return sepia_img
demo = gr.Interface(sepia, gr.Image(shape=(200, 200)), "image")
demo.launch()
入力として Image コンポーネントを使用するとき、関数は shape (width, height, 3) の NumPy 配列を受け取り、ここで最後の次元は RGB 値を表します。画像をまた NumPy 配列の形式で返します。
type= keyword 引数を使用してコンポーネントで使用されるデータ型を設定することもできます。例えば、関数が NumPy 配列の代わりに画像へのファイルパスを受け取ることを望む場合、入力 Image コンポーネントは以下のように書けます :
gr.Image(type="filepath", shape=...)
入力 Image コンポーネントは編集ボタン 🖉を備えていることにも注意してください、これは画像をクロップしたりズームすることを可能にします。このように画像を操作すると機械学習モデルの偏りや隠れた欠点を明らかにするのに役立ちます
多くのコンポーネントとそれらの使用方法の詳細は Gradio docs で読むことができます。
Blocks: 更なる柔軟性と制御
Gradio はアプリケーションを構築するために 2 つのクラスを提供しています :
- Interface, これはここまで説明説明してきたようなデモを作成するために高位な抽象化を提供します。
- Blocks, より柔軟なレイアウトとデータフローを持つ web アプリケーションを設計するための低位 API です。Blocks は、複数のデータフローやデモをフィーチャーし、コンポーネントがページのどこに表示されるかを制御し、複雑なデータフロー (e.g. 出力が他の関数への入力として供給できる) を処理し、そしてユーザとの相互作用に基づいてコンポーネントのプロパティ/視覚化を更新するようなことを行なうことを可能にします – 依然としてすべて Python でです。このカスタマイズ可能性が貴方の必要なものであれば、代わりに Blocks を試してください！
Hello, Blocks
単純な例を見てみましょう。ここでの API が Interface とどのように異なるかに注意してください。
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)
demo.launch()
Things to note:
- Blocks は with 節 (clause) で作成され、この節の内側で作成された任意のコンポーネントはアプリケーションに自動的に追加されます。
- コンポーネントはそれらが作成された順序でアプリケーション內に垂直に表示されます。(後でレイアウトのカスタマイズをカバーします！)
- ボタンが作成され、このボタンに click イベントリスナーが追加されました。The API for this should look familiar! Interface と同様に、click メソッドは Python 関数, 入力コンポーネントと出力コンポーネントを受け取ります。
より複雑な例
Blocks を使用して何が可能かの体験を与えるアプリケーションがここにあります :
import numpy as np
import gradio as gr
def flip_text(x):
return x[::-1]
def flip_image(x):
return np.fliplr(x)
with gr.Blocks() as demo:
gr.Markdown("Flip text or image files using this demo.")
with gr.Tabs():
with gr.TabItem("Flip Text"):
text_input = gr.Textbox()
text_output = gr.Textbox()
text_button = gr.Button("Flip")
with gr.TabItem("Flip Image"):
with gr.Row():
image_input = gr.Image()
image_output = gr.Image()
image_button = gr.Button("Flip")
text_button.click(flip_text, inputs=text_input, outputs=text_output)
image_button.click(flip_image, inputs=image_input, outputs=image_output)
demo.launch()
A lot more going on here! このような複雑な Blocks アプリケーションの作成方法は building with blocks セクションでカバーします。
Congrats, you’re now familiar with the basics of Gradio! 🥳 Go to our next guide to learn more about the key features of Gradio.
Open Source Stack
(訳注: 原文 参照)
License
(訳注: 原文 参照)
Citation
(訳注: 原文 参照)
See Also
- The Gradio Discord Bot, a Discord bot that allows you to try any Hugging Face Space that is running a Gradio demo as a Discord bot.
以上