多模态大模型在前端开发领域的应用探索-51CTO.COM

一、大模型生成前端代码

1.GPT4自动生成前端网页

GPT4展示了一个功能，画一张草图，并把它拍照发给GPT-4，GPT-4可以从图片中提取文字信息并输出HTML，自动生成网站的原型图。

输入草图：

图片

输出页面代码：

图片

2.微调的必要性

一些开源项目基于GPT4做出比较惊艳的效果，例如：

https://github.com/abi/screenshot-to-code

这个工程可以将屏幕截图转换为代码（HTML/Tailwind CSS，或者 React 或 Bootstrap 或 Vue）。它使用 GPT-4 Vision（或 Claude 3）来生成代码，并使用 DALL-E 3 来生成类似外观的图像。

我们看下该工程实际调用gpt4的提示：

You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps 
using Tailwind, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).
 
- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family, 
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
 
In terms of libraries,
 
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
 
Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.

从提示内容看：

任务目标：根据输入的网页截图，生成相应的html代码，尽量和输入的截图保持一致
细节要求：文本内容、颜色、背景、字体等尽量精确
页面中的图片，在 https://placehold.co上寻找图片作为图片组件的placeholder
自我修正：可以接收第二张图片（上一步生成的网页），并更新生成的网页代码内容，让他更接近原始截图输入
引入cdn.tailwindcss.com，从而不需要再生成css代码

效果比较亮眼，但实际使用还存在一些问题，现有的大模型如GPT4、Gemini等支持的图片生成前端代码，大多输出的是html代码，但实际开发中，前端一般会将UI界面不同粒度的物料组件化，例如搜索框、按钮这种基础组件，或者计时器、券、视频、轮播等这种带有业务属性的组件，又或者更大颗粒度的 UI 区块。html代码可能对前端开发的用处不大。

二、大模型出现之前的前端代码生成

其实在大模型出现之前，就有很多页面生成的工作，比如pix2code、Sketch2Code，他们使用深度学习技术实现从一张 UI 截图识别生成 UI 结构描述，然后将 UI 结构描述转成 HTML代码；

也有一些实际生产任务的工作，比如阿里的imgcook可以通过识别设计稿（Sketch/PSD/图片）智能生成 React、Vue、Flutter、小程序等不同种类的代码，并在同年双 11 大促中自动生成了 79.34% 的前端代码，智能生成代码不再只是一个线下实验产品，而是真正产生了价值。

图片

imgcook本质是通过设计工具插件从设计稿中提取 JSON 描述信息，通过规则系统、计算机视觉和机器学习等智能还原技术对 JSON 进行处理和转换，最终得到一个符合代码结构和代码语义的 JSON，再用一个 DSL 转换器，转换为前端代码。DSL 转换器就是一个 JS 函数，输入是一个JSON，输出就是我们需要的代码。例如 React DSL 的输出就是符合 React 开发规范的 React 代码。

imgcook中包含多个机器学习、图像识别、自然语言的AI模型；我们看其中一个组件识别的例子；

图片

如果希望能生成组件粒度的代码，需要能识别视觉稿中的组件，并且转化成对应的组件化代码。例如以下视觉稿中电饭煲位置处是一个视频，但从视觉稿中只能提取到图片信息，并生成如右侧的代码。

如何识别组件类别，有两种方法，一个是目标检测、，另外一个是图像分类；

图片

训练目标检测模型需要输入大量样本，样本是视觉稿的整张图片，并且需要给图片标记你想要模型识别的组件，训练出可以识别组件的目标检测模型，当有的新的需要识别的设计稿时，将设计稿图像输入给模型识别，最终得到模型识别的结果。

使用目标检测的方案会存在一些问题：

样本完全需要人工打标，需要收集 UI 图片，对图片中的组件进行标记。如果要新增一个分类，需要给每张图片重新打标，打标成本很大；

既需要识别出正确的位置，还需要识别出正确的类别。视觉稿图像中背景是很复杂的，容易被误识别；

就算识别出的类型是准确的，也会有位置偏差。

图片

imgcook是基于设计稿的，因此可以从设计稿中获取图像的 JSON 描述信息，图像中每个文本节点和图像节点都已经具备位置信息，并且经过 imgcook 智能还原后能生成较为合理的布局树。所以我们可以基于这个布局树，以容器节点为粒度将可能的组件节点裁剪出来。

例如我们可以把这里的 div/view 节点都裁剪出来，就可以得到一个小的图片的集合，然后将这些图片送给一个图片分类模型预测，这样我们把一个目标检测问题转换成了一个图片分类问题。

