一次性任意 Web 应用使用 Gradio 的 gr.HTML
I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you’ve already provided) here? Once I have it, I’ll translate it into Simplified Chinese while preserving all formatting, markdown, and code blocks.
贡献者
导航
Gradio 6 新的 gr.HTML 组件
Gradio 6 静悄悄地推出了一个非常强大的功能：gr.HTML 现在支持自定义模板、作用域 CSS 和 JavaScript 交互。
你几乎可以构建任何网页组件——而前沿的大型语言模型（Claude、GPT‑4 等）可以一次性生成完整的代码：前端、后端以及状态管理，全部写在一个 Python 文件中。
我们通过构建不同类型的应用来测试了这一点。每个应用都是单个 Python 文件，无需构建步骤，且可以在几秒钟内部署到 Hugging Face Spaces。
生产力应用
Pomodoro Timer
一个专注计时器，像素艺术树在你工作时会成长。
- 从种子开始，萌发枝条，长出叶子。
- 完成一次会话后，树会加入你的森林。
- 会话追踪、主题切换、休息模式——全部交互式，且仅在一个文件中。
仅树的动画通常需要单独的 React 组件。在这里，它只是 css_template 中的 CSS 关键帧和 js_on_load 中的状态更新。
商业应用
GitHub Contribution Heatmap
- 点击任意单元格以切换贡献。
- 多种颜色主题。
- 模式生成器（连续、季节性、随机）。
- 实时统计，编辑时自动更新。
Kanban Board
- 在列之间完整的拖放。
- 行内编辑（双击任意卡片）。
- 实时搜索过滤。
- 可折叠列。
拖放通常意味着引入库。在这里，它使用原生 HTML5 拖拽事件，在 js_on_load 中绑定，并通过 trigger('change') 将状态同步回 Python。
创意应用
Spin‑to‑Win Wheel
- 平滑的 CSS 动画，旋转状态在重新渲染时保持不变。
- 为是/否决策、餐厅选择、团队挑选提供预设配置。
- 可随时添加自定义旋转段。
Source: …
ML 应用
gr.HTML 在机器学习工作中表现出色，因为你可以构建专门的组件来处理恰好你需要的输出格式，然后像使用任何内置的 Gradio 组件一样使用它们。
Detection Viewer
用于目标检测、实例分割和姿态估计结果的自定义查看器。
- 渲染边界框、分割掩码、关键点和骨架连线。
- 实现为可复用的
gr.HTML子类，直接插入模型流水线。
社区构建的组件
-
3D Camera Control for Image Editing – 在 Gradio 应用中嵌入完整的 Three.js 视口。拖拽手柄控制方位角、俯仰角和距离；上传的图像会出现在 3D 场景中，摄像机参数直接馈入 Qwen 最新的图像编辑模型。
-
Real‑time Speech Transcription – 使用 Mistral 的 Voxtral 模型进行实时转录。转录显示是一个自定义的
gr.HTML组件，带有动画状态徽章、实时 WPM 计数器，以及在你说话时会更新的样式化输出。无需 React 的实时 UI 反馈！
How It Works
每个 gr.HTML 组件接受三个（可选）模板：
gr.HTML(
value={"count": 0},
html_template="Clicked ${value.count} times",
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 状态注入到 HTML 中。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 布局，绑定事件处理器等。
Source: …
为什么这对 Vibe 编码很重要
当你让 LLM 构建自定义组件时，单文件输出就是全部需求。无需“创建单独的样式文件”或“把它接入你的构建配置”。只要一个可以立即运行的 Python 文件。
反馈循环变成：
- 描述 你的需求。
- 获取 生成的代码。
- 运行
gradio app.py（或gradio run app.py）。 - 查看 它的运行效果。
- 用新的提示迭代。
得益于 Gradio 的 reload mode，每个循环只需几秒钟。
部署
- 使用
gradio deploy部署到 Spaces。 - 或者使用
gradio share生成临时链接。
你也可以通过 demo.launch(share=True) 分享你的演示。几秒钟内，就能把一个想法变成实时应用。
Gradio 自带 32 种交互组件，但有时你的完美 AI 网页应用需要一些特殊功能。这时 gr.HTML 就派上用场。
如果你有想法，尝试用 gr.HTML 来实现：向你的 LLM 描述需求，生成代码并运行。你可能会惊讶于仅用 5 分钟就能交付的成果。
推荐阅读
- Gradio 指南：Custom Components with
gr.HTML - API 文档：
gr.HTML