Gradio 6 ha lanzado una nueva característica poderosa: gr.HTML ahora permite plantillas personalizadas, CSS específico y JavaScript interactivo. Esto significa que puedes crear prácticamente cualquier componente web, y Claude (o cualquier otro LLM avanzado) puede generar todo en un solo intento: frontend, backend y gestión de estado, todo en un único archivo de Python.
Realizamos pruebas construyendo diferentes tipos de aplicaciones. Cada una es un solo archivo de Python, sin pasos de construcción, desplegable en Hugging Face Spaces en segundos.
Aplicaciones Productivas
Temporizador Pomodoro: Un temporizador de enfoque donde un árbol en pixel-art crece mientras trabajas. Comienza como una semilla, brota ramas y crece hojas. Completa una sesión y el árbol se une a tu bosque. Seguimiento de sesiones, cambio de temas, modos de descanso: todo interactivo y en un solo archivo.
La animación del árbol normalmente requeriría un componente React separado. Aquí, se utiliza solo CSS en css_template y actualizaciones de estado en js_on_load.
Aplicaciones Empresariales
Mapa de Contribuciones de GitHub: Haz clic en cualquier celda para alternar contribuciones. Múltiples temas de color. Generadores de patrones (rayas, estacionales, aleatorios). Estadísticas en vivo que se actualizan a medida que editas.
Tablero Kanban: Soporte completo para arrastrar y soltar entre columnas. Edición en línea (haz doble clic en cualquier tarjeta). Función de búsqueda que puede filtrar en tiempo real. Columnas colapsables.
El arrastrar y soltar normalmente requiere la inclusión de una biblioteca. Aquí se utilizan eventos de arrastre nativos de HTML5 conectados en js_on_load, con el estado sincronizado de vuelta a Python a través de trigger('change').
Aplicaciones Creativas
Rueda de la Suerte: Animación suave en CSS, estado de rotación que persiste entre renderizaciones. Configuraciones predeterminadas para decisiones sí/no, selección de restaurantes, selección de equipos. También puedes agregar segmentos de giro personalizados al instante.
Aplicaciones de ML
En esta área, gr.HTML se vuelve realmente interesante para trabajos de ML: puedes construir componentes especializados que manejen tu formato de salida exacto, y luego utilizarlos como cualquier componente integrado de Gradio.
Visor de Detección: Un visor personalizable para resultados de detección de objetos, segmentación de instancias y estimación de poses. Renderiza cajas delimitadoras, máscaras de segmentación, puntos clave y conexiones de esqueleto, todo en una subclase reutilizable de gr.HTML que se conecta directamente a tu pipeline de modelo.
La comunidad también ha creado componentes creativos con gr.HTML:
Control de Cámara 3D para Edición de Imágenes: ¡Un viewport completo de Three.js dentro de una aplicación Gradio! Arrastra los controladores para controlar la azimut, elevación y distancia. Tu imagen subida aparece en la escena 3D, y los parámetros de la cámara se alimentan directamente al último modelo de edición de imágenes de Qwen. Este tipo de controles interactivos 3D normalmente requeriría un frontend separado; con Gradio, es solo una subclase de gr.HTML.
Transcripción de Voz en Tiempo Real: Transcripción en vivo con el modelo Voxtral de Mistral. La visualización de la transcripción es un componente gr.HTML personalizado con insignias de estado animadas, un contador de WPM en vivo y salida estilizada que se actualiza mientras hablas. Retroalimentación de UI en tiempo real sin usar React.
Cómo Funciona
Cada componente gr.HTML toma tres plantillas:
gr.HTML( value={"count": 0}, html_template="", css_template="button { background: #667eea; color: white; }", js_on_load=""" element.querySelector('button').onclick = () => { props.value = { count: props.value.count + 1 }; trigger('change'); }; """ ) ${value} inyecta el estado de Python. props.value lo actualiza desde JavaScript. trigger('change') sincroniza de nuevo con Python. Esa es toda la API.
Para componentes reutilizables, se subclasea 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_, **kwargs ) Ahora Heatmap() funciona como gr.Image() o gr.Slider(): puedes usarlo en Blocks, conectar controladores de eventos, lo que necesites.
Importancia para el Vibe Coding
Al pedir a tu LLM que construya un componente personalizado, la salida de un solo archivo es crucial. No hay «ahora crea el archivo de estilos» o «conecta esto a tu configuración de construcción». Solo un archivo de Python que se ejecuta de inmediato.
El ciclo de retroalimentación se convierte en: describe lo que quieres → obtén código → gradio app.py → ve que funciona → describe qué corregir → repite. Cada ciclo toma segundos con el modo de recarga de Gradio.
Despliega en Spaces con gradio deploy o comparte un enlace temporal con demo.launch(share=True). En pocos segundos, puedes pasar de una idea a una aplicación en vivo.
Gradio ofrece 32 componentes interactivos, pero a veces tu aplicación web AI perfecta necesita algo especial. Ahí es donde entra gr.HTML.
Si tienes una idea, intenta construirla con gr.HTML: describe lo que quieres a tu LLM, genera el código y ejecútalo. Podrías sorprenderte de lo que puedes lograr en 5 minutos.
Lectura recomendada:
