Gradio 新功能：一行代码快速部署 Web 界面

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

番茄钟：互动的专注计时器

一个专注计时器，工作时像素画风格的树会生长。从一粒种子开始，长出树枝，再长出叶子。完成一个专注时段，树就会加入你的森林。会话追踪、主题切换、休息模式——所有功能都是交互式的，全部在一个文件内。

树动画本来需要一个单独的 React 组件。这里只是 css_template 里的 CSS 关键帧和 js_on_load 中的状态更新。

GitHub 贡献热力图

点击任意格子来切换贡献记录。多种颜色主题。模式生成器（连续、季节性、随机等）。实时统计在你编辑时自动更新。

看板应用

列之间完整的拖放功能。行内编辑（双击任意卡片）。可实时筛选的搜索功能。可收起的列。

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

转盘抽奖

光滑的 CSS 动画，旋转状态在重新渲染时保持不变。为是/否决策、餐厅选择、团队选择提供了预设配置。你也可以动态添加自定义旋转分段。

为什么 gr.HTML 对 ML 工作特别有趣

你可以构建专门处理确切输出格式的自定义组件，然后像使用任何内置 Gradio 组件一样使用它们。

检测查看器

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

社区用 gr.HTML 构建的创意组件

3D 相机控制进行图像编辑

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

实时语音转录

使用 Mistral 的 Voxtral 模型进行实时转录。转录显示界面是一个自定义 gr.HTML 组件，包含动画状态徽章、实时 WPM 计数器，以及随你说话而更新的样式化输出。无需使用 React 就能实现实时 UI 反馈！

gr.HTML API

每个 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 的热重载模式，每个循环只需几秒钟。

用 gradio deploy 部署到 Spaces，或用 demo.launch(share=True) 分享临时链接。从一个想法到一个实时应用只需几秒钟。

Gradio 自带 32 个交互组件，但有时你完美的 AI web 应用需要一些特别的东西。这时 gr.HTML 就派上用场了。

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

Gradio 指南：用 gr.HTML 构建自定义组件

本文提及的 Spaces 7 个

来自我们博客的更多文章

用 Gradio 后端实现任何自定义前端

你本该开的 PR

· 登录或注册以评论

本文提及的 Spaces 7 个