通过数据合成推进视觉语言模型在前端开发中的应用

现代前端（FE）开发，尤其是当利用诸如 React 和 Vue 等框架的独特功能时，呈现出独特的挑战。包括管理模块化架构、确保数据与视觉输出之间的同步以实现声明性渲染，以及适配到各种情境下的可复用组件。这些复杂性使得状态最先进的大型视觉语言模型（VLM）难以直接从设计图像生成准确且功能完善的代码。为此，我们提出了一种反思性代理工作流程，用于合成高质量的图像-文本数据，以捕捉前端开发的多样化特征。该工作流程自动从真实项目中提取自包含\footnote{“自包含代码片段是指封装了所有必要逻辑、样式和依赖的片段，确保其独立运行，无需外部导入或上下文。”}代码片段，渲染相应的视觉输出，并生成将设计元素与功能代码关联的详细描述。为进一步扩大合成数据的范围和实用性，我们引入了三种数据合成策略：基于演化的合成，实现可扩展且多样化的数据集扩张；基于瀑布模型的合成，生成源自系统需求的逻辑连贯代码；以及基于增量开发的合成，迭代增加人类编写组件的复杂性。我们构建了一个大型视觉语言模型 Flame，基于合成数据集进行训练，展示了其在通过 $\text{pass}@k$ 指标生成 React 代码方面的有效性。我们的结果表明，针对图像进行代码生成前的解释训练的 VLM 可能达到更好的性能。