譯者 | 布加迪

審校 | 重樓

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

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

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

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

為什么選擇OpenUI？

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

OpenUI 如何運(yùn)作？

實(shí)現(xiàn)背后沒有所謂的高深學(xué)問，但想法非常棒，你甚至可以自行構(gòu)建類似的UI！它使用來自O(shè)penAI、Groq或Ollama等開源項(xiàng)目的語言模型來理解描述，并生成HTML代碼。之后，你可以編輯、優(yōu)化或?qū)⑵滢D(zhuǎn)換成所選擇的框架。

OpenUI 入門

不妨試用一下。根據(jù)你的設(shè)置，你有幾種選擇，但別擔(dān)心，我們會盡量簡單化！

選項(xiàng)1：試用在線演示版

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

你可以切換亮模式和暗模式，在不同屏幕上預(yù)覽UI，選擇主題，或根據(jù)需要進(jìn)行編輯。點(diǎn)擊 <> 圖標(biāo)即可顯示UI對應(yīng)的HTML代碼，如上圖所示。

選項(xiàng) 2：使用Docker在本地運(yùn)行

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

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

(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

下載需要一些時間。

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

選項(xiàng) 3：從源代碼運(yùn)行（如果你感興趣）

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

克隆項(xiàng)目：

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

進(jìn)入到文件夾：

cd openui/backend

同步依賴項(xiàng)，并激活虛擬環(huán)境：

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

使用該命令設(shè)置并運(yùn)行環(huán)境：

export OPENAI_API_KEY=your_openai_key
python -m openui

高級設(shè)置選項(xiàng)

Ollama設(shè)置（適用于開源模型）

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

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

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

使用Ollama運(yùn)行OpenUI：

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

結(jié)語

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

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

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