Gradio 6 gr.HTML：一次性 Web 應用程式開發

Gradio 6 引入了對 gr.HTML 元件的強大更新，讓開發者能夠使用自訂模板、範圍化 CSS 與 JavaScript 來構建完整互動的 Web 元件。此更新使得在單一 Python 檔案中即可建立包含狀態管理與後端整合的複雜前端介面，免除額外的建置步驟或外部前端框架。

使用 gr.HTML 的自訂互動性

gr.HTML 現在支援精簡的 API，以整合前端與後端邏輯。每個元件使用三個主要模板來管理其行為：

  • html_template：使用 HTML 定義元件的結構。
  • css_template：提供範圍化 CSS 以樣式化元件。
  • js_on_load：處理 JavaScript 互動性與客戶端邏輯。

狀態透過雙向同步管理：${value} 將 Python 狀態注入 HTML，而 props.value 則從 JavaScript 更新該狀態。trigger('change') 函式用於將這些變更同步回 Python 後端。

可重用元件架構

開發者可以透過繼承 gr.HTML 來建立可重用的自訂元件。只要在子類別的 __init__ 方法中定義 html_template、css_template 與 js_on_load，此自訂元件即可像 gr.Image() 或 gr.Slider() 等內建 Gradio 元件一樣，在 Gradio Blocks 中直接使用。

應用案例

強化的 gr.HTML 功能使得開發多樣化的應用類型成為可能，且不需要 React 或其他前端函式庫：

生產力與商業工具

  • Pomodoro 計時器：在單一檔案中實作複雜的 CSS 關鍵影格動畫，以呈現逐漸成長的像素藝術樹與會議追蹤。
  • 看板：具備原生 HTML5 拖放事件，透過 js_on_load 連結，並使用 trigger('change') 同步至 Python。
  • GitHub 貢獻熱圖：包含可互動的格子、多種配色主題與即時統計更新。

創意與機器學習專屬元件

  • 旋轉抽獎輪：使用平滑的 CSS 動畫，並在重新渲染時保留旋轉狀態。
  • 偵測檢視器：一個專門的 gr.HTML 子類別，用於渲染目標偵測與姿勢估計流程中的邊界框、分割遮罩與關鍵點。
  • 3D 相機控制：在 Gradio 中整合 Three.js 視口，使用者可控制方位角、仰角與距離，適用於如 Qwen 等影像編輯模型。
  • 即時語音轉錄：使用自訂 gr.HTML 元件呈現動畫狀態徽章與即時每分鐘字數 (WPM) 計數器，適用於如 Mistral 的 Voxtral 等模型。

對「Vibe Coding」的影響

此更新大幅加速使用大型語言模型（LLM）產生程式碼的開發週期。由於整個應用程式——前端、後端與狀態——皆位於單一 Python 檔案中，回饋迴路簡化為一個簡單的循環：向 LLM 描述需求、產生程式碼，然後使用 gradio app.py 執行。

此工作流程透過 Gradio 的重新載入模式進一步優化，可實現近乎即時的迭代。完成的應用程式可透過 gradio deploy 部署至 Hugging Face Spaces，或使用 demo.launch(share=True) 產生臨時連結分享。

Sources