Design2Code:提供设计图,让多模态LLM自动生成前端代码
划重点:
⭐️ 生成 AI 在近年来取得了快速进展,提供图让态具有前所未有的设计生成多模态理解和代码生成能力。
⭐️ 研究对可视化设计转换为代码实现的多模代码任务进行了系统研究,提出了一套自动评估指标。自动
⭐️ GPT-4V 在任务中表现出色,前端生成的提供图让态网页在视觉外观和内容方面有望取代原始参考网页。
CSS站长资源(ChinaZ.com)3月7日 消息:近年来,设计生成生成 AI 在多模态理解和代码生成方面取得了显著进展,多模代码为前端开发带来了全新的自动范式。研究人员开展了对视觉设计转换为代码实现任务(称为 Design2Code)的前端系统研究。
Design2Code是提供图让态一个微软的开源项目,目的设计生成是实现提供设计图,转换为前端代码,多模代码适用于前端开发者和设计师。自动
研究人员手动筛选了484个真实网页作为测试用例,前端并开发了一套自动评估指标,以评估当前多模态 LLMs 能够多大程度上生成直接渲染为给定参考网页的代码实现,以屏幕截图作为输入。
研究人员开发了一套多模态提示方法,并展示了它们在 GPT-4V 和 Gemini Vision Pro 上的有效性。他们还对开源的 Design2Code-18B 模型进行了微调,成功达到了 Gemini Pro Vision 的性能水平。
测试集示例
基准测试中的一些示例(用于评估目的;下面两行)与 Huggingface 创建的合成数据(用于训练目的;第一行)进行比较。基准测试包含具有不同复杂程度的各种现实世界网页。
人类评估和自动指标显示,GPT-4V 在这一任务中表现出色,标注者认为 GPT-4V 生成的网页在视觉外观和内容方面有望在49% 的情况下取代原始参考网页。令人惊讶的是,在64% 的情况下,标注者认为 GPT-4V 生成的网页甚至比原始参考网页更好。
基准性能:自动指标
对于自动评估,考虑高级视觉相似性(CLIP)和低级元素匹配(块匹配、文本、位置、颜色)。
模型对比
一些案例研究示例来比较不同的提示方法和不同的模型。
详细的细分指标表明,开源模型在从输入网页中召回视觉元素和生成正确布局设计方面大多落后,而在文本内容和着色方面则可以通过适当的微调得到显著改进。
项目入口:https://top.aibase.com/tool/design2code
(责任编辑:知识)
- ·DrugAssist:基于LLM的分子优化模型 可以用自然语言与人类实时交互
- ·ChatGPT 隐私提示:限制与 OpenAI 共享的数据的两种重要方法
- ·报道:美国政府将就对微软、OpenAI 和英伟达展开反垄断调查
- ·估分140多分!四川学霸出考场:高中白学了 题太简单
- ·中国数据库排行出炉:阿里自研PolarDB登顶!
- ·小米折叠屏!MIX Fold 4入网:支持卫星通信、5.5G
- ·17岁女孩酷似87版林黛玉走红:正努力学习表演技巧
- ·midjourney提示词分享 22个效果超好的人像提示词
- ·免费领!雷军龙年限量红包封面来了:雷军与小米SU7帅气合照
- ·抵御 AI 数据抓取威胁 Cara 应用成为艺术家的新避风港
- ·忘记带身份证怎么坐火车 两种方法请牢记
- ·互动小说“嫁接”短剧,能帮ReelShort扳回一局吗?
- ·腾讯混元团队推出图生视频模型“Follow-your-Pose-V2”
- ·Qwen2完全指南:阿里通义千问模型使用方法教程与免费使用地址入口
- ·女子发愁春节红包:我1个娃对方3个 专家:发红包应与收入匹配
- ·OpenAI新作署名Ilya,提取1600万个特征看透GPT-4大脑!
- ·AI玩法又升级!X博主通过Runway“穿越”《模拟人生》
- ·从DLSS到AI玩家: 英伟达CEO表示视频游戏将完全融入人工智能
- ·AI拜年模拟器“决战拜年之巅”网络走红 快来看看你是不是“大孝子”
- ·男生说个出考场是因为太饿了:急着回家吃饭