7.4K スター! わずか数分で機械学習モデル用の美しいインタラクティブ インターフェースを生成できます

Gradio は、機械学習やデータ サイエンス関連のデモや Web アプリケーションを構築するためのオープン ソース Python ライブラリです。

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

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

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

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

クイックスタート

前提条件: Gradio には Python バージョン >= 3.7 が必要です

プロジェクトギャラリー

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

Gradio はどのような問題を解決しますか? 😲

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

Web ベースのデモは、ブラウザに直接アクセスできる人なら誰でも (技術者だけでなく) 自分の入力を視覚的に試し、作成したものを確認できるため、非常に便利です。

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

Gradio を使用すると、Python のみを使用して、多くの場合は数行のコードだけでデモを構築して共有できます。始めましょう。

こんにちは、世界⚡

簡単な「Hello World」の例で Gradio を実行する前に、次の 3 つの手順に従います。

1. pip を使用して Gradio をインストールします。必要な Python の最小バージョンは 3.7 であることに注意してください。

 pip インストールgradio

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

 gradioをgr としてインポート

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

 demo = gr . インターフェース( fn = greeting 、 inputs = "text" 、 output = "text" )

 デモを起動します( )

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

インターフェースクラス

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

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

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

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

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

Interface​ の 3 つのパラメータを使用すると、UI インターフェイスをすばやく作成し、 launch() することができます。しかし、UI のスタイルや動作を変更したい場合はどうすればよいでしょうか?

たとえば、テキスト入力シーンをカスタマイズして、テキスト ボックスを大きくし、入力ヒントを表示したいとします。 「テキスト」入力タイプの代わりに Textbox​ クラスを使用すると、コンポーネントのプロパティを通じてさらにカスタマイズを行うことができます。

 gradioをgr としてインポート

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

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

 デモを起動します( )

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

複数の入力と出力🔥

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

 gradioをgr としてインポート

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

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

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

画像 🎨

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

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

gradioをgr としてインポート

セピアを定義します( input_img ):
 セピアフィルター= np . 配列(
 [[ 0.393 , 0.769 , 0.189 ], [ 0.349 , 0.686 , 0.168 ], [ 0.272 , 0.534 , 0.131 ]]
 ）
 セピア画像= 入力画像. ドット( セピアフィルター. T )
 セピア画像/= セピア画像. max ()
 sepia_img を返す

デモ= gr . インターフェース( セピア、 gr . イメージ( シェイプ= ( 200,200 ))、 「イメージ」 )

 デモを起動します( )

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

Gradio は、画像以外にも、オーディオやビデオなどの他のメディア タイプもサポートします。これらについては公式ドキュメント[3]で読むことができます。

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

Gradio を使用すると、データベースまたはデータ ファイルからの入出力をサポートできます。たとえば、 ​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 ] , 行, 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 ( 従業員データ[ "名前" ] )
 employee_data 、 plt.gcf ()、 regression_values を返す

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

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

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

 gradioをgr としてインポート

def 計算機( 数値1 、 演算、 数値2 ):
 操作== "追加" の場合:
 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 = "おもちゃの計算機のサンプルです。お楽しみください！" 、
 ）

 デモを起動します( )

大規模なデータセットを例に読み込み、Gradio を通じてデータセットを参照したり操作したりできます。例は自動的にページ分割されます（ ​Interface​の​examples_per_page​パラメータでこれを設定することができます）。

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

Interface​ で live=True を設定すると、インターフェースを自動的に更新できます。こうすることで、ユーザー入力が変更されるたびにインターフェースが再計算されます。

 gradioをgr としてインポート

def 計算機( 数値1 、 演算、 数値2 ):
 操作== "追加" の場合:
 num1 + num2 を返す
elif 演算== "減算" :
 num1 - num2 を返す
elif 演算== "乗算" :
 num1 * num2 を返す
elif 演算== "除算" :
 num1 / num2 を返す

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

 デモを起動します( )

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

タグ🚩

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

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

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

flagged/logs.csv の内容:

 num1,操作,num2,出力
5、追加、7、12
 6、減算、1.5、4.5

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

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

flagged/logs.csv の内容:

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

これらのタグ入力は、タグ ディレクトリを手動で参照して表示することも、examples=​ パラメータでタグ ディレクトリを指定して Gradio インターフェースの例に読み込むこともできます。ユーザーにフラグ付けの理由を提供させたい場合は、Interface の flagging_options パラメータに文字列のリストを渡すことができます。ユーザーはマークするときにこれらの文字列の 1 つを選択する必要があり、これは追加の列として 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" ) を使用する場合:
 テキスト入力= gr.テキストボックス( )
 テキスト出力= gr.Textbox ( )
 text_button = gr . Button ( "Flip" )
 gr . TabItem ( "Flip Image" ) を使用する場合:
 gr . Row () の場合:
 イメージ入力= gr.Image ( )
 画像出力= gr.Image ( )
 image_button = gr . Button ( "Flip" )

 text_button . click ( flip_text 、 inputs = text_input 、 output = text_output ) です。
 image_button . click ( flip_image 、 inputs = image_input 、 output = image_output )

 デモを起動します( )

Blocksの仕組みに興味がある場合は、専用のガイド[4]をお読みください。

デモを共有🌎

Gradio デモは、launch()​ メソッドで share=True を設定することで簡単に公開できます。このような：

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

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

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

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