譯者 | 布加迪

審校 | 重樓

從構思到設計原型，只需要短短幾秒。OpenUI 讓你僅使用自然語言就可以構建、編輯和導出UI，無需任何設計技能！

不妨先從一個簡單的例子開始。很多時候，我設想一件看起來很棒的裙子，但當我真正找到類似的裙子時，卻發現效果不如預期。這不僅僅是我個人的問題，在編程中也會遇到。客戶可能在腦海中構思一個很棒的 UI，但最終構建出來的卻不如預期。這不僅浪費了時間和資源，還可能導致客戶不滿。

幸運的是，這個問題現在有了解決方案。Weights & Biases（W&B）開發了OpenUI，這款開源工具使用簡單的英語命令即可將你的奇思妙想轉化為原型。UI 創建變得快速、有趣且靈活。你還可以將設計轉換成適用于React、Svelte或Web Components等框架的代碼。比如說，我可以說“創建一個帶有側邊欄和圖表的深色主題儀表板”，OpenUI就會實時生成它。你還可以使用簡單的英語命令進行編輯。

我們在本文中將探討OpenUI為何很重要、它的工作原理以及如何使用它在短短幾秒鐘內構建出色的UI。

為什么選擇OpenUI？

• 使用自然語言創建UI：你無需成為專業程序員即可開始入手。只需描述你的需求，OpenUI就會完成剩下的工作。
• 實時查看變更：你在調整描述時，UI會立即更新——類似Web開發中的實時預覽，但無需手動編寫或編輯代碼。
• 靈活的輸出：一旦你對設計感到滿意，就可以將其轉換成面向熱門框架的代碼，從而輕松用于實際項目中。
• 開源：免費使用，社區可以幫助改進。

OpenUI 如何運作？

實現背后沒有所謂的高深學問，但想法非常棒，你甚至可以自行構建類似的UI！它使用來自OpenAI、Groq或Ollama等開源項目的語言模型來理解描述，并生成HTML代碼。之后，你可以編輯、優化或將其轉換成所選擇的框架。

OpenUI 入門

不妨試用一下。根據你的設置，你有幾種選擇，但別擔心，我們會盡量簡單化！

選項1：試用在線演示版

探究OpenUI最簡單的方法是借助OpenUI Demo處的在線演示版。只需使用你的GitHub 帳戶登錄即可。比如說，我要求它為“一張帶有標題和按鈕的紅色卡片”生成UI，結果如下：

你可以切換亮模式和暗模式，在不同屏幕上預覽UI，選擇主題，或根據需要進行編輯。點擊 <> 圖標即可顯示UI對應的HTML代碼，如上圖所示。

選項 2：使用Docker在本地運行

如果你想在自己的計算機上運行OpenUI，Docker提供了最簡單的設置方法。它就像一個預包裝的盒子，含有運行OpenUI所需的一切。操作方法如下：

• 安裝Docker：下載并安裝適用于你計算機（Windows、Mac或Linux）的Docker Desktop：https://www.docker.com/products/docker-desktop/。
• 獲取API密鑰：OpenUI支持多種模型（OpenAI、Groq、Anthropic、Gemini、Cohere和Mistral 等）。我將使用OpenAI API密鑰。注冊一個免費密鑰并保存。
• 運行命令：打開終端，并粘貼以下內容：

(Replace xxx with your API key):
export OPENAI_API_KEY=xxx
docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

下載需要一些時間。

• 打開瀏覽器：準備完畢后，訪問http://localhost:7878，即可像在線演示版中一樣開始創建UI了。

選項 3：從源代碼運行（如果你感興趣）

如果你想從源代碼運行OpenUI，就需要Git和uv（一個快速的Python 包管理器）。

克隆項目：

git clone https://github.com/wandb/openui

進入到文件夾：

cd openui/backend

同步依賴項，并激活虛擬環境：

uv sync --frozen --extra litellm
source .venv/bin/activate

使用該命令設置并運行環境：

export OPENAI_API_KEY=your_openai_key
python -m openui

高級設置選項

Ollama設置（適用于開源模型）

安裝Ollama：https://ollama.ai/。

拉取模型（比如說拉取llava以支持鏡像）：

docker exec -it openui-ollama-1 ollama pull llava

使用Ollama運行OpenUI：

docker run --rm --name openui -p 7878:7878 -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui

結語

還在等什么？趕緊前往OpenUI GitHub頁面，試用演示版，或在本地進行設置。描述、編輯并轉換，即可創建出色的 UI。以下是供你參考的幾個技巧：

• 提供的細節越多（“帶有白色文本的紫色按鈕”），效果越好。
• 嘗試不同的描述，并逐漸增加復雜性，看看會發生什么。
• 盡可能使用常見的UI術語。
• 點擊齒輪圖標可在AI模型之間切換（比如使用Groq以提高速度，或使用Ollama以便本地使用）。

原文標題：From Idea to UI in Seconds: Meet OpenUI!，作者：Kanwal Mehreen