Design2Code：利用大语言模型将视觉设计自动转换为前端代码

Design2Code项目探索了利用生成式人工智能，特别是多模态大语言模型（LLMs），将视觉设计自动转换为前端代码的可能性。 研究团队手工整理了484个真实世界网页作为测试案例，并开发了一套自动评估指标，以评估当前多模态LLMs能在多大程度上直接将给定参考网页的截图转换成代码实现。 此外，他们还开发了一系列多模态提示方法，并证明了这些方法在GPT-4V和Gemini Vision Pro上的有效性。研究中还对一个开源的Design2Code-18B模型进行了微调，使其成功达到了与Gemini Pro Vision相当的性能。 无论是通过人工评估还是自动指标，GPT-4V都被证明是此任务的最佳选择。注解者认为，在49%的情况下，GPT-4V生成的网页在视觉外观和内容方面可以替代原始参考网页；令人惊讶的是，在64%的情况下，GPT-4V生成的网页被认为甚至优于原始参考网页。 研究团队为了更好地理解和评估多模态大型语言模型（LLMs）在将视觉设计转换成前端代码（即Design2Code任务）的能力，采取了以下两个重要步骤：基准测试和评估、技术创新和提示方法。 基准测试和评估 为了系统地衡量模型在Design2Code任务上的性能，研究团队开发了一套自动评估指标，并辅以全面的人工评估。 自动评估指标 ：自动评估指标设计用来比较生成的网页与给定参考网页之间的相似度，包括布局、文本内容、元素位置和颜色等多个维度。这些指标使得评估过程能够高效、客观地进行，减少了对人工评估的依赖。

人工评估 ：尽管自动评估指标能提供大量有用的性能数据，但人工评估仍然不可或缺，因为它能够捕捉到自动指标可能忽略的细微差别，例如视觉美感、用户体验等方面。全面的人工评估补充了自动评估，提供了对模型性能的深入理解。

技术创新和提示方法 为了最大化多模态LLMs在Design2Code任务上的性能，研究团队提出了多种创新的提示方法。 文本增强提示 ：这种方法通过将视觉输入（如网页截图）与从网页中提取的文本元素结合，减轻了模型在光学字符识别（OCR）方面的负担。这使得模型能够更专注于布局设计，而不是从图像中提取文本。

自我修订提示 ：灵感来自于使用大型语言模型自我改进其生成内容的最新研究，自我修订提示要求模型评估其先前生成的代码，并根据原始设计进行改进。这种方法促使模型反复迭代，以逐步接近更准确和更高质量的代码实现。

型号比较示例 Design2Code -18B 研究团队微调并分享了一个开源的Design2Code -18B模型，该模型的性能与商业模型Gemini Pro Vision相媲美，展示了专门化的小型开源模型和从合成数据中获得技能的潜力。该模型主要基于先进的大型语言模型，并通过在特定的Design2Code任务上的训练来提升其性能。 Design2Code -18B的主要能力和特点： 多模态输入处理 ：Design2Code -18B能够处理包含视觉（如网页截图）和文本输入的复合信息，这使得模型能够理解和解析视觉设计的细节并将其转换为代码。