AIアプリケーション用のユーザーインターフェイスの構築Pythonのグラデーションを使用して

今日のAIモデルの有用性は、アクセス可能なユーザーインターフェイスなしで大幅に減少します。オープンソースのPython Web UIライブラリであるGradioを使用して、LLMSと非技術的なエンドユーザーの間のギャップを埋めることができます。これにより、AIプロジェクト用の迅速なプロトタイプを作成し、展開をより多くの視聴者に簡素化できます。

このチュートリアルは、通常、Web開発の経験がない機械学習エンジニアを対象としています。グラデーションの基本とコアの概念、さまざまなAIモデルタイプのインターフェイス作成、UXとインタラクティブ性の高度な機能、およびベストプラクティスの展開と共有をカバーしています。

始めましょう。

Gradio

を始めましょう

インストール

仮想環境（できればコンドラ）を作成することから始めます：

その後、PIPを使用してグレードとその依存関係をインストールできます。

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

また、jupyterノートブック内にグレードインターフェイスを直接表示できるように、iPykernelパッケージもインストールしました。このプロセスでは、作成した仮想環境をjupyterラボにカーネルとして追加する必要があります。これを行うコマンドは次のとおりです

これにより、グレーデンがインストールされているカーネルを備えたノートブックを作成できるようになります。確認するには、標準エイリアスの下にインポートし、バージョンを印刷してください。

$ pip install gradio ipykernel

基本的な概念と用語

「Hello World」の例を通じて、その重要な概念と用語を学習することにより、グレードに飛び込みます。

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

上記のコードをセルで実行すると、出力はカスタムグリーティングメッセージを返す小さなインタラクティブなインターフェイスになります：

import gradio as gr
print(gr.__version__)
4.37.1

Gradioは、いくつかの重要な概念を中心に展開しています：

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

インターフェイス

：UISを作成するためのコアクラス。

コンポーネント

：テキストボックス、画像、オーディオなどの入力および出力要素。現在、30を超える組み込みコンポーネントがあります。

