gradio

Gradio

Gradio は、インタラクティブな Web UI と ML デモを構築するための Python ライブラリです。このスキルでは、コア API、パターン、および例について説明します。

リファレンス

• references/examples.md - コア Gradio API を紹介する説明的な例。
• references/api-signatures.md - よく使用されるコンポーネントの API シグネチャ。
• references/event-listeners.md - 各コンポーネントがサポートするイベントの API シグネチャ。

ガイド

特定のトピックに関する詳細なガイド（必要に応じて参照してください）:

• クイックスタート
• Interface クラス
• Blocks とイベントリスナー
• レイアウトの制御
• その他の Blocks 機能
• カスタム CSS と JS
• ストリーミング出力
• ストリーミング入力
• アプリの共有
• カスタム HTML コンポーネント
• ワークフロー
• Python クライアントの始め方
• JS クライアントの始め方

コアパターン

Interface（ハイレベル）: 関数を入力/出力コンポーネントでラップします。

import gradio as gr

def greet(name):
    return f"Hello {name}!"

gr.Interface(fn=greet, inputs="text", outputs="text").launch()

Blocks（ローレベル）: 明示的なイベント配線を備えた柔軟なレイアウト。

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Greeting")
    btn = gr.Button("Greet")
    btn.click(fn=lambda n: f"Hello {n}!", inputs=name, outputs=output)

demo.launch()

ChatInterface: チャットボット UI 用のハイレベルラッパー。

import gradio as gr

def respond(message, history):
    return f"You said: {message}"

gr.ChatInterface(fn=respond).launch()

Workflow: Hugging Face Spaces、モデル、データセット、および Python 関数から、ビジュアルなノードベースのパイプラインを構築します。gr.Workflow はスタンドアロンアプリであるため、gr.Blocks コンテキスト内で作成しないでください。

import gradio as gr

def clean(text: str) -> str:
    return text.strip().lower()

def tag(text: str) -> str:
    return f"[processed] {text}"

gr.Workflow(
    bind={"clean": clean, "tag": tag},
    edges=[("clean", "tag")],
).launch()

カスタム HTML コンポーネント

タスクで既存のコンポーネントの大幅なカスタマイズが必要な場合、または Gradio に存在しないコンポーネントが必要な場合は、gr.HTML で作成できます。html_template（${} JS 式と {{}} Handlebars 構文を使用）、スコープ付きスタイル用の css_template、インタラクティブ性用の js_on_load をサポートしています。ここで、props.value はコンポーネントの値を更新し、trigger('event_name') は Gradio イベントを発火します。再利用するには、gr.HTML をサブクラス化し、API/MCP サポート用に api_info() を定義します。

完全なガイドおよび references/examples.md の例を参照してください。

サーバーモード

ユーザーが以下のいずれかをリクエストした場合は、gr.Blocks の代わりに gr.Server を使用してください:

• Gradio のバックエンドを利用した完全なカスタム UI（独自の HTML、React、Svelte など）。
• Gradio API エンドポイントと併用して、FastAPI サーバーを完全に制御（カスタム GET/POST ルート、ミドルウェア、依存性注入）。

完全なガイドおよび references/examples.md の例を参照してください。

ユーザーのユースケースが Gradio の組み込みコンポーネントまたはカスタマイズ可能な HTML コンポーネントで対応できる場合は、gr.Server を使用しないことをお勧めします。