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_info() 以支持 API/MCP。

参见完整指南以及 references/examples.md 中的示例

服务器模式

当用户请求以下任意内容时，使用 gr.Server 而非 gr.Blocks：

• 由 Gradio 后端驱动的完全自定义 UI（你自己的 HTML、React、Svelte 等）。
• 除了 Gradio API 端点之外，完全控制 FastAPI 服务器（自定义 GET/POST 路由、中间件、依赖注入）

参见完整指南以及 references/examples.md 中的示例。

如果用户的用例可以通过 Gradio 的内置组件或可自定义的 HTML 组件处理，则尽量不使用 gr.Server。