Design2Code:Ai设计图自动生成前端代码的工具

站长之家 2024-03-07 17:50:14新闻资讯
85

近年来,生成 AI 在多模态理解和代码生成方面取得了显著进展,为前端开发带来了全新的范式。研究人员开展了对视觉设计转换为代码实现任务(称为Design2Code)的系统研究。

Design2Code是一个微软的开源项目,目的是实现提供设计图,转换为前端代码,适用于前端开发者和设计师。

研究人员手动筛选了484个真实网页作为测试用例,并开发了一套自动评估指标,以评估当前多模态 LLMs 能够多大程度上生成直接渲染为给定参考网页的代码实现,以屏幕截图作为输入。

研究人员开发了一套多模态提示方法,并展示了它们在 GPT-4V 和 Gemini Vision Pro 上的有效性。他们还对开源的 Design2Code-18B 模型进行了微调,成功达到了 Gemini Pro Vision 的性能水平。

测试集示例

基准测试中的一些示例(用于评估目的;下面两行)与 Huggingface 创建的合成数据(用于训练目的;第一行)进行比较。基准测试包含具有不同复杂程度的各种现实世界网页。

Design2Code.png

人类评估和自动指标显示,GPT-4V 在这一任务中表现出色,标注者认为 GPT-4V 生成的网页在视觉外观和内容方面有望在49% 的情况下取代原始参考网页。令人惊讶的是,在64% 的情况下,标注者认为 GPT-4V 生成的网页甚至比原始参考网页更好。

基准性能:自动指标

对于自动评估,考虑高级视觉相似性(CLIP)和低级元素匹配(块匹配、文本、位置、颜色)。

Design2Code2.png

模型对比

一些案例研究示例来比较不同的提示方法和不同的模型。

Design2Code3.png

详细的细分指标表明,开源模型在从输入网页中召回视觉元素和生成正确布局设计方面大多落后,而在文本内容和着色方面则可以通过适当的微调得到显著改进。

Design2Code项目入口:https://salt-nlp.github.io/Design2Code/

ai 代码生成工具
THE END
tom
不图事事圆满 但图事事甘心。

相关推荐

站长必备:几款能够快速提升网站SEO优化效果的AI工具推荐
在当今数字化时代,网站的搜索引擎优化(SEO)已经成为每个站长必须面对的重要课题。随着人工智能(AI)技术的发展,越来越多的AI工具开始应用于SEO领域,极大地提升了优化效...
2024-07-24 站长之家
112

Pic Copilot推出AI虚拟试衣工具,革新服饰电商视觉营销
在电商视觉营销领域,阿里国际旗下的Pic Copilot近日推出了一款创新的AI虚拟试衣工具,旨在帮助服饰商家大幅降低商品展示的拍摄成本。这一突破性工具的亮相,预示着服饰电商行...
2024-05-15 新闻资讯
58

微信发布桌面效率AI工具小微助手 支持类ChatGPT在线聊天问答功能
​微信最近发布了一款名为“小微助手”的桌面AI效率工具,旨在通过自然语言处理技术,提升用户在电脑上的工作效率。这款工具不仅支持Windows和Mac操作系统,还具备以下特点:搜...
2024-04-25 新闻资讯
38

Google Maps 引入 AI 工具:概述餐厅 / 景点特色、增强本地人推荐内容等
3 月 28 日消息,谷歌公司近日发布新闻稿,宣布为 Google Maps 应用引入 3 项改进,让你的夏日旅行更轻松。Google Maps 本次更新最值得关注的改进在于借助 Google AI,可以基...
2024-03-28 新闻资讯
23

OptimizerAI:可为AI视频自动配音 还将支持立体声
OptimizerAI是一款专门为视频自动生成音效的AI工具,可以通过文字提示创造出适用于各种场景的声音和音效。用户可以利用这个平台生成适用于多种应用场景的声音效果。
2024-03-11 新闻资讯
54

免费AI背景移除工具iFoto算法升级,发丝都能扣得干净
iFoto这款AI 背景移除工具可以快速消除产品图片中不需要的背景,轻松将在线背景消除器集成到工作流程中 。基于 AI 技术,iFoto 的在线背景移除工具保证了准确性和细致的细节保...
2024-03-08 新闻资讯
29