OpenUI让你用想象力来描述UI,然后实时查看渲染结果

项目地址

点击快速跳转至项目地址

声明: 该文章是对Github优秀项目推荐介绍,如有侵权请联系作者删除

OpenUI项目介绍

构建UI组件可能是一项繁琐的任务。OpenUI旨在使这个过程变得有趣、快速且灵活。我们在W&B使用这个工具来测试和原型化我们的下一代工具,以在LLM之上构建强大的应用程序。

概览

演示

OpenUI让你用想象力来描述UI,然后实时查看渲染结果。你可以请求更改,并将HTML转换为React、Svelte、Web Components等。它像v0,但开源且不那么精致 😝。

在线演示

试试演示

本地运行

你也可以在本地运行OpenUI,并使用Ollama提供的模型。安装Ollama并拉取一个模型,如CodeLlama,然后假设你已经安装了git和python:

bash 复制代码
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
# 你可以通过设置OPENAI_BASE_URL环境变量来更改用于OpenAI兼容API的基本URL
# export OPENAI_BASE_URL=https://api.myopenai.com/v1
python -m openui

Groq

要使用超快速的Groq模型,请将GROQ_API_KEY设置为你的Groq API密钥,你可以在这里找到

你也可以更改用于Groq的默认基本URL(如有必要),例如

arduino 复制代码
export GROQ_BASE_URL=https://api.groq.com/openai/v1

Docker Compose

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

"

在根目录下,你可以运行:

bash 复制代码
docker-compose up -d
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文件:

bash 复制代码
docker build . -t wandb/openui --load
docker run -p 7878:7878 -e OPENAI_API_KEY -e GROQ_API_KEY wandb/openui

现在你可以访问http://localhost:7878

开发

这个存储库中配置了一个开发容器,这是最快的入门方式。

Codespace

新的选项...

创建Codespace时选择更多选项,然后选择新的选项... 。如果你想要非常快的启动时间,请选择美国西部地区。你还需要配置你的OPENAI_API_KEY密钥,或者如果你想尝试Ollama,可以将其设置为xxx (你至少需要16GB的内存)

进入Codespace后,你可以在一个终端中运行服务器:python -m openui --dev。然后在一个新终端中运行:

bash 复制代码
cd /workspaces/openui/frontend
npm run dev

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

Ollama

该Codespace会自动安装ollama并下载llava模型。你可以使用ollama list验证Ollama是否正在运行,如果失败,打开一个新终端并运行ollama serve。在Codespaces中,我们在启动时拉取llava,因此你应该在列表中看到它。你可以从应用程序左上角的设置齿轮图标中选择Ollama模型。你拉取的任何模型,例如ollama pull llama,都会显示在设置模态中。

选择Ollama模型

资源

请参阅前端后端目录中的readme文件。

相关推荐
DogDaoDao2 分钟前
【GitHub】TextGen:开源本地大模型运行平台的终极解决方案
人工智能·深度学习·自然语言处理·开源·大模型·github·textgen
kyriewen10 小时前
你还在手动敲命令部署?GitHub Actions 让你 push 即上线,摸鱼时间翻倍
前端·面试·github
求索实验室14 小时前
让AI真正"看见"界面:纯视觉GUI自动化编排器开源了
github·agent
梦梦代码精17 小时前
《企业开源商城选型:商业闭环、二次开发与成本平衡》
java·开发语言·低代码·开源·github
AI工具测评与分析18 小时前
2026年4月GitHub热门开源项目榜单:AI智能体正式迈入工业化协作时代
人工智能·开源·github
星栈19 小时前
Rust + DDD 三层架构:没有 Spring、没有 DI 容器,解耦能力一点不少
后端·github
梦梦代码精19 小时前
LikeShop 二次开发扩展能力白皮书——面向业务增长的可扩展电商架构实践
java·架构·github
逛逛GitHub19 小时前
推荐 6 个小众但实用的 GitHub 开源项目,有点意思啊。
github
yyuuuzz19 小时前
企业出海中的技术稳定性问题梳理
运维·服务器·网络·github·aws
朱一头zcy21 小时前
Git的下载和基本原理、Git常用命令与分支管理、IDEA集成Git、IDEA关联Github和Gitee
git·gitee·github·intellij-idea