1. 関数：入力コンポーネントから情報を処理し、出力コンポーネントで表示する結果を返すPython関数。
2. 起動：グラデーションアプリを開始する方法
上記の上記では、テキスト入力を取得して返す挨拶関数を作成しました。このため、入力コンポーネントと出力コンポーネントは、インターフェイスクラス内のテキストとして指定されています。
3. 最後に、ローカルサーバーを開始する起動方法を呼び出しています。誰でもUIを利用できるようにするには、共有パラメーターをtrueに設定できます。これにより、SSHトンネルが開始され、Gradioアプリを公開されているWebページに展開します。 グラデーションコンポーネント
4. さまざまなコンポーネントをいじくり回す時間と、グラデーションアプリを構築しながらページに配置する方法に費やします。それでは、あなたが自由に使えるものを詳しく見てみましょう。

   入力コンポーネントと出力コンポーネント

   Gradioは、インタラクティブなインターフェイスを構築するための幅広いコンポーネントを提供しています。これらのコンポーネントは通常、入力と出力の2つのカテゴリに分割されます。

   入力コンポーネントを使用すると、ユーザーは基礎となるプロセッサにデータを提供できます（これは任意のPython関数になります）。いくつかの一般的な入力は次のとおりです
   textbox
   • 画像
   • audio
   • スライダー
   • ドロップダウン
   ここに上記のコンポーネントの一部を使用するダミーインターフェイスがあります。
   この例では、Process_Inputs関数には5つのパラメーターが必要です。したがって、5つの入力コンポーネントを作成し、入力に渡す必要があります。入力コンポーネントの数は、必要な関数パラメーターの数と一致する必要がありますが、これは厳密なルールではありません。エラーや警告を回避するには、UIからのユーザー入力を必要としないパラメーターのデフォルト値を設定します。

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   最初の例のようなプレーン文字列テキストの代わりに、テキストボックスクラスを使用して入力コンポーネントを指定する方法に注意してください。専用クラスを使用して、入力コンポーネントと出力コンポーネントを指定してカスタマイズ可能にすることをお勧めします。たとえば、すべてのコンポーネントクラスには有用なラベル属性がありますが、スライダーとドロップダウンには範囲と利用可能なオプションを指定するための引数があります。

   多くの入力コンポーネントを使用して、出力を表示することもできます。いくつかの一般的なシナリオがあります：

   

   ラベル：テキストまたは分類の結果を表示するため
   画像：処理された画像または生成された画像を表示する
   オーディオ：処理または生成されたオーディオ
   を再生するため
   • プロット：グラフまたはチャートを表示するため
   入力と同様に、出力コンポーネントの数は、処理関数からの返された値の数と一致する必要があります。 コンポーネントの外観のカスタマイズ
   • Gradioを使用すると、ニーズに合わせてコンポーネントの外観をカスタマイズできます。カスタマイズされたテキストボックスを使用する例は次のとおりです
   この例では、行数を指定し、プレースホルダーと情報テキストを追加し、出力のコピーボタンを含めて、テキストボックスコンポーネントをカスタマイズしました。

   さまざまなコンポーネントとそのプロパティを実験して、AIアプリケーションの要件に最適なインターフェイスを作成します。コンポーネントに対してどのようなプロパティを変更できるかを確認するには、ドキュメントにアクセスできます。クラス名の後のJupyter Labのオペランド：

   $ pip install gradio ipykernel

   LLMSのためのインターフェイスの構築

   LLMSによって駆動される2つの現実世界のテキストと画像ベースのインターフェイスを作成することで、学んだことすべてをまとめましょう。

   最初に、英語からトルコ語、スペイン語、または中国語への言語翻訳者を構築します。

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   最初に、translate_text関数を定義します。その体には、Openai APIキーを設定し、言語マップを作成します。次に、翻訳のプロンプトを構築します。次に、Try-Exceptブロック内で、システムプロンプトを使用してChatCompletionエンドポイントにリクエストを送信します。最終的に、最初の選択肢を返します。
   さて、インターフェイスを作成できます：

   $ pip install gradio ipykernel

   以前のインターフェイスのコードと同様にコードは簡単ですが、いくつかの新しいプロパティを導入しています。
   テキストボックスのタイプ引数は、プレーンテキスト入力フィールドをパスワード入力に変更し、テキストを隠します。 インターフェイスクラスのタイトルと説明の引数は、ページの上部の中心にH1タイトルと字幕を追加します。
   • ここに結果があります：

   アプリを自分で提供するのではなく、アプリの一部としてユーザーのAPIキーを尋ねている理由を疑問に思うかもしれません。その理由は、GradioがUISを展開する方法に関係しています。

   独自のAPIキーを環境変数（標準的な慣行）として提供した場合、環境変数にアクセスできないため、公開されているアプリバージョンが機能しません。展開セクションでは、アプリをハギングフェイススペースに展開することにより、これを修正する方法を確認します。

   画像を生成するために別のUIを作成しましょう：

   APIキーの2つの入力と、シュールな画像でキャプチャしたい概念を指定します。次に、画像クラスを使用して生成された画像の出力コンポーネントを1つ作成します。その価値引数をSTRに設定すると、コンポーネントはURLから画像をダウンロードして表示できます。これはまさに必要なものです。

   そして、ここに結果があります：

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   古典的なMLモデル用の構築インターフェイス

   import gradio as gr
   print(gr.__version__)
   4.37.1

   次に、古典的な表形式モデルのインターフェイスを作成しましょう。 Seabornで利用できるダイヤモンドデータセットを使用します。

   新しい作業ディレクトリとApp.py内の新しいスクリプトを作成することから始めます。次に、データをロードするこのGitHub要素のコードを貼り付け、Scikit-Learnパイプラインを使用して処理し、ランダムフォレストレギッションモデルをトレーニングします。

   次のステップは、ダイヤモンドデータセットに機能があるのと同じ数の入力を受け入れる処理関数を作成することです。

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   この関数は、これらの入力をデータフレームに変換し、訓練されたモデルパイプラインの.predict（）メソッドに渡します。最終的に、それは予測された価格で文字列を返します。

   ここで、インターフェイスクラスはこの関数の署名と一致する必要があります。フィーチャを処理するための9つの入力コンポーネントと、予測価格を表示するための1つの出力：
   クラス内では、カテゴリ機能の3つのドロップダウンを作成します。オプションには、各機能の一意のカテゴリが入力されています。また、数値機能を受け入れるために6つのスライダーコンポーネントを作成します。スライダーの範囲は、各機能の最小値と最大値によって決定されます。

   $ pip install gradio ipykernel

   今やらなければならないのは、アプリを実行してデプロイするためにスクリプトを実行することだけです：

   ここに結果があります：

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   ベストプラクティスと最適化のヒントについては、以下のベストプラクティスセクションにスキップしてください。 グラデーションアプリの展開

   単一の引数を有効にすることで、グレードアプリを展開するのがどれほど簡単かをすでに見てきました。もちろん、この方法の欠点は、デモが72時間以内に期限切れになることです。したがって、グラデーションを展開する推奨方法は、ハギングフェイススペースを使用することです。 Huggingfaceは2021年にグラデーションを取得し、2つのプラットフォーム間の統合をシームレスにしました。

   したがって、このチュートリアルまたはグレードで作成する将来のアプリについては、huggingface.coで無料アカウントにサインアップして、設定＆gtに移動します。アクセストークンを生成するためのトークン：

   トークンは一度だけ表示されますので、必ず安全に保管してください。

   このトークンを使用すると、スペースでの永続的なホスティングを使用すると、必要な数のグラデーションアプリを展開できます。例として、前のセクションからダイヤモンド価格の予測モデルを展開すると、驚くほど簡単になります。

   あなたがしなければならないのは、UIスクリプトを使用してディレクトリに移動し、端末にグラデーションデプロイを呼び出すことです。

   端末は、スクリプトを機能するハギングフェイス空間に変換することを進めます。次のような詳細を尋ねます
   生成したアクセストークン
   スペースタイトル：これは、展開後のスペースURLの一部になります

   Gradio UIコードを含むスクリプトの名前（app.pyデフォルト）

   スペースのハードウェア。 cpus（free）

   のみを使用するには、空のままになります
   スクリプトが使用する環境変数（これは、APIキーとユーザーの秘密を安全に保存する場所です）依存関係 - Enter
