Gradio의 gr.HTML을 활용한 원샷 웹 앱
Source: Hugging Face Blog
기여자
탐색
Gradio 6’s New gr.HTML Component
Gradio 6이 조용히 매우 강력한 기능을 출시했습니다: **gr.HTML**가 이제 사용자 정의 템플릿, 범위가 지정된 CSS, 그리고 JavaScript 인터랙티브를 지원합니다.
사실상 모든 웹 컴포넌트를 만들 수 있으며—최첨단 LLM(Claude, GPT‑4 등)이 한 번에 전체를 생성할 수 있습니다: 프론트엔드, 백엔드, 그리고 상태 관리까지 모두 하나의 파이썬 파일에.
우리는 다양한 유형의 앱을 구축하여 이를 테스트했습니다. 각 앱은 단일 파이썬 파일이며, 빌드 단계가 없고, 몇 초 만에 Hugging Face Spaces에 배포할 수 있습니다.
생산성 앱
Pomodoro Timer
작업할 때 픽셀‑아트 나무가 자라는 집중 타이머.
- 씨앗으로 시작해 가지가 트이고 잎이 돋는다.
- 세션을 완료하면 나무가 당신의 숲에 추가된다.
- 세션 추적, 테마 전환, 휴식 모드 — 모두 인터랙티브하며, 하나의 파일에 포함.
나무 애니메이션은 보통 별도의 React 컴포넌트를 필요로 한다. 여기서는 css_template의 CSS 키프레임과 js_on_load의 상태 업데이트만으로 구현했다.
Source: …
비즈니스 앱
GitHub Contribution Heatmap
- 셀을 클릭하면 기여 내역을 토글합니다.
- 여러 색상 테마 제공.
- 패턴 생성기 (연속, 계절별, 무작위).
- 편집할 때마다 실시간으로 업데이트되는 통계.
Kanban Board
- 열 사이를 완전한 드래그‑앤‑드롭으로 이동.
- 인라인 편집 (카드를 더블‑클릭).
- 실시간 검색 필터.
- 열을 접을 수 있음.
드래그‑앤‑드롭은 보통 라이브러리를 끌어오는 것을 의미합니다. 여기서는 js_on_load에 연결된 네이티브 HTML5 드래그 이벤트를 사용하고, 상태를 trigger('change')를 통해 Python으로 동기화합니다.
창의적인 앱
Spin‑to‑Win Wheel
- 부드러운 CSS 애니메이션과 렌더링 사이에 회전 상태가 유지됩니다.
- 예/아니오 결정, 식당 선택, 팀 구성을 위한 사전 설정 구성.
- 필요에 따라 맞춤형 회전 구간을 즉시 추가할 수 있습니다.
Source: …
ML Apps
gr.HTML은 정확히 필요한 출력 형식을 처리하는 특수 컴포넌트를 만들 수 있기 때문에 머신러닝 작업에 빛을 발합니다. 만든 뒤에는 내장된 Gradio 컴포넌트처럼 사용할 수 있습니다.
Detection Viewer
객체 탐지, 인스턴스 세그멘테이션, 포즈 추정 결과를 위한 맞춤형 뷰어입니다.
- 경계 상자, 세그멘테이션 마스크, 키포인트 및 스켈레톤 연결을 렌더링합니다.
- 모델 파이프라인에 바로 연결되는 재사용 가능한
gr.HTML서브클래스로 구현되었습니다.
커뮤니티가 만든 컴포넌트
-
3D Camera Control for Image Editing – Gradio 앱 안에 완전한 Three.js 뷰포트를 제공합니다. 드래그 핸들을 이용해 방위각, 고도, 거리 등을 제어하고, 업로드된 이미지가 3D 씬에 나타나며 카메라 파라미터가 Qwen 최신 이미지 편집 모델에 바로 전달됩니다.
-
Real‑time Speech Transcription – Mistral의 Voxtral 모델을 이용한 실시간 전사. 전사 표시 영역은 애니메이션 상태 배지, 실시간 WPM 카운터, 말할 때마다 업데이트되는 스타일링된 출력을 갖춘 맞춤형
gr.HTML컴포넌트입니다. React 없이 실시간 UI 피드백을 제공합니다.
작동 방식
각 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 Coding에 중요한가
LLM에게 맞춤형 컴포넌트를 만들라고 요청할 때, 단일 파일 출력이 전부입니다. “별도의 스타일 파일을 만들라”거나 “빌드 설정에 연결하라”는 요구가 없습니다. 바로 실행 가능한 파이썬 파일 하나면 충분합니다.
피드백 루프는 다음과 같습니다:
- 설명 원하는 내용을.
- 받기 생성된 코드.
gradio app.py(또는gradio run app.py) 실행.- 보기 동작하는 모습을.
- 반복 새로운 프롬프트로.
Gradio의 리로드 모드 덕분에 각 사이클이 몇 초 안에 끝납니다.
배포
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