OpenUI：從構(gòu)思到UI僅需數(shù)秒 原創(chuàng)
從構(gòu)思到設(shè)計(jì)原型，只需要短短幾秒。OpenUI 讓你僅使用自然語言就可以構(gòu)建、編輯和導(dǎo)出UI，無需任何設(shè)計(jì)技能！
不妨先從一個(gè)簡(jiǎn)單的例子開始。很多時(shí)候，我設(shè)想一件看起來很棒的裙子，但當(dāng)我真正找到類似的裙子時(shí)，卻發(fā)現(xiàn)效果不如預(yù)期。這不僅僅是我個(gè)人的問題，在編程中也會(huì)遇到?？蛻艨赡茉谀X海中構(gòu)思一個(gè)很棒的 UI，但最終構(gòu)建出來的卻不如預(yù)期。這不僅浪費(fèi)了時(shí)間和資源，還可能導(dǎo)致客戶不滿。
幸運(yùn)的是，這個(gè)問題現(xiàn)在有了解決方案。Weights & Biases（W&B）開發(fā)了OpenUI，這款開源工具使用簡(jiǎn)單的英語命令即可將你的奇思妙想轉(zhuǎn)化為原型。UI 創(chuàng)建變得快速、有趣且靈活。你還可以將設(shè)計(jì)轉(zhuǎn)換成適用于React、Svelte或Web Components等框架的代碼。比如說，我可以說“創(chuàng)建一個(gè)帶有側(cè)邊欄和圖表的深色主題儀表板”，OpenUI就會(huì)實(shí)時(shí)生成它。你還可以使用簡(jiǎn)單的英語命令進(jìn)行編輯。
我們?cè)诒疚闹袑⑻接慜penUI為何很重要、它的工作原理以及如何使用它在短短幾秒鐘內(nèi)構(gòu)建出色的UI。
為什么選擇OpenUI？?
- 使用自然語言創(chuàng)建UI：你無需成為專業(yè)程序員即可開始入手。只需描述你的需求，OpenUI就會(huì)完成剩下的工作。
- 實(shí)時(shí)查看變更：你在調(diào)整描述時(shí)，UI會(huì)立即更新——類似Web開發(fā)中的實(shí)時(shí)預(yù)覽，但無需手動(dòng)編寫或編輯代碼。
- 靈活的輸出：一旦你對(duì)設(shè)計(jì)感到滿意，就可以將其轉(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)心，我們會(huì)盡量簡(jiǎn)單化！
選項(xiàng)1：試用在線演示版
探究OpenUI最簡(jiǎn)單的方法是借助OpenUI Demo處的在線演示版。只需使用你的GitHub 帳戶登錄即可。比如說，我要求它為“一張帶有標(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)行命令：打開終端，并粘貼以下內(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í)間。
- 打開瀏覽器：準(zhǔn)備完畢后，訪問http://localhost:7878，即可像在線演示版中一樣開始創(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è)置（適用于開源模型）
安裝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。以下是供你參考的幾個(gè)技巧：
- 提供的細(xì)節(jié)越多（“帶有白色文本的紫色按鈕”），效果越好。
- 嘗試不同的描述，并逐漸增加復(fù)雜性，看看會(huì)發(fā)生什么。
- 盡可能使用常見的UI術(shù)語。
- 點(diǎn)擊齒輪圖標(biāo)可在AI模型之間切換（比如使用Groq以提高速度，或使用Ollama以便本地使用）。
原文標(biāo)題：??From Idea to UI in Seconds: Meet OpenUI!??，作者：Kanwal Mehreen
