Gradio 6 gr.HTML：一次性 Web 应用开发

Gradio 6 引入了对 gr.HTML 组件的强大更新，使开发者能够使用自定义模板、作用域 CSS 和 JavaScript 构建完全交互的网页组件。此更新使得在单个 Python 文件中创建包括状态管理和后端集成在内的复杂前端界面成为可能，省去了单独的构建步骤或外部前端框架。

使用 gr.HTML 实现自定义交互

gr.HTML 现在支持简化的 API，用于前后端逻辑的集成。每个组件使用三个主要模板来管理其行为：

  • html_template：使用 HTML 定义组件的结构。
  • css_template：提供作用域 CSS 用于组件的样式。
  • js_on_load：处理 JavaScript 交互和客户端逻辑。

状态通过双向同步进行管理：${value} 将 Python 状态注入到 HTML 中，而 props.value 则从 JavaScript 更新该状态。trigger('change') 函数用于将这些更改同步回 Python 后端。

可复用组件架构

开发者可以通过子类化 gr.HTML 来创建可复用的自定义组件。只需在子类的 __init__ 方法中定义 html_template、css_template 和 js_on_load，该自定义组件即可像 gr.Image() 或 gr.Slider() 等内置 Gradio 组件一样，在 Gradio Blocks 中直接使用。

应用案例

增强的 gr.HTML 功能使得在不需要 React 或独立前端库的情况下，开发多种类型的应用成为可能：

生产力和商务工具

  • Pomodoro Timer：在单个文件中实现用于生长像素艺术树和会话跟踪的复杂 CSS 关键帧动画。
  • Kanban Board：通过 js_on_load 绑定原生 HTML5 拖放事件，并通过 trigger('change') 同步到 Python。
  • GitHub Contribution Heatmap：包含交互式单元格、多种配色主题以及实时统计更新。

创意与机器学习专用组件

  • Spin-to-Win Wheel：使用平滑的 CSS 动画，并在重新渲染时保持旋转状态。
  • Detection Viewer：一个专用的 gr.HTML 子类，用于在目标检测和姿态估计流水线中渲染边界框、分割掩码和关键点。
  • 3D Camera Control：在 Gradio 中集成 Three.js 视口，允许用户控制方位角、仰角和距离，以用于如 Qwen 等图像编辑模型。
  • Real-time Speech Transcription：利用自定义 gr.HTML 组件实现动画状态徽章和实时每分钟词数（WPM）计数器，适用于如 Mistral 的 Voxtral 等模型。

对 “Vibe Coding” 的影响

此更新显著加快了使用大型语言模型（LLM）生成代码的开发周期。由于整个应用——前端、后端和状态——都位于同一个 Python 文件中，反馈循环简化为一个简单的循环：向 LLM 描述需求，生成代码，然后使用 gradio app.py 运行。

Gradio 的重载模式进一步优化了此工作流，实现几乎即时的迭代。完成的应用可以通过 gradio deploy 部署到 Hugging Face Spaces，或使用 demo.launch(share=True) 生成临时链接进行共享。

Sources