OpenUI

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

概览

关于 - 图1

OpenUI允许您使用想象力描述用户界面，然后实时看到它被渲染出来。您可以要求更改，并将HTML转换为React、Svelte、Web组件等。它类似于v0，但是开源的，而且没有那么精致：😛。

现场演示

尝试演示

本地运行

您也可以本地运行OpenUI，并使用Ollama可用的模型。安装Ollama并拉取一个模型，比如CodeLlama，然后假设您已经安装了git和python：

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

Docker Compose

免责声明： 这可能会非常慢。如果您有GPU，您可能需要将ollama容器的标签更改为支持GPU的标签。如果您在Mac上运行，请按照上面的说明操作，并本地运行Ollama以利用M1/M2。

从根目录运行：

  1. docker-compose up -d
  2. docker exec -it openui-ollama-1 ollama pull llava

如果您已经在环境中设置了OPENAI_API_KEY，只需从OPENAI_API_KEY行中删除=xxx。您也可以将上面的命令中的llava替换为您选择的开源模型（llava是当前唯一支持图像的Ollama模型之一）。现在，您应该能够通过http://localhost:7878访问OpenUI。

如果您对前端或后端进行了更改，您需要运行docker-compose build以使它们在服务中反映出来。

Docker

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

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

现在，您可以转到http://localhost:7878

开发

此存储库中配置了开发容器，这是最快开始的方法。

Codespace

关于 - 图2

当创建Codespace时选择更多选项，然后选择新建选项…。如果您想要非常快的启动时间，请选择美国西部区域。您还需要配置您的OPENAI_API_KEY密钥，或者如果您想尝试Ollama，就将其设置为xxx（您将需要至少16GB的Ram）。

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

  1. cd /workspaces/openui/frontend
  2. npm run dev

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

Ollama

代码空间自动安装了ollama并下载了llava模型。您可以使用ollama list来验证Ollama是否正在运行，如果失败，在新终端中运行ollama serve。在Codespaces中，我们在启动时拉取llava，所以您应该能在列表中看到它。您可以从应用程序左上角的设置齿轮图标中选择Ollama模型。您拉取的任何模型，例如ollama pull llama，都会出现设置模态中。

关于 - 图3

资源

请参阅前端和后端目录中的自述文件。