Gradio 6 的 gr.HTML 支持自定义模板，可一句话生成完整 Web 应用

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

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

效率应用

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

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

商业应用

GitHub 贡献热力图：点击任意单元格即可切换贡献状态。多种配色主题。图案生成器（连续、季节性、随机）。实时统计数据会随着你的编辑而更新。

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

拖放通常意味着要引入一个库。而在这里，它是原生的 HTML5 拖拽事件，在 js_on_load 中连接起来，状态通过 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 分钟内交付什么。