上班的时候我用多模态大模型openui将组内所有前端代码重新生成一遍，同事们晚上聚餐没叫我_大模型 生成前端代码

我在前面的文章中介绍过谷歌的多模态大模型ScreenAI，简单来说就是，只要输入一张图片，以及一个指令，ScreenAI就会输出导航、标注、总结等文本。

例如，如果手机操作系统或者某个订餐APP集成了ScreenAI，用户只需要通过语音告诉ScreenAI今天想吃哪家菜馆的什么菜了，它就能自动导航到商家主页自动下单付款了。

这其中最关键的是模型能理解图片中的UI元素和布局，也就是模型要具备多模态的能力。

既然已经能识别出UI元素和布局了，那么我们顺着接这个茬继续搞点事情，能不能再利用大模型的代码能力生成html代码呢？

01openui：具有多模态能力的前端代码生成器

诶，这就是今天的主角openui要做的事情。

项目主页：https://github.com/wandb/openui

其代码刚开源一周就成功登顶Github Trending榜首。

还是老规矩，先用起来，再讲原理。

在线网址：https://openui.fly.dev/ai/new

openui支持输入指令文本或图片，或者是两者组合。

如果我们看到某个网页很酷，但又无法获取源代码，此时，就可以截个图输入到openui，openui就会按照图片生成前端代码，还可以通过指令文本对原图进行细微修改。

用例一

我们先来个最简单的，就通过指令文本生成一个用户注册界面。

输入“User registration interface”，点击“->”。

openui就在最下方生成了html代码，并且对界面进行渲染

openui不仅可以生成html、jsx代码，展开“+”还可以生成其它语言的前端代码。

用例二

接下来尝试仅通过一张图片生成前端代码，例如，让openui生成谷歌翻译主界面的前端代码。

将下面图片拖入openui主界面，点击“->”。

最终效果如下，虽然有些元素没有识别出来，但整体上还是实现了图片内容。

用例三

最后测试一下图片和文本指令组合，我们在图片的基础上加一句话：add a botton to the bottom,the content is “follow me”，openui也按照指令要求完成了页面的制作。

02openui技术原理

接下来让我们简单来了解下背后的原理。

openui的设计很思路清晰，通过openui的源代码可知，它主要分为前端frontend和后端backend两部分。

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

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

除了体验在线版本，也可以通过下面代码本地部署openui。

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
1
2
3
4
5
6
7

熟悉docker的，也可以通过下面代码启动openui镜像。

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

除了调用openAI的GPT4，还可以通过ollama本地部署大模型，ollama默认会下载llava多模态大模型。

如果使用GPT3.5，因为它不具有多模态能力，那么输入图片功能就会受到限制，只能通过描述生成代码。

在openui的项目主页中也提到了另一个项目V0，V0功能与openui类似，但它是闭源的。

https://v0.dev

最后还是老生常谈的那句话，介绍工具不是最终目的，通过介绍大模型的应用案例向大家表明，AI在重塑各行业，大模型正在加速这个过程。

​

如何学习AI大模型？

现在社会上大模型越来越普及了，已经有很多人都想往这里面扎，但是却找不到适合的方法去学习。

作为一名资深码农，初入大模型时也吃了很多亏，踩了无数坑。现在我想把我的经验和知识分享给你们，帮助你们学习AI大模型，能够解决你们学习中的困难。

我已将重要的AI大模型资料包括市面上AI大模型各大白皮书、AGI大模型系统学习路线、AI大模型视频教程、实战学习，等录播视频免费分享出来，需要的小伙伴可以扫取。

一、AGI大模型系统学习路线

很多人学习大模型的时候没有方向，东学一点西学一点，像只无头苍蝇乱撞，我下面分享的这个学习路线希望能够帮助到你们学习AI大模型。

二、AI大模型视频教程

三、AI大模型各大学习书籍

四、AI大模型各大场景实战案例

五、结束语

学习AI大模型是当前科技发展的趋势，它不仅能够为我们提供更多的机会和挑战，还能够让我们更好地理解和应用人工智能技术。通过学习AI大模型，我们可以深入了解深度学习、神经网络等核心概念，并将其应用于自然语言处理、计算机视觉、语音识别等领域。同时，掌握AI大模型还能够为我们的职业发展增添竞争力，成为未来技术领域的领导者。

再者，学习AI大模型也能为我们自己创造更多的价值，提供更多的岗位以及副业创收，让自己的生活更上一层楼。

因此，学习AI大模型是一项有前景且值得投入的时间和精力的重要选择。