Gradio は、機械学習、データ サイエンスのデモ、Web アプリケーションの構築に使用できるオープン ソースの Python ライブラリです。

Grado を使用すると、機械学習モデルやデータ サイエンスのワークフローを中心に美しい UI をすばやく作成し、画像のドラッグ アンド ドロップ、テキストの貼り付け、サウンドの録音、ブラウザーでのデモの操作などの操作を実行できます。

Gradio は次の場合に適しています:

• 機械学習モデルをクライアント、パートナー、ユーザー、学生にデモンストレーションします。
• 自動共有リンク機能を使用してモデルをすばやくデプロイし、そのパフォーマンスに関するフィードバックを取得します。
• 組み込みの操作および解釈ツールを使用して、モデルをインタラクティブにデバッグします。

インタラクティブなバージョンの入門ガイドは、https://gradio.app/getting_started[1] でご覧いただけます。

クイックスタート

前提条件: Grado を使用するには、Python バージョン 3.7 以上が必要です。

プロジェクトアドレス

https://github.com/gradio-app/gradio

Gradio はどんな問題を解決しますか? 😲

機械学習モデル、API、またはデータ サイエンスのワークフローを他のユーザーと共有する最適な方法の 1 つは、インタラクティブなデモを作成し、ユーザーや同僚がブラウザーで体験できるようにすることです。

Web ベースのデモは、ブラウザを持っている人なら誰でも (技術者だけでなく) 直感的に自分の入力を試し、構築したものを理解できるため、非常に望ましいものです。

ただし、このような Web ベースのデモを作成するのは難しい場合があります。Web アプリケーションをサポートするバックエンド サービスと、UI の構築に必要なフロントエンド開発の知識 (HTML、CSS、JavaScript) を理解する必要があるためです。

Gradio を使えば、Python だけでデモを作成して共有できます。必要なのは通常、数行のコードだけです。さあ、始めましょう。

こんにちは、世界⚡

Grado で簡単な「Hello World」の例を実行する前に、次の 3 つの手順に従ってください。

1. pipを使ってGradioをインストールします。Pythonの最小バージョンは3.7です。

 pipでgradio をインストールする

2. 次のコードを Python スクリプトとして (またはノートブック内で直接) 実行します。

 gradio をgr としてインポート

def greet ( 名前):
 「Hello」 + 名前+ 「!!」 を返します

demo = gr . インターフェース( fn = greet , inputs = "text" , outputs = "text" )

 デモを起動します（ ）

3. 以下のデモはノートブックに自動的に表示されます。Pythonスクリプトとして実行すると、ブラウザにhttp://localhost:7860[2]のページが自動的に表示されます。

インターフェースクラス🧡

上記で作成したデモでは、`gradio.Interface` クラスを使ってオブジェクトを定義していることに気付いたかもしれません。`Interface` クラスはほぼ何でもできます。つまり、あらゆる Python 関数を UI 風に装飾できるのです。例では、単純なテキスト関連の関数を使用しました。しかし実際には、この関数は音楽ジェネレータから税金計算、そして（最も一般的な）事前学習済み機械学習モデルの予測関数まで、あらゆるものになり得ます。

コア インターフェース クラスは、次の 3 つのパラメータで初期化する必要があります。

• fn: UIによって装飾された関数
• inputs: 「テキスト」、「画像」、「音声」などの入力コンポーネント。
• `outputs`: 「テキスト」、「画像」、「ラベル」などの出力コンポーネント。

Gradioは20種類以上のコンポーネントタイプをサポートしており、そのほとんどは入出力コンポーネントとして使用できます（完全なリストについては、公式ドキュメント[3]を参照してください）。

コンポーネントのプロパティ

`Interface` の3つのパラメータを使えば、UIインターフェースを素早く作成して起動できます。しかし、UIのスタイルや外観を変更したい場合はどうすればよいでしょうか？

