使用 Gradio 的 gr.HTML 快速實現任何網頁應用

使用 Gradio 的 gr.HTML 快速實現任何網頁應用

我們透過構建不同類型的應用程式測試了這項功能。每一個應用都是單一的 Python 檔案，無需構建步驟，幾秒鐘內即可部署到 Hugging Face Spaces。

生產力應用

番茄鐘（Pomodoro Timer）：一個專注計時器，當你工作時，一棵像素藝術風格的樹會隨之生長。從種子開始，長出樹枝，長出葉子。完成一個時段後，這棵樹就會加入你的森林。時段追蹤、主題切換、休息模式——全部都是互動式的，且全部整合在一個檔案中。

單是樹木動畫通常就需要一個獨立的 React 組件。但在這裡，它只是 css_template 中的 CSS 關鍵影格（keyframes）以及 js_on_load 中的狀態更新。

商業應用

GitHub 貢獻熱點圖（Contribution Heatmap）：點擊任何單元格即可切換貢獻狀態。支援多種顏色主題。模式生成器（連續紀錄、季節性、隨機）。編輯時會即時更新統計數據。

看板（Kanban Board）：欄位之間完整的拖放功能。行內編輯（雙擊任何卡片）。可即時過濾的搜尋功能。可摺疊的欄位。

拖放功能通常意味著需要引入函式庫。在這裡，它是透過在 js_on_load 中串接原生 HTML5 拖放事件，並透過 trigger('change') 將狀態同步回 Python。

創意應用

幸運轉盤（Spin-to-Win Wheel）：流暢的 CSS 動畫，旋轉狀態在重新渲染時仍能保持。預設配置可用於 是/否 決策、挑選餐廳、團隊選擇。你還可以即時添加自定義的旋轉扇區。

機器學習應用

這正是 gr.HTML 在機器學習工作中變得非常有趣的地方：你可以構建專門的組件來處理你精確的輸出格式，然後像使用任何內建的 Gradio 組件一樣使用它們。

檢測查看器（Detection Viewer）：一個用於物件檢測、實例分割和姿勢估計結果的自定義查看器。渲染邊界框、分割遮罩、關鍵點和骨架連接——全部封裝在一個可重複使用的 gr.HTML 子類別中，直接插入你的模型流水線。

社群也利用 gr.HTML 構建了一些極具創意的組件：

用於圖像編輯的 3D 相機控制：Gradio 應用程式中完整的 Three.js 視口！拖動手柄來控制方位角、仰角和距離。你上傳的圖像會出現在 3D 場景中，相機參數會直接輸入到 Qwen 最新的圖像編輯模型中。這類互動式 3D 控制通常需要獨立的前端——而在 Gradio 中，它只是一個 gr.HTML 子類別🔥

即時語音轉錄：使用 Mistral 的 Voxtral 模型進行即時轉錄。轉錄顯示是一個自定義的 gr.HTML 組件，帶有動畫狀態徽章、即時 WPM（每分鐘字數）計數器，以及隨說話內容更新的樣式化輸出。無需使用 React 即可實現即時 UI 反饋！

運作原理

每個 gr.HTML 組件都採用三個模板：

${value} 注入 Python 狀態。props.value 從 JavaScript 更新它。trigger('change') 同步回 Python。這就是全部的 API。

對於可重複使用的組件，繼承 gr.HTML：

現在 Heatmap() 的用法就像 gr.Image() 或 gr.Slider() 一樣——在 Blocks 中使用它，串接事件處理程序，滿足你所需的任何需求。

為什麼這對 Vibe Coding 很重要

當你要求 LLM 構建自定義組件時，單檔案輸出就是一切。不需要「現在創建樣式檔案」或「將其串接到你的構建配置中」。只需一個立即運行的 Python 檔案。

反饋循環變成了：描述你想要的內容 → 獲取代碼 → gradio app.py → 查看運行效果 → 描述要修復的內容 → 重複。在 Gradio 的重載模式下，每個循環只需幾秒鐘。

使用 gradio deploy 部署到 Spaces，或使用 demo.launch(share=True) 分享臨時連結。從一個想法到一個上線的應用程式只需幾秒鐘。

Gradio 內建了 32 個互動組件，但有時你完美的 AI 網頁應用需要一些特別的東西。這就是 gr.HTML 派上用場的地方。

如果你有一個想法，嘗試用 gr.HTML 來構建它：向你的 LLM 描述你想要的內容，生成代碼，然後運行它。你可能會驚訝於自己在 5 分鐘內能交付出什麼。

建議閱讀：

我們部落格的更多文章

Transformers v5：驅動 AI 生態系統的簡單模型定義

在 Python 中實現 MCP 伺服器：使用 Gradio 的 AI 購物助手

社群

·
註冊或
登入以發表評論