OpenUI：从构思到UI仅需数秒

译者 | 布加迪

审校 | 重楼

从构思到设计原型，只需要短短几秒。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/openui1.2.3.

下载需要一些时间。

• 打开浏览器：准备完毕后，访问http://localhost:7878，即可像在线演示版中一样开始创建UI了。

选项 3：从源代码运行（如果你感兴趣）

如果你想从源代码运行OpenUI，就需要Git和uv（一个快速的Python 包管理器）。

克隆项目：

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

进入到文件夹：

cd openui/backend1.

同步依赖项，并激活虚拟环境：

uv sync --frozen --extra litellm
source .venv/bin/activate1.2.

使用该命令设置并运行环境：

export OPENAI_API_KEY=your_openai_key
python -m openui1.2.

高级设置选项

Ollama设置（适用于开源模型）

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

拉取模型（比如说拉取llava以支持镜像）：

docker exec -it openui-ollama-1 ollama pull llava1.

使用Ollama运行OpenUI：

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

结语

还在等什么？赶紧前往OpenUI GitHub页面，试用演示版，或在本地进行设置。描述、编辑并转换，即可创建出色的 UI。以下是供你参考的几个技巧：

• 提供的细节越多（“带有白色文本的紫色按钮”），效果越好。

• 尝试不同的描述，并逐渐增加复杂性，看看会发生什么。

• 尽可能使用常见的UI术语。

• 点击齿轮图标可在AI模型之间切换（比如使用Groq以提高速度，或使用Ollama以便本地使用）。

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