项目地址:Design2Code: How Far Are We From Automating Front-End Engineering
添加图片注释,不超过 140 字(可选)
论文:https://arxiv.org/abs/2403.03163
以下为论文的紧张内容:
添加图片注释,不超过 140 字(可选)
为了系统评估当前AI在设计到代码任务上的表现,研究者构建了首个包含484个真实天下网页的Design2Code基准测试。这些网页从C4数据集中筛选而来,涵盖了各种繁芜性,如企业官网、个人博客、新闻页面等。详细方法为:
从C4数据集的验证集抓取网页链接,得到127.9万个网页。通过自动过滤,移除过长的网页和布局过于大略的网页,终极得到14万个候选网页。对候选网页进行手动筛选,得到484个高质量、多样化和具有寻衅性的真实天下网页,构成Design2Code基准测试。添加图片注释,不超过 140 字(可选)
基准测试不仅关注高层次的视觉相似度,还开拓了低层次元素匹配度的自动评价指标。这些指标包括区块匹配度、文本匹配度、位置匹配度和颜色匹配度,能够全面评估AI天生的代码与原始网页的相似度。包括:
高层视觉相似度:利用CLIP模型打算网页截图的相似度。低层元素匹配:包括块匹配、文本内容、位置和颜色匹配等指标。块匹配:打算匹配块的总面积与所有块的总面积之比。文本内容:打算匹配块中文本的重叠字符数。位置:打算匹配块中央坐标的欧氏间隔。颜色:打算匹配块颜色之间的感知差异。添加图片注释,不超过 140 字(可选)
添加图片注释,不超过 140 字(可选)
基准测试流程:供应网页截图给模型,模型天生HTML代码,利用自动评价指标评估天生代码实现的网页与参考网页的相似度。可进行人工评估。
基准测试:提示和微调研究者利用了GPT-4V和Gemini等商业模型的提示方法,包括直接提示、文本增强提示和自我改动提示。文本增强提示通过提取原始网页中的文本内容,减轻了AI对OCR的依赖。自我改动提示则让AI比较自己天生的页面与原始页面,并据此改进天生代码。
添加图片注释,不超过 140 字(可选)
此外,研究者微调了一个开源的Design2Code-18B模型,该模型在WebSight数据集上进行演习。令人惊异的是,这个“小”开源模型在基准测试中的表现与商业模型Gemini Pro Vision相称。
添加图片注释,不超过 140 字(可选)
结果:自动和人工评价
自动评价指标显示,GPT-4V在各维度指标上表现最佳。人工评价方面,49%的GPT-4V天生页面可以替代原始页面,而64%被认为设计更好。
添加图片注释,不超过 140 字(可选)
剖析
研究者剖析了页面难度与评价指标的干系性,创造标签数量是页面难度的强有力指标。他们还绘制了不同维度指标的学习曲线,创造文本、区块匹配度和位置匹配度在演习初期就快速收敛,而颜色匹配度和视觉相似度须要更多演习才能提高。
添加图片注释,不超过 140 字(可选)
添加图片注释,不超过 140 字(可选)
定性剖析显示,文本增强提示紧张通过提高文本召回率来改进性能,而自我改动提示则可以找回遗漏的元素和改动布局缺点。
添加图片注释,不超过 140 字(可选)
添加图片注释,不超过 140 字(可选)
结论和未来事情Design2Code基准测试为前端工程自动化供应了一个主要的评估平台。研究者操持进一步改进提示方法,探索利用真实网页演习开源模型,并将输入扩展到设计工具导出的格式。此外,将基准测试扩展到动态网页也是一个值得探索的方向。
结论Design2Code技能的涌现,为前端开拓者供应了新的可能。只管目前尚有改进空间,但已经证明能够天生高质量代码,并替代乃至改进原始设计。这无疑将为前端工程带来深远影响。