One-Shot Any Web App with Gradio's gr.HTML
Gradio 6 introduced a powerful feature in gr.HTML that allows custom templates, scoped CSS, and JavaScript interactivity, enabling the creation of complex web components entirely within a single Python file. The update lets users build and deploy a variety of apps—such as a Pomodoro timer, GitHub heatmap, Kanban board, spin‑to‑win wheel, and specialized detection viewer—without separate build steps or front‑end frameworks. The feature also supports custom components for machine‑learning tasks, like 3D camera controls and real‑time speech transcription, all deployable to Hugging Face Spaces in seconds.
The Core Development
Gradio 6 quietly shipped a very powerful feature: gr.HTML now supports custom templates, scoped CSS, and JavaScript interactivity. Which means you can build pretty much any web component — and Claude (or any other frontier LLM) can generate the whole thing in one shot: frontend, backend, and state management, all in a single Python file.
We tested this by building different types of apps. Each one is a single Python file, no build step, deployable to Hugging Face Spaces in seconds.
Pomodoro Timer : A focus timer where a pixel-art tree grows as you work. Starts as a seed, sprouts branches, grows leaves. Complete a session and the tree joins your forest. Session tracking, theme switching, break modes — all interactive, all in one file.
How It Works & Technical Architecture
3D Camera Control for Image Editing : A full Three.js viewport inside a Gradio app! Drag handles to control azimuth, elevation, and distance. Your uploaded image appears in the 3D scene, and the camera parameters feed directly into Qwen's latest image editing model. These kinds of interactive 3D controls would normally require a separate frontend — with Gradio it's just one gr.HTML subclass🔥
Deployment & Availability
This is where gr.HTML gets really interesting for ML work: you can build specialized components that can handle your exact output format, then use them like any built-in Gradio component.
Strategic Perspective & Ecosystem Impact
The tree animation alone would normally require a separate React component. Here it's just CSS keyframes in css_template and state updates in js_on_load .
GitHub Contribution Heatmap : Click any cell to toggle contributions. Multiple color themes. Pattern generators (streaks, seasonal, random). Live stats that update as you edit.
Kanban Board : Full drag-and-drop between columns. Inline editing (double-click any card). Search feature that can filter in real-time. Collapsible columns.
Why it matters
The ability to generate full web applications in one file streamlines rapid prototyping and deployment for AI developers, reducing friction between model creation and user interface design.