首页 > 营销学院 > IT资讯

多模态大模型在前端开发领域的应用探索

一、大模型生成前端代码

1.GPT4自动生成前端网页

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

输入草图：

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

多模态大模型在前端开发领域的应用探索

输出页面代码：

多模态大模型在前端开发领域的应用探索

2.微调的必要性

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

https://www.php.cn/link/9afa24d3da745fd5606e7d710a0763eb

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

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

You are an expert Tailwind developerYou 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 h*e already built, and asked toupdate 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 n*igation 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 h*e 15 items. DO NOT LE*E 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 图片，对图片中的组件进行标记。如果要新增一个分类，需要给每张图片重新打标，打标成本很大；

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

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

kgogoprime

KGOGOMall 是一套采用 Php + MySql 开发的基于 WEB 应用的 B/S 架构的B2C网上商店系统。具有完善的商品管理、订单管理、销售统计、新闻管理、结算系统、税率系统、模板系统、搜索引擎优化，数据备份恢复，会员积分折扣功能，不同的会员有不同的折扣，支持多语言，模板和代码分离等，轻松创建属于自己的个性化用户界面。主要面向企业和大中型网商提供最佳保障，最大化满足客户目前及今后的独立

0 查看详情 kgogoprime

多模态大模型在前端开发领域的应用探索

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代码的生成，并且嵌入到低代码平台中，做为辅助编程助手。

以上就是多模态大模型在前端开发领域的应用探索的详细内容，更多请关注其它相关文章！

# 大模型 # 代码 # 绑定 # 表单 # 多模 # follo # claude # gemini # 网页布局 # 排列 # git # bootstrap # vue # css # 多模态 # 三水b2b全网营销推广公司 # 荆门抖音推广营销公司 # 塘厦网站seo推广优化 # 广西seo建站总结 # 长宁网站的建设 # 承德湖南网站优化推广 # 东营抖音付费营销推广公司 # 禁漫网站seo # 酒类网站建设好处 # 铜川网站推广服务 # 转换为 # 越大 # 不应 # 这是 # 是一个 # 我们可以 # 自动生成

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2024-05-10

Notion AI怎么写笔记 Notion AI辅助写作及自动摘要生成技巧【教学】 AI一键生成高质量论文大纲 Claude帮你改写和润色文章 Claude写作风格优化技巧怎么用ai创作绘本 AI儿童故事与插画自动生成【秘籍】去哪旅行ai抢票助手怎么查看抢票历史_去哪旅行ai抢票助手历史记录查询与筛选【教程】如何用AI一键去除图片背景？AI自动抠图去底最强工具【实测】 DeepSeek数学建模应用指南 DeepSeek解决复杂问题技巧如何用AI一键扩图补全背景？Photoshop AI生成填充使用技巧【教程】 DeepSeek辅助撰写技术文档方法 DeepSeek开发者必备技巧文心一言官方网站在线入口文心一言在线版使用地址 Kimi国内访问入口_Kimi智能助手网页版链接直达如何用AI生成室内设计效果图？AI装修设计灵感生成指南【教程】 AI一键生成社交媒体自动回复蚂蚁阿福官网网页版入口_电脑端使用医保与健康服务如何用AI一键去视频水印 AI视频无痕去水印软件使用方法【教程】 Claude帮你解读晦涩的学术理论 Claude知识学习助手 Jasper AI怎么写社交媒体帖子 Jasper AI社媒内容创作【攻略】 DeepSeek长代码项目理解与分析 DeepSeek代码库学习方法 DeepSeek进行科学计算教程 DeepSeek物理建模与* AI一键生成短视频分镜头脚本

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。