Python で最低限の UI を作れる Gradio.
「試しに作ってみたのでちょっと披露したい」くらいの欲望を Python さえ書ければ満たすことができるということですごく便利なのだけど、 Heroku なり Railway などのサーバーにホスティングして、動かし続けなきゃいけないという意味では、ちょっと使い勝手が悪かった。
しかしながら、そんな時代も終わった。 Gradio-Lite を使えば、ブラウザさえあれば Gradio が動く。
以下は、実際に操作ができる！
すごくない？
これを Google Site などに埋め込めば、社内の Google アカウントを持つ人間しかアクセスできない Gradio 環境ができあがる。
やばいね？
ここでは Gradio-Lite の簡単な使い方の説明と、それを便利に扱うためのコンパイラを作ったので、それを紹介する。
Gradio-Lite#
正直、上のページが簡潔すぎて直接読んでもらったほうが速いかも。
Gradio-Lite は Pyodide で実装されていて、 WebAssembly により Python のコードを JavaScript にコンパイルし、ウェブブラウザ上で実行できるようにしている。
例えば以下を HTML ファイルとして保存すれば、 <gradio-lite> タグの中に記述された 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 をこのページに埋め込んだものが以下:
解説すると、
<head>タグで Gradio-Lite に関連した JS と CSS をインポート。これは必ず書く<body>内部の<gradio-lite>のタグの中に Gradio で実装した UI の Python コードが書いてある
これが基本。
pip install したいライブラリはどうするか？
→ それは <gradio-requirements> の中に書けば OK.
一枚の Python スクリプトに収める必要がある？面倒だな…
→ それは <gradio-file> で分離すれば OK.
上ふたつを反映したのが、以下のようなかんじ:
<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-requirements>
pandas
openai
</gradio-requirements>
<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add
demo = 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>
</body>
</html>
これを埋め込んだのが、このページの冒頭のやつ。
Gradio-Lite コンパイラ#
Gradio を app.py などで書いて動作確認したものを、上の記法に従って HTML ファイルにする必要がある。
このコピペが面倒なので、 Python のコードから上の HTML に変換するスクリプトを書いた。名付けて Gradio-Lite Compiler.
| import sys | |
| import os | |
| from datetime import datetime | |
| def convert_to_gradio_lite(python_files, requirements_file): | |
| # gradio-requirements.txt からの依存関係の取得 | |
| dependencies = [] | |
| if requirements_file: | |
| with open(requirements_file, "r") as file: | |
| dependencies = [line.strip() for line in file] | |
| # Gradio Lite の HTML テンプレートを作成 | |
| html_template = """ | |
| <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-requirements> | |
| {} | |
| </gradio-requirements> | |
| {} | |
| </gradio-lite> | |
| </body> | |
| </html> | |
| """ | |
| # 依存関係を Gradio Lite の HTML に挿入 | |
| requirements = "\n".join(dependencies) | |
| # 各 Python ファイルを処理し、<gradio-file> タグを作成 | |
| gradio_files = [] | |
| for python_file in python_files: | |
| with open(python_file, "r") as file: | |
| python_code = file.read() | |
| entrypoint = "entrypoint" if python_file == python_files[0] else "" | |
| gradio_file = f""" | |
| <gradio-file name="{os.path.basename(python_file)}" {entrypoint}> | |
| {python_code} | |
| </gradio-file> | |
| """ | |
| gradio_files.append(gradio_file) | |
| # 完成した HTML を返す | |
| return html_template.format(requirements, "\n".join(gradio_files)) | |
| # コマンドライン引数からファイルパスを取得 | |
| python_files = sys.argv[1:-1] | |
| requirements_file = sys.argv[-1] if len(sys.argv) > 1 else None | |
| # Gradio Lite への変換 | |
| gradio_lite_html = convert_to_gradio_lite(python_files, requirements_file) | |
| # タイムスタンプ付きのファイル名を生成 | |
| timestamp = datetime.now().strftime("%Y-%m-%d_%H%M%S") | |
| output_file = f"index_{timestamp}.html" | |
| # 結果をファイルに出力 | |
| with open(output_file, "w") as file: | |
| file.write(gradio_lite_html) | |
| print(f"Gradio Lite HTML has been generated and saved as {output_file}") |
以下は README:
Gradio Lite コンバーターは、Python ファイルを Gradio Lite と互換性のある単一の HTML ファイルに変換する Python スクリプトです。Gradio Lite を使用して Python コードの Web インターフェースを簡単に作成できます。
前提条件#
- Python 3.x
- スクリプトを実行するために外部の依存関係は必要ありません
使用方法#
Gradio Lite 形式に変換したい Python ファイルを用意します。各ファイルに Gradio インターフェースに必要なコードが含まれていることを確認してください。
gradio-requirements.txtファイル（オプション）を作成し、Python コードに必要な依存関係を 1 行ずつリストアップします。例えば：numpy pandas matplotlibターミナルまたはコマンドプロンプトを開き、
convert_script.pyファイルが配置されているディレクトリに移動します。次のコマンドを実行して、Python ファイルを Gradio Lite HTML に変換します：
python convert_script.py file1.py file2.py ... fileN.py gradio-requirements.txtfile1.py、file2.py、…、fileN.pyを Python ファイルの名前に置き換え、gradio-requirements.txtを要件ファイルのパス（該当する場合）に置き換えます。例えば：
python convert_script.py app.py utils.py gradio-requirements.txtスクリプトは Python ファイルを処理し、Gradio Lite と互換性のある HTML ファイルを生成し、
index_YYYY-MM-DD_HHMMSS.htmlの形式でタイムスタンプベースのファイル名で保存します。生成された HTML ファイルは、
convert_script.pyファイルと同じディレクトリに保存されます。スクリプトは、生成された HTML ファイルのファイル名を示すメッセージを表示します。生成された HTML ファイルを Web ブラウザで開いて、Gradio Lite インターフェースを表示します。
注意事項#
コマンドライン引数で指定された最初の Python ファイルは、エントリーポイントファイルと見なされ、
<gradio-file>タグにentrypoint属性が設定されます。gradio-requirements.txtファイルが提供されている場合、スクリプトは指定された依存関係を生成された HTML ファイルの<gradio-requirements>タグに含めます。生成された HTML ファイルには、jsDelivr CDN からの必要な Gradio Lite JavaScript および CSS ファイルが含まれています。これらのファイルを適切にロードするには、インターネット接続が必要です。
スクリプトは、Python コードが Gradio Lite と互換性があり、適切な構造と規則に従っていることを前提としています。
例#
app.pyとutils.pyの 2 つの Python ファイルと、次の内容のgradio-requirements.txtファイルがあるとします：
numpy
pandas
これらのファイルを Gradio Lite HTML に変換するには、次のコマンドを実行します：
python convert_script.py app.py utils.py gradio-requirements.txt
スクリプトは、例えばindex_2023-06-17_123456.htmlという HTML ファイルを生成します。これを Web ブラウザで開いて Gradio Lite インターフェースを表示できます。