技術 約3分で読めます

Gradio 6のgr.HTMLで、Pythonファイル1つから完全なWebアプリが作れるようになった

Gradio Python Webアプリ AI

Hugging FaceがGradio 6で追加したgr.HTMLがなかなか強力だった。HTML、CSS、JavaScriptをすべてPythonファイルの中に書いて、ビルドステップなしでインタラクティブなWebアプリを作れる。LLMにコードを生成させて一発でアプリを立ち上げる「ワンショット開発」との相性が抜群に良い。

gr.HTMLの基本的な仕組み

gr.HTMLはGradioのコンポーネントで、以下の4つの要素をPythonコード内に記述する。

  • html_template — HTMLテンプレート。${value.xxx}で状態を注入できる
  • css_template — スコープ付きCSS。他のコンポーネントに影響しない
  • js_on_load — JavaScriptのイベントハンドリングとDOM操作
  • value — PythonとJavaScript間で自動同期される状態
gr.HTML(
    value={"count": 0},
    html_template="<button>Clicked ${value.count} times</button>",
    css_template="button { background: #667eea; color: white; }",
    js_on_load="""
        element.querySelector('button').onclick = () => {
            props.value = { count: props.value.count + 1 };
            trigger('change');
        };
    """
)

props.valueへの代入でJavaScript側の状態を更新し、trigger('change')でPython側に同期する。双方向データバインディングが自動で動く仕組みだ。

再利用可能なコンポーネントの作成

gr.HTMLをサブクラス化することで、gr.Imageやgr.Sliderと同じように扱えるカスタムコンポーネントを作れる。

class Heatmap(gr.HTML):
    def __init__(self, value=None, theme="green", **kwargs):
        super().__init__(
            value=value,
            theme=theme,
            html_template=TEMPLATE,
            css_template=STYLES,
            js_on_load=SCRIPT,
            **kwargs
        )

サブクラス化したコンポーネントはGradioのイベントハンドラ（.change()、.click()など）がそのまま使える。MLパイプラインに独自のビジュアライゼーションを組み込むときに便利だ。

実用的なユースケース

Hugging Faceのブログでは以下のような実例が紹介されている。

プロダクティビティ系 — ポモドーロタイマー（ピクセルアートのアニメーション付き）、GitHubコントリビューションヒートマップ、カンバンボード（ドラッグ＆ドロップ、インライン編集、リアルタイム検索対応）

3D・メディア系 — Three.jsを使ったカメラコントロールビューポート、リアルタイム音声書き起こし（WPMカウンター付き）

ML特化 — 物体検出のバウンディングボックスとセグメンテーションマスクの表示、ポーズ推定のスケルトン描画

どれもPythonファイル1つで完結する。Reactやビルド設定は不要。

LLMとの相性

gr.HTMLの設計が一番活きるのは、LLMにコードを生成させるケースだろう。従来のWebアプリ開発では、HTML・CSS・JavaScript・Python（またはバックエンド言語）を別々のファイルに分け、ビルド設定やデプロイパイプラインを整える必要があった。

gr.HTMLならすべてが1つのPythonファイルに収まる。LLMに「こういうUIのアプリを作って」と指示すると、ファイル1つで動くコードが返ってくる。gradio app.pyで即座に起動でき、リロードモードを使えば秒単位でイテレーションが回る。Hugging Face Spacesへのデプロイもgradio deploy一発だ。

Gradioは元々MLモデルのデモ用UIフレームワークとして使われてきたが、gr.HTMLの追加で汎用のWebアプリフレームワークとしての性格が強まった。ビルドレスで動く点とLLM生成コードとの親和性の高さは、AI時代のプロトタイピングツールとして理にかなっている。

元記事: Hugging Face Blog