テキスト入力のシナリオをカスタマイズしたいとします。例えば、テキストボックスを大きくして入力候補を表示させたいとします。「text」入力タイプではなく、`Textbox`クラスを使用することで、コンポーネントのプロパティを通じてより多くのカスタマイズが可能になります。

 gradio をgr としてインポート

def greet ( 名前):
 「Hello」 + 名前+ 「!」 を返します

デモ= gr.インターフェース(
 fn = 挨拶、
 inputs = gr . Textbox ( lines = 2 , placeholder = "ここに名前を入力してください..." ),
 出力= "テキスト" 、
 ）

 デモを起動します（ ）

Gradoでサポートされているすべてのコンポーネントのリストと、それらをカスタマイズするために使用できるプロパティについては、公式ドキュメント[3]を参照してください。

複数の入力と出力 🔥

複数の入力と出力を持つ、より複雑な関数があるとします。以下の例では、文字列、ブール値、数値を入力パラメータとして受け取り、文字列と数値を返す関数を定義しています。この場合、入力コンポーネントと出力コンポーネントのリストを渡す方法を見てみましょう。

 gradio をgr としてインポート

def greet ( 名前, 朝の状態, 温度):
 salutation = "おはようございます" if is_morning else "こんばんは"
 greeting = "%s %s。今日の気温は%s度です" % ( 挨拶, 名前, 気温)
 摂氏= ( 温度- 32 ) * 5 / 9
 返事の挨拶、 ラウンド（ 摂氏、 2 ）

 デモ= gr.インターフェース(
 fn = 挨拶、
 inputs = [ "テキスト" , "チェックボックス" , gr . Slider ( 0 , 100 )],
 出力= [ "テキスト" , "数値" ],
 ）
 デモを起動します（ ）

コンポーネントをリストに配置するだけです。入力リストの各コンポーネントは、関数の引数の 1 つに順番に対応し、出力リストの各コンポーネントは、関数によって返される値の 1 つに順番に対応します。

画像🎨

「画像から画像へ」関数を試してみましょう！Imageコンポーネントを使用すると、関数は指定されたサイズと形状（幅、高さ、3）のNumPy配列を受け取ります。最後の次元はRGB値を表します。画像はNumPy配列として返されます。

 numpyをnp としてインポートする

gradio をgr としてインポート

セピアを定義します( input_img ):
 セピアフィルター= 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 ()
 sepia_imgを返す

demo = gr.Interface ( sepia , gr.Image (shape= ( 200,200 ) ) , "image" )

 デモを起動します（ ）

さらに、画像入力インターフェースには「編集」ボタン✏️があり、画像の切り抜きや拡大のためのツールが開きます。このように画像を処理することで、機械学習モデルのバイアスや隠れた欠陥を明らかにするのに役立つことが分かっています。

Gradoは画像に加えて、音声や動画などの他のメディア形式もサポートしています。これらの形式については公式ドキュメント[3]をご覧ください。

データフレームとチャート📈

Grado を使えば、データベースやデータファイルからの入出力が可能です。例としては、 ​numpy​配列、 ​pandas​データフレーム、プロットデータなどが挙げられます。以下のデモをご覧ください（関数内の複雑なデータ操作は無視できます）。

 matplotlib をインポートする
matplotlib.use ( 'Agg' )
 matplotlib .pyplotをplt としてインポートします。
 numpyをnp としてインポートする

gradio をgr としてインポート

売上予測の定義( 従業員データ):
 sales_data = employee_data . iloc [:, 1 : 4 ]. astype ( "int" ). to_numpy ()
 回帰値= np . 軸に沿って適用(
 ラムダ行: np.array ( np.poly1d ( np.polyfit ( [0,1,2 ] , row , 2 ) ) ), 0 , sales_data
 ）
 予測月数= np . repeat (
 np.expand_dims ( np.arange ( 3,12 ) ,0 ) , len ( sales_data ), axis = 0
 ）
 projected_values ​​= np . 配列(
 [
 月* 月* 回帰[ 0 ] + 月* 回帰[ 1 ] + 回帰[ 2 ]
 月の場合、 zip の回帰( projected_months 、 regression_values ​​)
 ]
 ）
 plt.plot ( projected_values.T )
 plt . legend ( 従業員データ[ "名前" ])
 従業員データ、 plt.gcf ()、 回帰値を返す

デモ= gr.インターフェース(
 売上予測
gr.データフレーム(
 headers = [ "名前" , "1月の売上" , "2月の売上" , "3月の売上" ],
 値= [[ "ジョン" , 12 , 14 , 18 ], [ "アリス" , 14 , 17 , 2 ], [ "サナ" , 8 , 9.5 , 12 ]],
 ）、
 [ "データフレーム" , "プロット" , "numpy" ],
 description = "年間の売上軌道を予測するために従業員の売上高を入力してください。" ,
 ）
 デモを起動します（ ） 

サンプルデータを入力として使用する🦮

ユーザーがモデルに簡単にロードできるサンプルデータを提供することができます。これにより、モデルが期待する入力の種類を示すことができ、モデルと組み合わせてデータセットを探索する方法が提供されます。サンプルデータをロードするには、Interfaceコンストラクタのexamples=キーワード引数にネストされたリストを指定します。外側のリストの各サブリストはデータサンプルを表し、サブリスト内の各要素は各入力コンポーネントの実際の入力を表します。各コンポーネントのサンプルデータ形式については、公式ドキュメント[3]にも記載されています。

 gradio をgr としてインポート

def calculator ( num1 , operation , num2 ):
 操作== "追加" の場合:
 num1 + num2 を返す
elif 演算== "減算" :
 num1 - num2 を返す
elif 演算== "乗算" :
 num1 * num2 を返す
elif 演算== "除算" :
 num1 / num2 を返す

デモ= gr.インターフェース(
 電卓
[ gr . 数値( 4 ), gr . ラジオ([ "加算" , "減算" , "乗算" , "除算" ]), "数値" ],
 "番号" 、
 例= [
 [ 5 , "追加" , 3 ],
 [ 4 , "割る" , 2 ],
 [ - 4 , "掛け算" , 2.5 ],
 [ 0 , "減算" , 1.2 ],
 ],
 title = "テスト計算機" 、
 description = "おもちゃの電卓のサンプルです。お楽しみください！" 、
 ）

 デモを起動します（ ）

大規模なデータセットをサンプルに読み込み、Grado 経由で閲覧および操作できます。サンプルは自動的にページ分けされます（ ​Interface​の​examples_per_page​パラメータで設定できます）。

リアルタイムインターフェース🪁

インターフェースで `live=True` を設定することで、UIの自動更新を有効にすることができます。これにより、ユーザー入力が変更されるたびにUIが再計算されます。

 gradio をgr としてインポート

def calculator ( num1 , operation , num2 ):
 操作== "追加" の場合:
 num1 + num2 を返す
elif 演算== "減算" :
 num1 - num2 を返す
elif 演算== "乗算" :
 num1 * num2 を返す
elif 演算== "除算" :
 num1 / num2 を返す

デモ= gr.インターフェース(
 電卓
[ "数値" , gr . Radio ([ "加算" , "減算" , "乗算" , "除算" ]), "数値" ],
 "番号" 、
 ライブ= True 、
 ）

 デモを起動します（ ）

変更が行われるとインターフェースが自動的に再送信されるため、ここには送信ボタンがないことに注意してください。

マーク🚩

インターフェースの出力の下に「フラグ」ボタンがあります。モデルをテストしているユーザーが、エラーや予期しないモデルの動作など、興味深い出力を含む入力を見つけた場合、インターフェース作成者が確認できるよう、その入力にフラグを付けることができます。フラグが付けられた入力を記録するために、インターフェースコンストラクタの `flagging_dir=` パラメータで指定されたディレクトリにCSVファイルが生成されます。インターフェースが画像や音声コンポーネントなどのファイルデータを含む場合は、フラグが付けられたデータを保存するためのフォルダが作成されます。

たとえば、上記の計算機インターフェースを使用すると、次のようにタグ データをタグ ディレクトリに保存します。

 + -- 計算機.py
 + -- フラグ付き/
 | + -- ログ. csv

flagged/logs.csv の内容:

 num1、演算、num2、出力
5、加算、7、12
 6、引き算、1.5、4.5

上記で実装した Sepia インターフェイスを使用して、タグ データを以下に示すタグ ディレクトリに保存します。

 + -- セピア.py
 + -- フラグ付き/
 | + -- ログ. csv
 | + -- イム/
 | | + -- 0.png
 | | + -- 1.png ​
 | + -- 出力/
 | | + -- 0.png
 | | + -- 1.png ​

flagged/logs.csv の内容:

 im 、 出力
im / 0.png 、 出力/ 0.png
 im / 1.png 、 出力/ 1.png

これらのタグ入力は、タグディレクトリを手動で参照するか、Gradioインターフェースのexamplesにロードして`examples=`パラメータでタグディレクトリを指定することによって確認できます。ユーザーにタグ付けの理由を入力させたい場合は、インターフェースの`flagging_options`パラメータに文字列のリストを渡すことができます。ユーザーはタグ付け時にこれらの文字列のいずれかを選択する必要があり、選択した文字列はCSVファイルに追加の列として保存されます。

ブロック: 柔軟性とコントロール性の向上 🧱

Gradio は、ユーザーに 2 つの API を提供します。(1) インターフェース (これまで説明してきたデモを作成するための高レベルの抽象クラス)、および (2) ブロック (より柔軟なレイアウトで Web アプリケーションを設計するための低レベルの API とデータ フロー) です。

ブロックを使用すると、関連するデモを組み合わせたり、ページ上のコンポーネントの表示位置を変更したり、複雑なデータ フローを処理したり (出力を他の関数の入力として使用したりするなど)、ユーザーの操作に基づいてコンポーネントの属性や可視性を更新したりすることができます。これらすべてに必要なのは、依然として Python だけです。

たとえば、Blocks は Python のネストされた with ステートメントを使用して、次に示すようにページ上にコンポーネントをレイアウトします。

 numpyをnp としてインポートする
gradio をgr としてインポート

デモ= gr.Blocks ( )

 def flip_text ( x ):
 x [:: - 1 ] を返す

def flip_image ( x ):
 np.fliplr ( x ) を返す

デモ付き:
 gr . Markdown ( "このデモを使用してテキストまたは画像ファイルを反転します。" )
 gr 付き。 タブ():
 gr . TabItem ( "Flip Text" ) を使用:
 text_input = gr.Textbox ( )
 text_output = gr.Textbox ( )
 text_button = gr . Button ( "Flip" )
 gr . TabItem ( "Flip Image" ) を使用:
 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 )

 デモを起動します（ ）

ブロックの仕組みに興味がある方は、専用のガイド[4]をお読みください。

デモを共有します🌎

`launch()` メソッドで `share=True` を設定することで、Grado デモを簡単に公開できます。以下のようにします。

 gr.Interface(classify_image, "image", "label").launch(share=True)

これにより、誰にでも送信できる公開共有リンクが生成されます。このリンクを送信すると、送信先のユーザーはブラウザでモデルを試すことができます。処理はデバイス上で行われるため（デバイスの電源が入っている限り）、依存関係のパッケージ化について心配する必要はありません。共有リンクは通常、XXXXXX.gradio.app のようになります。リンクはGradio URL経由で提供されますが、Gradioはローカルサーバーのプロキシとして機能するのみであり、インターフェース経由で送信されたデータは保存しません。

ただし、これらのリンクは公開されているため、誰でもモデルを使って予測を行うことができます。そのため、作成する関数を通じて機密情報を公開したり、デバイスに重大な変更を加えたりしないように注意してください。share=False（Colab Notebookを除くデフォルト）に設定すると、ポート転送[5]を介して特定のユーザーと共有できるローカルリンクが1つだけ作成されます。

共有リンクは 72 時間で期限切れになります。