Hugging Face: 使用開放 ML 模型製作網頁應用產生器

Hugging Face 已詳細說明一種創建生成式 AI 網頁伺服器的方法，該方法能將文字提示轉換為功能網頁應用。透過即時串流和渲染 HTML、CSS 和 JavaScript，開發者可以使用開放機器學習模型構建「text-to-app」管線。

技術架構與堆疊

該系統使用 NodeJS 作為伺服器環境，並使用 Express.js 進行路由與串流處理。核心生成引擎是 WizardCoder-15B，透過 Hugging Face Inference Endpoints API 部署，以確保高效能代碼生成所需的硬體加速與記憶體（通常為 32GB 或更多）。

替代實作路徑包括：

  • Inference API：適合較小的社區驅動模型。
  • Python Bridges：使用如 Pythonia 的庫來從 Node 呼叫 Python 模組。
  • Local LLM Libraries：利用 llama-node (llama.cpp) 或 transformers.js 進行本地執行，儘管在沒有硬體加速的情況下這些方法更耗資源。

即時 HTML 串流

生成器透過將模型的輸出直接串流到瀏覽器來運作。當使用者透過 URL 參數提供提示時，伺服器會發送初始的 HTML 樣板（<html><head></head><body>），然後使用 hf.textGenerationStream 將生成的標記直接管道進入 HTTP 回應。

此方法使網頁能在 AI 仍在編寫代碼時開始渲染，從提示到功能介面實現無縫過渡。

網頁生成的提示工程

為確保生成的程式碼既功能正常又視覺吸引人，對 WizardCoder 模型採用了特定的提示策略：

使用 Tailwind CSS 進行樣式設計

使用 Tailwind CSS 工具類別使模型能即時生成樣式，無需單獨的樣式表。提示會引導模型將內容包裝在中央佈局中（例如 `<div class=

Sources