を押して1つずつ入力します
そして端末は、展開されたスペースリンクを提供します。これがどのように見えるかです：
7. この展開方法のもう1つの素晴らしい点は、Gradioがデモを自動的に機能するREST APIに自動的に変換することです。アクセスしてクエリするための指示は常に下部にあります：

   

   したがって、一度に、非技術ユーザー向けのアプリケーション用の永続的なUIホスティングと、同僚や開発者の友人向けのREST APIの両方があります。

   デモをWebページに埋め込む、アプリにGoogle認証を追加するなどの展開と共有オプションについては、Gradioのドキュメントの「アプリの共有」セクションにアクセスしてください。

   グラデーションベストプラクティスとヒント
   グレードとのユーザーインターフェイスを開発する場合、ベストプラクティスに従うことで、アプリケーションのユーザーエクスペリエンスと保守性を大幅に向上させることができます。ここにいくつかの重要な推奨事項があります：
   1。組織と保守性のためにスクリプトを使用します
   Pythonスクリプトでグレードアプリケーションを整理して、より良いバージョン制御、コラボレーション、展開を展開します。

   2。コンポーネントのスペース割り当てを最適化します

   適切なサイジングおよびレイアウトツール（例：gr.column（）、gr.row（））を使用して、バランスの取れた応答性インターフェイスを確保します。

   3。包括的な情報を提供
   「情報」と「ラベル」属性を使用して、各コンポーネントに明確な指示とコンテキストを提供します。

   4。大きな機能セットを効率的に処理します

   多くの機能を備えたモデルの場合、ファイル入力（CSV、JSON）を使用して、バッチ予測を有効にし、インターフェイスを簡素化します。

   5。環境変数を適切に管理
   Python-Dotenvをローカル開発に使用し、展開用のフェイススペースを抱き締める変数を設定します。

   6。エラー処理と検証を実装します

   入力を検証し、クリアなエラーメッセージを提供し、優雅なエラー処理にtry-exceptブロックを使用してください。

   7。パフォーマンスを最適化
   キャッシュ、大規模なモデルの怠zyなロードを実装し、長期にわたるタスクにgr.loadingStatus（）を使用します。

   8。アクセシビリティのためのデザイン

   高いコントラストを確保し、画像にALTテキストを提供し、すべてのインタラクティブな要素のキーボードナビゲーションを有効にします。

   9。プログレッシブ開示を実装
   アコーディオンまたはタブを使用して複雑なインターフェイスを整理し、必要に応じて高度なオプションを明らかにします。

   10。定期的に更新および維持

   依存関係を更新し、バグを監視し、ユーザーのフィードバックに基づいて継続的に改善します。

   11。 Huggingfaceリソースを活用してください
   モデルリポジトリやデータセットを含むグラデーションとのシームレスな統合のために、ハギングフェイスツールとリソースを利用してください。

   12。 Huggingfaceハブで大きなモデルをホストします

   大きな表形式モデルの場合は、パフォーマンスを向上させ、ローカルストレージ要件を削減するために、ハグFaceハブにアップロードし、グラデーションスクリプトに直接読み込みます。

   13。 Huggingfaceデータセットを利用してください

   大規模なデータセットの場合は、ハグFaceハブにアップロードし、グラデーションアプリケーションに直接アクセスして、データ管理を合理化し、読み込み時間を改善します。

   結論とさらなるリソース

   この記事では、Gradioを使用してAIアプリケーションのユーザーインターフェイスを構築することの基本を学びました。 Gradioは複雑なインターフェイスを構築するためのさらに多くの機能を提供しているため、表面の下に浸しました。たとえば、インターフェイス状態を使用すると、アプリがある関数呼び出しから別の機能への出力を覚えておくことができます。リアクティブインターフェイスユーザー入力が変更されるとすぐにUIを動的に変更します。ブロックを使用すると、カスタムレイアウトとデザインを使用してアプリを作成できます。

   同様に、これらの関連するリソースをチェックして、より多くのコンテンツを確認してください：
   データサイエンススタックに追加するための10個のPythonパッケージ
   7傑出したAIアプリケーションを構築するための重要な生成AIツール

• 5 Gen AIモデルを使用して構築できるプロジェクト
機械学習コース用の
• CI/CD
• TopicsArtificial IntelligencePython

以上がAIアプリケーション用のユーザーインターフェイスの構築Pythonのグラデーションを使用しての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。