Gradio 的 gr.HTML 如何用单文件构建任意 Web 应用

Gradio 6 悄然发布了一个非常强大的功能：gr.HTML 现在支持自定义模板、作用域 CSS 和 JavaScript 交互。这意味着你几乎可以构建任何 Web 组件——而 Claude（或任何其他前沿 LLM）可以一次性生成整个东西：前端、后端和状态管理，全部在一个 Python 文件中。

我们通过构建不同类型的应用来测试这一点。每个应用都是一个单独的 Python 文件，无需构建步骤，几秒钟内即可部署到 Hugging Face Spaces。

生产力应用

番茄钟：一个专注计时器，工作时像素艺术树会生长。从种子开始，长出树枝，长出叶子。完成一个会话，树就会加入你的森林。会话跟踪、主题切换、休息模式——全部可交互，全部在一个文件中。

仅树的动画通常就需要一个单独的 React 组件。在这里，它只是 css_template 中的 CSS 关键帧和 js_on_load 中的状态更新。

商业应用

GitHub 贡献热力图：点击任意单元格切换贡献。多种颜色主题。模式生成器（连续、季节性、随机）。实时统计数据随编辑更新。

看板：列之间完整的拖放功能。内联编辑（双击任意卡片）。可实时过滤的搜索功能。可折叠的列。

拖放通常意味着引入一个库。在这里，它是 js_on_load 中连接的原生 HTML5 拖放事件，状态通过 trigger('change') 同步回 Python。

创意应用

转盘抽奖：流畅的 CSS 动画，旋转状态在重新渲染后保持不变。用于是/否决策、餐厅选择、团队选择的预设配置。你还可以即时添加自定义旋转扇区。

机器学习应用

这就是 gr.HTML 在机器学习工作中真正有趣的地方：你可以构建专门处理你确切输出格式的组件，然后像使用任何内置 Gradio 组件一样使用它们。

检测查看器：用于目标检测、实例分割和姿态估计结果的自定义查看器。渲染边界框、分割掩码、关键点和骨架连接——全部在一个可复用的 gr.HTML 子类中，直接插入你的模型管道。

社区也用 gr.HTML 构建了一些创意组件：

用于图像编辑的 3D 相机控制：Gradio 应用内的完整 Three.js 视口！拖动控制柄来控制方位角、仰角和距离。你上传的图像出现在 3D 场景中，相机参数直接输入到 Qwen 最新的图像编辑模型中。这类交互式 3D 控件通常需要单独的前端——有了 Gradio，它只是一个 gr.HTML 子类🔥

实时语音转录：使用 Mistral 的 Voxtral 模型进行实时转录。转录显示是一个自定义的 gr.HTML 组件，带有动画状态徽章、实时 WPM 计数器和随你说话更新的样式化输出。无需使用 React 即可获得实时 UI 反馈！

工作原理

每个 gr.HTML 组件接受三个模板：

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');
        };
    """
)

${value} 注入 Python 状态。props.value 从 JavaScript 更新它。trigger('change') 同步回 Python。这就是整个 API。

对于可复用组件，子类化 gr.HTML：

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
        )

现在 Heatmap() 像 gr.Image() 或 gr.Slider() 一样工作——在 Blocks 中使用它，连接事件处理器，任何你需要的东西。

这对 Vibe Coding 为何重要

当你让 LLM 构建自定义组件时，单文件输出就是一切。不需要“现在创建样式文件”或“把它接入你的构建配置”。只需一个可立即运行的 Python 文件。

反馈循环变成：描述你想要什么 → 得到代码 → gradio app.py → 看到它运行 → 描述要修复什么 → 重复。借助 Gradio 的 reload 模式，每个循环只需几秒钟。

用 gradio deploy 部署到 Spaces，或用 demo.launch(share=True) 分享临时链接。几秒钟内就能从想法变成实时应用。

Gradio 自带 32 个交互组件，但有时你完美的 AI Web 应用需要一些特别的东西。这正是 gr.HTML 的用武之地。

如果你有想法，试试用 gr.HTML 构建它：向你的 LLM 描述你想要什么，生成代码，运行它。你可能会惊讶于自己能在 5 分钟内交付什么。

建议阅读：

Gradio 指南：使用 gr.HTML 的自定义组件
API 文档：gr.HTML