Gradio-Lite：ブラウザ内で完全に動作するサーバーレスのGradio
グラディオ・ライト：ブラウザ内で完全に動作するサーバーレスのグラディオ
Gradioは、インタラクティブな機械学習アプリを作成するための人気のあるPythonライブラリです。従来、Gradioアプリケーションはサーバーサイドのインフラストラクチャを必要としていましたが、それはアプリケーションをホストする必要がある開発者にとってハードルとなる場合がありました。
それにGradio-lite (@gradio/lite)が登場します。これは、Pyodideを利用してGradioを直接ブラウザで実行するためのライブラリです。このブログ記事では、@gradio/liteが何であるか、例のコードを見て、Gradioアプリケーションを実行するために提供する利点について議論します。
@gradio/liteとは何ですか？
@gradio/liteはJavaScriptライブラリで、ブラウザ内で直接Gradioアプリケーションを実行できるようにします。これは、PythonランタイムのWebAssembly版であるPyodideを利用して、ブラウザ環境でPythonコードを実行することができるためです。@gradio/liteを使用すると、通常のPythonコードを使用してGradioアプリケーションを作成し、サーバーサイドのインフラストラクチャを必要とせずにブラウザ内でシームレスに実行することができます。
はじめに
@gradio/liteで「Hello World」のGradioアプリを作成しましょう。
1. JSとCSSのインポート
既にHTMLファイルを持っていない場合は、新しいHTMLファイルを作成してください。以下のコードを使用して、@gradio/liteパッケージに対応するJavaScriptおよびCSSをインポートします。
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head></html>注意：一般的には、利用可能な最新バージョンの@gradio/liteを使用する必要があります。利用可能なバージョンはこちらで確認できます。
2. <gradio-lite>タグを作成する
HTMLページの本文内の任意の場所に（Gradioアプリをレンダリングする場所に）開始タグと終了タグの<gradio-lite>を作成します。
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> </gradio-lite> </body></html>注意： <gradio-lite>タグにtheme属性を追加すると、テーマを強制的にダークまたはライトにすることができます（デフォルトでは、システムのテーマが反映されます）。例：
<gradio-lite theme="dark">...</gradio-lite>3. タグの内部にGradioアプリを記述する
これで、通常どおりPythonでGradioアプリを記述します！これがPythonであるため、空白やインデントの位置が重要です。
<html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Hello, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html>ここまでです！これでブラウザでHTMLページを開き、Gradioアプリが表示されるはずです！ただし、Pyodideがブラウザにインストールされるのに少し時間がかかる場合があるため、最初にGradioアプリが読み込まれるまで少し待つ必要があります。
デバッグに関する注意: Gradio-liteアプリケーションでエラーを確認するには、Webブラウザでインスペクタを開いてください。すべてのエラー（Pythonのエラーも含む）はそこに表示されます。
追加例：追加ファイルと要件の追加
複数のファイルで構成されるGradioアプリを作成したい場合はどうすればいいですか？また、カスタムのPython要件を持つアプリを作成したい場合はどうすればいいですか？それらはどちらも@gradio/liteで実現できます！
複数のファイル
@gradio/liteアプリ内で複数のファイルを追加するには、<gradio-file>タグを使用します。必要な数だけ<gradio-file>タグを追加できますが、それぞれにname属性が必要で、Gradioアプリのエントリーポイントにはentrypoint属性が必要です。
以下に例を示します：
<gradio-lite><gradio-file name="app.py" entrypoint>import gradio as grfrom utils import adddemo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")demo.launch()</gradio-file><gradio-file name="utils.py" >def add(a, b): return a + b</gradio-file></gradio-lite>追加要件
Gradioアプリに追加の要件がある場合、通常はmicropipを使用してブラウザにインストールすることができます。私たちはこれを便利にするためのラッパーを作成しました：要件をrequirements.txtの構文と同じようにリストアップし、<gradio-requirements>タグで囲んでください。
ここでは、transformers_js_pyをインストールして、テキスト分類モデルをブラウザで直接実行しています！
<gradio-lite><gradio-requirements>transformers_js_py</gradio-requirements><gradio-file name="app.py" entrypoint>from transformers_js import import_transformers_jsimport gradio as grtransformers = await import_transformers_js()pipeline = transformers.pipelinepipe = await pipeline('sentiment-analysis')async def classify(text): return await pipe(text)demo = gr.Interface(classify, "textbox", "json")demo.launch()</gradio-file></gradio-lite>試してみてください: この例を実行することができるHugging Face Static Spaceで実行されているのを確認できます。これにより、インターネットに接続せずに機械学習モデルを実行できます！
@gradio/liteの利点
1. サーバーレス展開
@gradio/liteの主な利点は、サーバーインフラストラクチャの必要性をなくすことです。展開を簡素化し、サーバー関連のコストを削減し、他の人とGradioアプリケーションを簡単に共有できます。
2. 低レイテンシ
@gradio/liteはブラウザで実行されるため、ユーザーにとって低レイテンシのインタラクションを提供します。データがサーバーに送信される必要がないため、より高速な応答とスムーズなユーザーエクスペリエンスが実現されます。
3. プライバシーとセキュリティ
すべての処理がユーザーのブラウザ内で行われるため、@gradio/liteはプライバシーとセキュリティを強化します。ユーザーデータはデバイス上に残り、データの取り扱いに関して安心感を提供します。
制限事項
-
現在、
@gradio/liteを使用する際の最大の制限事項は、通常、ブラウザでのGradioアプリの初回読み込みに時間がかかることです（通常は5〜15秒）。これは、ブラウザがPythonコードをレンダリングする前にPyodideランタイムを読み込む必要があるためです。 -
すべてのPythonパッケージがPyodideでサポートされているわけではありません。
gradioや他の多くの人気のあるパッケージ（numpy、scikit-learn、transformers-jsなど）はPyodideでインストールできますが、アプリに多くの依存関係がある場合は、依存関係がPyodideに含まれているか、micropipを使用してインストールできるかを確認する価値があります。
<h2 id="try-it-out">試してみて！</h2>
<p>次のコードをローカルの<code>index.html</code>ファイルにコピー＆ペーストして、ブラウザで開くことで<code>@gradio/lite</code>をすぐに試すことができます：
<pre><code><html> <head> <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" /> </head> <body> <gradio-lite> import gradio as gr def greet(name): return "Hello, " + name + "!" gr.Interface(greet, "textbox", "textbox").launch() </gradio-lite> </body></html></code></pre>
<p>また、Gradioのウェブサイト上にはプレイグラウンドも用意されており、コードをインタラクティブに編集して結果を即座に確認することができます！</p>
<p>プレイグラウンド：<a class="uri" href="https://www.voagi.com/smart-travel-itinerary-suggester-with-langchain-google-maps-api-and-gradio-part-3.html">https://www.gradio.app/playground</a></p>We will continue to update VoAGI; if you have any questions or suggestions, please contact us!
Was this article helpful?
93 out of 132 found this helpful
Related articles
