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.
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.
Drag-and-drop usually means pulling in a library. Here it's native HTML5 drag events wired up in js_on_load, with state synced back to Python via trigger('change').
Spin-to-Win Wheel: Smooth CSS animation, rotation state that persists across re-renders. Preset configurations for yes/no decisions, restaurant picking, team selection. You can also add custom spinning segments on the fly.
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.
Detection Viewer : A custom viewer for object detection, instance segmentation, and pose estimation results. HTML subclass that plugs directly into your model pipeline.
Source link
