Gradio Server: カスタムフロントエンドと Gradio バックエンドの統合

Hugging Face は gradio.Server を導入しました。このツールは、開発者が React、Svelte、またはバニラ HTML/JS などのフレームワークを使用して完全にカスタムフロントエンドを構築できるようにし、Gradio のバックエンドインフラストラクチャを活用します。これにより、Gradio の標準コンポーネントを超える UI 機能が必要な複雑なウェブアプリケーションを、Gradio のキューシステム、同時実行管理、そして Hugging Face Spaces の ZeroGPU との統合を犠牲にせずに作成できます。

gradio.Server の技術アーキテクチャ

gradio.Server は FastAPI を拡張し、カスタムルート、ミドルウェア、柔軟なレスポンスタイプなど、FastAPI アプリケーションの完全な機能を提供しつつ、Gradio の API エンジンと統合します。このハイブリッドアプローチにより、開発者は標準的な FastAPI ルート（例: 静的 HTML を提供する @app.get("/")）と、特化した Gradio API エンドポイントを共存させることができます。

@app.api() の役割

標準的な FastAPI ルート（例: @app.post()）とは異なり、@app.api() デコレータは関数を Gradio のキューイングエンジンでラップします。これにより、いくつかの重要な技術的利点が得られます：

  • Concurrency Control: リクエストは直列化され、複数のユーザーが同時に GPU リソースを競合することを防ぎ、アプリケーションのクラッシュや出力の破損を防止します。
  • ZeroGPU Integration: @spaces.GPU と併用すると、GPU の割り当てが Hugging Face Spaces 上で自動的に処理されます。
  • Client Compatibility: @app.api() で定義されたエンドポイントは gradio_client とネイティブに互換性があり、他のアプリケーションやスクリプトからバックエンドをプログラム的に呼び出すことができます。

実装例: Text Behind Image

これらの機能を示すために、Hugging Face は「Text Behind Image」を開発しました。このエディタは写真の背景を除去し、ユーザーが前景の対象と背景の間にスタイリッシュなテキストを配置できるようにします。

バックエンド実装

バックエンドは約 50 行の Python で実装されています。画像セグメンテーションに BiRefNet モデルを使用し、透過マスクを生成します。remove_background 関数は @app.api() でデコレートされ、Gradio エンジンによってキューイングおよび管理されます。一方、標準的な FastAPI ルートが index.html フロントエンドを提供します。

フロントエンド実装

フロントエンドは、自己完結型のバニラ HTML/CSS/JS アプリケーションで、以下の特徴があります：

  • Layered Rendering: CSS の z-index で管理される 3 層のキャンバス（背景、テキスト、前景）です。
  • Rich Control Panel: 3D 押し出し、遠近変換、フォント管理など、テキストスタイリング用の 20 以上のパラメータを備えたリッチなコントロールパネルです。
  • Gradio JS Client: フロントエンドは Gradio JS Client を使用してバックエンドと通信します。生の fetch() 呼び出しの代わりにこのクライアントを使用することで、アプリケーションは Gradio のキューへのアクセスを維持し、同時実行が管理され GPU リクエストの衝突を防ぎます。

比較: 標準 Gradio と gradio.Server

gradio.Server は、デザインの自由度とインフラの安定性のトレードオフを解消します。

機能 gradio.Server 前 gradio.Server 後
UI Flexibility Gradio エコシステムを離れたカスタム UI が必要だった カスタム UI を Gradio のバックエンドエンジンと組み合わせられる
Static Content Gradio アプリから静的 HTML を提供するネイティブな方法がなかった @app.get("/") で任意の静的コンテンツを提供できる
API Access gradio_client はコンポーネントベースのアプリに限定されていた @app.api() エンドポイントは完全にクライアント互換である
Infrastructure Gradio のインフラかデザインの自由度かのどちらかを選択する必要があった 開発者は両方を同時に得られる

今後の拡張

カスタムフロントエンドに加えて、gradio.Server は以下のサポートを導入します：

  • MCP Tool Registration: ツール統合のために @app.mcp.tool() を使用します。
  • SSE Streaming: Server-Sent Events を使用したリアルタイム更新を可能にします。
  • Batch Processing: 大規模リクエストの処理を改善します。
  • Multi-page Applications: 複数ページ間で共有状態を管理するパターンを提供します。

SUMMARY: Hugging Face は gradio.Server を導入しました。これは FastAPI の拡張で、開発者が任意のカスタムフロントエンドフレームワークを使用できるようにしつつ、Gradio のキューイング、API インフラストラクチャ、ZeroGPU サポートを保持します。

TITLE: Gradio Server: カスタムフロントエンドと Gradio バックエンドの統合

Sources