Biến Mọi Ứng Dụng Web Thành Một Lần Với gr.HTML Của Gradio

Chúng tôi đang trên hành trình thúc đẩy và dân chủ hóa trí tuệ nhân tạo thông qua mã nguồn mở và khoa học mở.

---

Gradio 6 đã lặng lẽ ra mắt một tính năng cực kỳ mạnh mẽ: gr.HTML giờ đây hỗ trợ các mẫu tùy chỉnh, CSS giới hạn phạm vi và khả năng tương tác JavaScript. Điều này có nghĩa là bạn có thể xây dựng hầu hết mọi thành phần web — và Claude (hoặc bất kỳ LLM tiên tiến nào khác) có thể tạo ra toàn bộ chúng chỉ trong một lần duy nhất: giao diện người dùng, giao diện máy chủ và quản lý trạng thái, tất cả trong một tệp Python duy nhất.

Chúng tôi đã thử nghiệm điều này bằng cách xây dựng các loại ứng dụng khác nhau. Mỗi ứng dụng là một tệp Python duy nhất, không cần bước biên dịch, có thể triển khai lên Hugging Face Spaces trong vài giây.

Ứng Dụng Năng Suất

Đồng hồ bấm giờ Pomodoro: Một bộ đếm thời gian tập trung nơi một cây nghệ thuật pixel phát triển khi bạn làm việc. Bắt đầu như một hạt giống, nảy mầm cành, lớn lá. Hoàn thành một phiên làm việc và cây sẽ tham gia vào khu rừng của bạn. Theo dõi phiên, chuyển đổi chủ đề, chế độ nghỉ ngơi — tất cả đều tương tác, tất cả trong một tệp.

Chỉ riêng hoạt ảnh cây bình thường sẽ yêu cầu một thành phần React riêng biệt. Ở đây, đó chỉ là các keyframe CSS trong css_template và các bản cập nhật trạng thái trong js_on_load.

Ứng Dụng Kinh Doanh

Biểu đồ nhiệt đóng góp GitHub: Nhấp vào bất kỳ ô nào để chuyển đổi các đóng góp. Nhiều chủ đề màu sắc. Bộ tạo mẫu (chuỗi, theo mùa, ngẫu nhiên). Số liệu thống kê trực tiếp cập nhật khi bạn chỉnh sửa.

Bảng Kanban: Kéo và thả hoàn toàn giữa các cột. Chỉnh sửa nội tuyến (nhấp đúp vào bất kỳ thẻ nào). Tính năng tìm kiếm có thể lọc theo thời gian thực. Các cột có thể thu gọn.

Kéo và thả thường có nghĩa là kéo theo một thư viện. Ở đây, đó là các sự kiện kéo gốc của HTML5 được kết nối trong js_on_load, với trạng thái được đồng bộ hóa trở lại Python thông qua trigger(‘change’).

Ứng Dụng Sáng Tạo

Bánh xe Quay để Thắng: Hoạt ảnh CSS mượt mà, trạng thái quay duy trì qua các lần hiển thị lại. Cấu hình cài sẵn cho các quyết định có/không, chọn nhà hàng, chọn nhóm. Bạn cũng có thể thêm các phân đoạn quay tùy chỉnh một cách nhanh chóng.

Ứng Dụng ML

Đây là nơi gr.HTML trở nên cực kỳ thú vị cho công việc ML: bạn có thể xây dựng các thành phần chuyên biệt có thể xử lý định dạng đầu ra chính xác của bạn, sau đó sử dụng chúng như bất kỳ thành phần Gradio tích hợp nào.

Trình xem phát hiện: Một trình xem tùy chỉnh cho kết quả phát hiện đối tượng, phân đoạn thể hiện và ước tính tư thế. Hiển thị các hộp giới hạn, mặt nạ phân đoạn, điểm chính và các kết nối khung xương — tất cả trong một lớp con gr.HTML có thể tái sử dụng, được tích hợp trực tiếp vào quy trình mô hình của bạn.

Cộng đồng cũng đã xây dựng một số thành phần sáng tạo với gr.HTML:

Điều khiển Camera 3D để Chỉnh sửa Ảnh: Một khung nhìn Three.js đầy đủ bên trong một ứng dụng Gradio! Kéo các tay cầm để điều khiển góc phương vị, góc nâng và khoảng cách. Ảnh đã tải của bạn xuất hiện trong cảnh 3D và các tham số camera cấp trực tiếp vào mô hình chỉnh sửa ảnh mới nhất của Qwen. Các điều khiển 3D tương tác như thế này thường yêu cầu một giao diện người dùng riêng biệt — với Gradio, đó chỉ là một lớp con gr.HTML🔥

Phiên âm giọng nói thời gian thực: Phiên âm trực tiếp với mô hình Voxtral của Mistral. Hiển thị bản ghi là một thành phần gr.HTML tùy chỉnh với các huy hiệu trạng thái động, bộ đếm WPM trực tiếp và đầu ra được tạo kiểu cập nhật khi bạn nói. Phản hồi giao diện người dùng thời gian thực mà không cần sử dụng React!

---

Cách Hoạt Động

Mỗi thành phần gr.HTML nhận ba mẫu:

python 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} chèn trạng thái Python. props.value cập nhật nó từ JavaScript. trigger(‘change’) đồng bộ hóa trở lại Python. Đó là toàn bộ API.

Đối với các thành phần có thể tái sử dụng, hãy kế thừa từ gr.HTML:

python 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 )

Bây giờ Heatmap() hoạt động như gr.Image() hoặc gr.Slider() — sử dụng nó trong Blocks, kết nối các trình xử lý sự kiện, bất cứ điều gì bạn cần.

Tại Sao Điều Này Quan Trọng Đối Với Lập Trình Vibe

Khi bạn yêu cầu LLM của mình xây dựng một thành phần tùy chỉnh, đầu ra một tệp là tất cả mọi thứ. Không có “bây giờ tạo tệp styles” hoặc “kết nối cái này vào cấu hình build của bạn”. Chỉ cần một tệp Python chạy ngay lập tức.

Vòng lặp phản hồi trở thành: mô tả những gì bạn muốn → nhận mã → gradio app.py → xem nó hoạt động → mô tả những gì cần sửa → lặp lại. Mỗi chu kỳ chỉ mất vài giây với chế độ tải lại của Gradio.

Triển khai lên Spaces với gradio deploy hoặc chia sẻ liên kết tạm thời với demo.launch(share=True). Trong vòng vài giây từ một ý tưởng đến một ứng dụng trực tiếp.

---

Gradio đi kèm với 32 thành phần tương tác, nhưng đôi khi ứng dụng AI hoàn hảo của bạn cần một cái gì đó đặc biệt. Đó là lúc gr.HTML xuất hiện.

Nếu bạn có một ý tưởng, hãy thử xây dựng nó với gr.HTML: mô tả những gì bạn muốn cho LLM của mình, tạo mã, chạy nó. Bạn có thể ngạc nhiên về những gì bạn có thể xuất bản trong 5 phút.

Đọc thêm:

• Hướng dẫn Gradio: Thành phần HTML tùy chỉnh với gr.HTML
• Tài liệu API: gr.HTML

---

Bài viết liên quan từ Blog của chúng tôi

Transformers v5: Simple model definitions powering the AI ecosystem

Transformers v5 community python announcement open-source Hot 298 · December 1, 2025

Implementing MCP Servers in Python: An AI Shopping Assistant with Gradio

gradio mcp community open-source 60 · July 31, 2025

---

Cộng đồng

Link bài viết gốc

• Tags:
• Ai
• 18 February 2026
• Huggingface.co