模型会给每张图片在每一个分类中分配一个概率值，某个分类的概率值越大表示模型预测该图片是这个分类的概率越大。我们可以设置一个置信度为 0.7，当概率值大于置信度 0.7 时则认为是最终分类的结果，例如上图中，最终只有两张图片是可信的识别结果。如果对分类的准确度要求很高，就可以将置信度设置高一点。

相比目标检测，使用图片分类方案，样本可以用程序自动生成，无需人工打标；只需要识别类别，类别准确则位置信息绝对准确。所以我们改用基于布局识别结果的图片分类方案，识别准确度大大提升。

三、大模型实现前端代码生成的近期工作

介绍一篇最近的大模型在前端代码生成上的工作

Design2Code: How Far Are We From Automating Front-End Engineering

整体贡献：

提出了前端代码生成的benchmark，包含484张真实网页数据；
提出一种前端代码生成的自动评估方案，包括图像高级相似度、细节相似度、人工评价等；
提出提示改进的方法，提高大模型在前端代码生成的效果；
微调design2code-18B模型，效果和gemini相当；

数据集构建：

代码文件中删除所有注释，然后应用长度过滤器来排除源代码文件具有超过10万个标记（基于GPT-2标记器）的示例。过滤所有布局仅由图像或文本组成的网页，布局设计过于简单，不适合进行基准测试。这将在过滤和重复数据消除后产生14k个网页。
剥离了所有此类外部文件依赖项，使所有网页独立，这包括：删除所有＜script＞＜audio＞＜iframe＞＜map＞＜svg＞标记，删除所有链接到外部网站的＜link＞标记，移除＜a＞标记中的所有href链接，以及移除＜object＞元素中的所有外部文件。图像和视频文件，我们将它们替换为占位符文件，在基准测试期间，我们将指示模型在适用的地方插入此占位符文件，以保留原始布局。
最后一轮手动策展过滤：（1）网页没有外部文件依赖性，可以从处理后的代码文件和提供的占位符图像文件中独立呈现。（2）该网页不包含任何私人、敏感或潜在有害信息（例如，我们从约会网站上删除了个人资料页面）。（3）所呈现的网页格式良好（例如，不同布局元素之间不应存在重叠，并且上述自动处理不应干扰网页设计的任何部分）。获得了484个测试示例，作为我们的基准。

自动评估方案：

整体视觉相似度:利用CLIP模型计算两个网页截图的特征相似度
元素匹配度:分别检测两个网页中的视觉元素,计算它们的匹配程度
文本相似度:比较匹配元素的文本内容相似度
位置相似度:比较匹配元素的位置坐标相似度
颜色相似度:比较匹配元素的颜色相似度

提示改进：

直接prompt:直接将网页截图作为输入,要求模型生成对应的HTML/CSS代码。这是最简单直接的方式
文本增强prompt:在网页截图之外,还将网页中的文本内容提取出来一并输入给模型。这样可以减轻模型进行OCR的负担,使其专注于网页布局、样式等方面
自我修正prompt:先用文本增强prompt生成初版网页,再要求模型将其与参考网页截图进行比较,找出差异并进行自我修正,迭代优化。

各个模型的表现：

图片

四、结合低代码平台

低代码平台通过提供直观的图形界面和拖放式组件，使非技术用户或开发者能够轻松地构建和部署应用程序的前端界面，从而显著降低了前端开发的技术门槛和时间成本。

让大模型生成低代码平台内部的json DSL语法，输入可以是文本描述，或者网页截图，从而减少拖拉拽的人工操作，应该是比较好的结合点，相比直接生成html文件来说，大模型和低代码平台的结合可能根据实际应用价值。

数据样例：

text：生成一个 amis 表单，包含用户名、密码输入框

DSL:

{
  "type": "form",
  "title": "表单",
     "body": [
       {"type": "input-text", "name": "username", "label": "用户名"},
       {"type": "input-password", "name": "password", "label": "密码"}
    ]
}

image：

图片

如何获取数据，参考百度低代码平台爱速搭和大模型结合的案例：

通过程序化排列组合，比如表单项有很多通用配置项，类似必填、尺寸等，每个表单项都会生成一遍，避免了人工重复编写。
问题自动扩充，比如同一句话可以有不同说法，通过大模型的方式来扩充类似问题，可以成倍扩充问题数。
根据答案反向生成问题，这是参考 Humpback 里的思路，训练一个反向生成问题的模型，然后拿一堆 amis schema 来反向生成问题。

有了数据，可以基于多模态大模型微调，实现页面截图到DSL代码的生成，并且嵌入到低代码平台中，做为辅助编程助手。