项目地址：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技能的涌现，为前端开拓者供应了新的可能。只管目前尚有改进空间，但已经证明能够天生高质量代码，并替代乃至改进原始设计。这无疑将为前端工程带来深远影响。