OpenUI—通过和AI聊天定制UI界面 - 文章 - 开发者社区

OpenUI

构建 UI 组件可能是一个艰苦的过程。OpenUI 旨在使这一过程变得有趣、快速和灵活。它也是我们在 W&B 使用的工具，用于测试和原型设计我们的下一代工具，以在 LLM 之上构建强大的应用程序。

概览

picture.image

OpenUI 让您可以使用您的想象力来描述 UI，然后实时看到它被渲染。您可以请求更改并将 HTML 转换为 React、Svelte、Web Components 等。它就像 v0，但是开源的并且没有那么完善 😝。

实时演示

试试这个演示[1]

本地运行

您还可以在本地运行 OpenUI 并使用 Ollama[2] 提供的模型。安装 Ollama[3] 并拉取一个像 CodeLlama[4] 这样的模型，然后假设您已经安装了 git 和 python：


          
git clone https://github.com/wandb/openui
          
cd openui/backend
          
# 您可能希望在虚拟环境中执行此操作
          
pip install .
          
# 必须设置此环境变量才能使用 OpenAI 模型，可以在这里找到您的 api 密钥：https://platform.openai.com/api-keys
          
export OPENAI_API_KEY=xxx
          
python -m openui

Docker

您可以从/backend 目录构建并运行 docker 文件：


          
docker build . -t wandb/openui --load
          
docker run -p 7878:7878 -e OPENAI_API_KEY wandb/openui

现在您可以访问 http://localhost:7878[5]

开发

在此仓库中配置了一个 dev 容器[6]，这是开始的最快方式。

Codespace

picture.image

具有选项的新功能...

在创建 Codespace 时选择更多选项，然后选择 New with options... 。如果您希望启动时间非常快，请选择 US West 区域。您还需要配置您的 OPENAI_API_KEY 密钥，或者如果您想尝试 Ollama，只需将其设置为 xxx （您至少需要 16GB 的 Ram）。

进入代码空间后，您可以在一个终端中运行服务器：python -m openui --dev。然后在新的终端中：


          
cd /workspaces/openui/frontend
          
npm run dev

这应该会在端口 5173 上打开另一个服务，那是您将要访问的服务。前端和后端的所有更改都将自动重新加载并反映在您的浏览器中。

本文由山行翻译整理自：https://github.com/wandb/openui，如对您有帮助，请帮忙关注、转发、点赞。

References

[1] 演示: https://openui.fly.dev/ai/new
[2] Ollama: https://www.squadhelp.com/name/Olama?source=direct
[3] 安装 Ollama: https://ollama.com/download
[4] CodeLlama: https://ollama.com/library/codellama
[5]http://localhost:7878: https://weixin110.qq.com/cgi-bin/mmspamsupport-bin/newredirectconfirmcgi?click=3ea7ff000ebc3d4dbd3f648965457c98&bankey=ed4ff4eb7fdd169d43ca12b7bea61ed0&midpagecode=67377a2adb44e17c1b0adb24b5cf2bd108e01a69c9bba3d6a87234123659df689fa4a3d0106cf089587c42b0c6541500e84d22b2e055c79d319c515a90722da1b9d508668545c031448183e2ed278c7ea57641eb8de75c61d764a8f659f1efb8&bancode=8eeec3e354bd89a34ef045d831600a2dc115b872d7be40ac6b72caf615469a05&exportkey=n\_ChQIAhIQWs8Alvp7bWMzRacNH0JHGRLsAQIE97dBBAEAAAAAABkPJgpp684AAAAOpnltbLcz9gKNyK89dVj0MK%2FFayRJoOV%2BpI1yRNtJaMfNg%2FKHrcfQJ2W6kb%2B40lQKbYLK3buCyFy3uvg6o8tdSTP%2BYQgTHUNXq%2BGRA5X3KactyPar9z2%2Fpn4bKDbkB9imvauXzB1TjyPOObpdDPdiUsibYuMMzdhFvugWZze2pZ5AHIRxoivYJPb4y7Nt22kNQhZCo7LabGxuyUYWMB5H%2BBdzfTopx9PPzGY28IKzc1idmIbp%2Fr%2Bar8Xedghj2I9OShRDaa85NijKI9C%2Fs0JVx%2FyXZ%2FCY&pass\_ticket=zd9pC5t4wtUvF71MWILuVzUkT5geqjyqsaViEut4Aht5Jg3YHaITXDfv3AVWHLfvc4fEIr1KYr3BXjilxdStug%3D%3D&wechat\_real\_lang=zh\_CN&wx\_header=0
[6] dev 容器: https://github.com/wandb/openui/blob/main/.devcontainer/devcontainer.json