譯者 | 布加迪
審校 | 重樓
從構(gòu)思到設(shè)計(jì)原型，只需要短短幾秒。OpenUI 讓你僅使用自然語(yǔ)言就可以構(gòu)建、編輯和導(dǎo)出UI，無(wú)需任何設(shè)計(jì)技能！
不妨先從一個(gè)簡(jiǎn)單的例子開(kāi)始。很多時(shí)候，我設(shè)想一件看起來(lái)很棒的裙子，但當(dāng)我真正找到類似的裙子時(shí)，卻發(fā)現(xiàn)效果不如預(yù)期。這不僅僅是我個(gè)人的問(wèn)題，在編程中也會(huì)遇到。客戶可能在腦海中構(gòu)思一個(gè)很棒的 UI，但最終構(gòu)建出來(lái)的卻不如預(yù)期。這不僅浪費(fèi)了時(shí)間和資源，還可能導(dǎo)致客戶不滿。
幸運(yùn)的是，這個(gè)問(wèn)題現(xiàn)在有了解決方案。Weights & Biases（W&B）開(kāi)發(fā)了OpenUI，這款開(kāi)源工具使用簡(jiǎn)單的英語(yǔ)命令即可將你的奇思妙想轉(zhuǎn)化為原型。UI 創(chuàng)建變得快速、有趣且靈活。你還可以將設(shè)計(jì)轉(zhuǎn)換成適用于React、Svelte或Web Components等框架的代碼。比如說(shuō)，我可以說(shuō)“創(chuàng)建一個(gè)帶有側(cè)邊欄和圖表的深色主題儀表板”，OpenUI就會(huì)實(shí)時(shí)生成它。你還可以使用簡(jiǎn)單的英語(yǔ)命令進(jìn)行編輯。
我們?cè)诒疚闹袑⑻接慜penUI為何很重要、它的工作原理以及如何使用它在短短幾秒鐘內(nèi)構(gòu)建出色的UI。
為什么選擇OpenUI？
- 使用自然語(yǔ)言創(chuàng)建UI：你無(wú)需成為專業(yè)程序員即可開(kāi)始入手。只需描述你的需求，OpenUI就會(huì)完成剩下的工作。
- 實(shí)時(shí)查看變更：你在調(diào)整描述時(shí)，UI會(huì)立即更新——類似Web開(kāi)發(fā)中的實(shí)時(shí)預(yù)覽，但無(wú)需手動(dòng)編寫(xiě)或編輯代碼。
- 靈活的輸出：一旦你對(duì)設(shè)計(jì)感到滿意，就可以將其轉(zhuǎn)換成面向熱門框架的代碼，從而輕松用于實(shí)際項(xiàng)目中。
- 開(kāi)源：免費(fèi)使用，社區(qū)可以幫助改進(jìn)。
OpenUI 如何運(yùn)作？
實(shí)現(xiàn)背后沒(méi)有所謂的高深學(xué)問(wèn)，但想法非常棒，你甚至可以自行構(gòu)建類似的UI！它使用來(lái)自O(shè)penAI、Groq或Ollama等開(kāi)源項(xiàng)目的語(yǔ)言模型來(lái)理解描述，并生成HTML代碼。之后，你可以編輯、優(yōu)化或?qū)⑵滢D(zhuǎn)換成所選擇的框架。
OpenUI 入門
不妨試用一下。根據(jù)你的設(shè)置，你有幾種選擇，但別擔(dān)心，我們會(huì)盡量簡(jiǎn)單化！
選項(xiàng)1：試用在線演示版
探究OpenUI最簡(jiǎn)單的方法是借助OpenUI Demo處的在線演示版。只需使用你的GitHub 帳戶登錄即可。比如說(shuō)，我要求它為“一張帶有標(biāo)題和按鈕的紅色卡片”生成UI，結(jié)果如下：
你可以切換亮模式和暗模式，在不同屏幕上預(yù)覽UI，選擇主題，或根據(jù)需要進(jìn)行編輯。點(diǎn)擊 <> 圖標(biāo)即可顯示UI對(duì)應(yīng)的HTML代碼，如上圖所示。
選項(xiàng) 2：使用Docker在本地運(yùn)行
如果你想在自己的計(jì)算機(jī)上運(yùn)行OpenUI，Docker提供了最簡(jiǎn)單的設(shè)置方法。它就像一個(gè)預(yù)包裝的盒子，含有運(yùn)行OpenUI所需的一切。操作方法如下：
- 安裝Docker：下載并安裝適用于你計(jì)算機(jī)（Windows、Mac或Linux）的Docker Desktop：https://www.docker.com/products/docker-desktop/。
- 獲取API密鑰：OpenUI支持多種模型（OpenAI、Groq、Anthropic、Gemini、Cohere和Mistral 等）。我將使用OpenAI API密鑰。注冊(cè)一個(gè)免費(fèi)密鑰并保存。
- 運(yùn)行命令：打開(kāi)終端，并粘貼以下內(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下載需要一些時(shí)間。
- 打開(kāi)瀏覽器：準(zhǔn)備完畢后，訪問(wèn)http://localhost:7878，即可像在線演示版中一樣開(kāi)始創(chuàng)建UI了。
選項(xiàng) 3：從源代碼運(yùn)行（如果你感興趣）
如果你想從源代碼運(yùn)行OpenUI，就需要Git和uv（一個(gè)快速的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高級(jí)設(shè)置選項(xiàng)
Ollama設(shè)置（適用于開(kāi)源模型）
安裝Ollama：https://ollama.ai/。
拉取模型（比如說(shuō)拉取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é)語(yǔ)
還在等什么？趕緊前往OpenUI GitHub頁(yè)面，試用演示版，或在本地進(jìn)行設(shè)置。描述、編輯并轉(zhuǎn)換，即可創(chuàng)建出色的 UI。以下是供你參考的幾個(gè)技巧：
- 提供的細(xì)節(jié)越多（“帶有白色文本的紫色按鈕”），效果越好。
- 嘗試不同的描述，并逐漸增加復(fù)雜性，看看會(huì)發(fā)生什么。
- 盡可能使用常見(jiàn)的UI術(shù)語(yǔ)。
- 點(diǎn)擊齒輪圖標(biāo)可在AI模型之間切換（比如使用Groq以提高速度，或使用Ollama以便本地使用）。
原文標(biāo)題：From Idea to UI in Seconds: Meet OpenUI!，作者：Kanwal Mehreen
