聊聊天就搞定UI，开源的AI网页生成工具

做网页可以是个难者不会，会者不难的活，我就只会找找模版来解决。

今天我们分享一个开源项目，用户只需用自然语言描述理想的UI，它就能实时渲染出设计预览，并输出可用的代码，它就是：OpenUI

openui 是什么

OpenUI 的目标是让这个过程变得有趣、快速且灵活。它是一款开源的AI代码生成器，根据描述生成UI界面，并能够输出HTML、CSS等前端代码，支持React、Svelte等框架，简化前端开发流程，通过生成式AI降低前端开发门槛，提高设计和编码效率，推动人机协作成为未来的常态。

使用OpenUI非常简单，只需在文本框中输入对所需界面的描述，即可生成对应的UI效果图，并可通过指令进行实时修改和添加简单的动态效果。

本项目的背后是 Weights & Biases，一家做机器学习工具的公司，目前做各种大模型的开发工具，之前他们出过一个训练大模型最佳实践的白皮书，还挺不错，有兴趣的朋友可以私信，我发给你。

安装部署

首先OpenUI有个在线的demo环境可以直接体验，建议大家可以先去上面玩玩，不需要绑key，直接能用。地址：openui.fly.dev/

除了在线demo外，你也可以自己在本地部署，可以参考如下命令来安装 OpenUI：

bash复制代码
git clone <https://github.com/wandb/openui>
cd openui/backend
# You probably want to do this from a virtual environment
pip install .
# This must be set to use OpenAI models, find your api key here: <https://platform.openai.com/api-keys>
export OPENAI_API_KEY=xxx
python -m openui

默认情况下是使用OpenAI，当然你也可以使用本地的 Ollama 提供的模型。例如安装 Ollama 并拉取像 CodeLlama 模型。使用本地模型时把OPENAI_API_KEY设成xxx。

项目还支持Docker的方式运行。Docker compose启动可以参考如下：

bash复制代码docker-compose up -d
docker exec -it openui-ollama-1 ollama pull llava

使用OpenUI

使用OpenUI的的话可以有2种方式，交互对话和从图片生成。

而OpenUI相较于一般的代码生成工具所不同的是，可以在生成结果的基础上持续的进行改进，一直到满意为止，这样的使用体验的比较好的。

• 一种交互对话是从描述入手，比如我说要创建一个用户登录页面，那么OpenUI会帮我们返回一下的结果。

之后还可以针对不满意的地方进行局部修改，比如我们希望把标题变得更大、变个颜色等。

openui默认生成HTML和JSX的代码，也可以转换为Svelte、vue等，这点还不错。

生成的代码还可以，看起来挺规整。

• 另外一种使用方法是通过图片来生成初步的设计。我上传这样一张图片到openui。

生成的结果是下面这样的，感觉识别度不是太高。

当然到这里和前面一样，是可以继续通过自然语言描述来改进页面内容的。

这里顺带提一下，我使用在线的demo环境，默认是gpt3.5-turbo，也可以更具需要换成gpt4.0-turbo。

总结

看了下openui的源代码结构，它主要分为前端frontend和后端backend两部分。

frontend就是UI，包括指令输入区、图片输入区、生成代码浏览区和前端页面绘制区。

backend则负责与大模型交互，默认情况下调用的是openAI的GPT4，所以会要求输入openAI的key，GPT4具有多模态能力，既能理解图片又能生成代码。

整体体验下来，openui目前还处于开发的前期，虽然有了一个不错的架子，但是离实际应用还是有些差距。它的定位应该是希望成为v0.dev的开源替代，它已经具备了通过逐步对话来完善项目的功能，但是细节方面还有不够，希望可以快速发展真的成为v0.dev的替代。

读者福利：如果大家对大模型感兴趣，这套大模型学习资料一定对你有用

对于0基础小白入门：

如果你是零基础小白，想快速入门大模型是可以考虑的。

一方面是学习时间相对较短，学习内容更全面更集中。
二方面是可以根据这些资料规划好学习计划和方向。

资源分享

大模型AGI学习包

资料目录

1. 成长路线图&学习规划
2. 配套视频教程
3. 实战LLM
4. 人工智能比赛资料
5. AI人工智能必读书单
6. 面试题合集

《人工智能\大模型入门学习大礼包》，可以扫描下方二维码免费领取！

1.成长路线图&学习规划

要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

2.视频教程

很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，其中一共有21个章节，每个章节都是当前板块的精华浓缩。

3.LLM

大家最喜欢也是最关心的LLM（大语言模型）

《人工智能\大模型入门学习大礼包》，可以扫描下方二维码免费领取！