Gradio 6 gr.HTML: ワンショット Web アプリ開発

Gradio 6 は gr.HTML コンポーネントに強力なアップデートを導入し、開発者がカスタムテンプレート、スコープド CSS、JavaScript を使用して完全にインタラクティブな Web コンポーネントを構築できるようにしました。このアップデートにより、状態管理やバックエンド統合を含む複雑なフロントエンドインターフェースを単一の Python ファイル内で作成でき、別個のビルドステップや外部フロントエンドフレームワークが不要になります。

gr.HTML を使用したカスタムインタラクティブ性

gr.HTML はフロントエンドとバックエンドのロジック統合のための簡素化された API をサポートするようになりました。すべてのコンポーネントは動作を管理するために 3 つの主要テンプレートを使用します：

  • html_template: HTML を使用してコンポーネントの構造を定義します。
  • css_template: コンポーネントのスタイリングのためのスコープド CSS を提供します。
  • js_on_load: JavaScript のインタラクティブ性とクライアント側ロジックを処理します。

状態は双方向同期で管理されます: ${value} は Python の状態を HTML に注入し、props.value は JavaScript からその状態を更新します。trigger('change') 関数は、これらの変更を Python バックエンドに同期させるために使用されます。

再利用可能なコンポーネントアーキテクチャ

開発者は gr.HTML をサブクラス化することで再利用可能なカスタムコンポーネントを作成できます。サブクラスの __init__ メソッド内で html_template、css_template、js_on_load を定義することで、カスタムコンポーネントは gr.Image() や gr.Slider() などの組み込み Gradio コンポーネントと同様に Gradio Blocks 内で使用できます。

アプリケーションのユースケース

強化された gr.HTML の機能により、React や別個のフロントエンドライブラリを必要とせずに多様なアプリケーションタイプの開発が可能になります：

生産性・ビジネスツール

  • Pomodoro Timer: 単一ファイル内で成長するピクセルアートの木とセッション追跡のための複雑な CSS キーフレームアニメーションを実装します。
  • Kanban Board: js_on_load を介して接続されたネイティブ HTML5 のドラッグ＆ドロップイベントを備え、trigger('change') により Python と同期します。
  • GitHub Contribution Heatmap: インタラクティブなセル、複数のカラーテーマ、リアルタイム統計更新を含みます。

クリエイティブ・機械学習特化コンポーネント

  • Spin-to-Win Wheel: スムーズな CSS アニメーションと、再描画間で永続的な回転状態を使用します。
  • Detection Viewer: オブジェクト検出や姿勢推定パイプラインのためにバウンディングボックス、セグメンテーションマスク、キーポイントを描画する、特化した gr.HTML サブクラスです。
  • 3D Camera Control: Gradio 内に Three.js ビューポートを統合し、ユーザーが Qwen のような画像編集モデルの方位角、仰角、距離を制御できるようにします。
  • Real-time Speech Transcription: カスタム gr.HTML コンポーネントを利用して、アニメーション化されたステータスバッジと、Mistral の Voxtral のようなモデル向けのリアルタイムの単語数/分 (WPM) カウンターを提供します。

「Vibe Coding」への影響

このアップデートは、LLM を使用してコードを生成する開発者の開発サイクルを大幅に加速させます。アプリ全体（フロントエンド、バックエンド、状態）が 1 つの Python ファイルに収まっているため、フィードバックループはシンプルなサイクルに縮小されます：要件を LLM に説明し、コードを生成し、gradio app.py で実行するだけです。

このワークフローは Gradio のリロードモードによりさらに最適化され、ほぼ瞬時のイテレーションが可能です。完成したアプリは gradio deploy を使用して Hugging Face Spaces にデプロイしたり、demo.launch(share=True) で一時的なリンクを共有したりできます。

Sources