华中科技大学和重庆大学的研究人员提出了一种名为 LaTCoder 的新方法，将网页设计图像自动转换为代码（即设计到代码，design-to-code）。这种方法通过引入“布局即思考”（Layout-as-Thought，LaT）的概念，显著提高了网页设计在代码生成过程中的布局保真度。
例如，有一个复杂的网页设计，包含多个模块（如头部导航栏、内容区域、侧边栏等）。传统方法直接将整个设计图像输入到多模态大语言模型（MLLMs）中生成代码，但往往会导致布局信息丢失。而 LaTCoder 会先将设计图像分割成多个小块（如导航栏为一块、内容区域为一块等），然后分别生成每个小块的代码，最后再将这些代码块组装成完整的网页代码，从而更好地保留原始设计的布局。
主要功能
- 自动将网页设计图像转换为代码：输入网页设计图像，输出对应的 HTML 和 CSS 代码。
- 增强布局保真度：通过“布局即思考”（LaT）方法，确保生成的网页代码在布局上与原始设计高度一致。
- 支持多种多模态大语言模型（MLLMs）：可以与不同的 MLLMs（如 DeepSeek-VL2、Gemini、GPT-4o 等）结合使用，提升代码生成的准确性和效率。
主要特点
- 布局保真度高：通过分块处理和布局信息的锚定，显著减少布局信息丢失。
- 适应复杂布局：专门针对复杂布局设计了新的基准数据集 CC-HARD，验证了其在复杂布局上的有效性。
- 灵活的代码组装策略：提供绝对定位和基于 MLLM 的两种组装策略，并通过动态选择机制优化输出。
- 可扩展性强：支持多种 MLLMs，可根据实际需求选择合适的模型。
工作原理
- 布局感知分割（Layout-Aware Division）：
- 使用一种高效的算法将网页设计图像分割成多个小块（称为“块”），并记录每个块的边界框（BBox）信息。
- 确保文本区域的完整性，避免分割线穿过文本。
- 采用网格采样技术提高分割效率。
- 块级代码生成（Block-Wise Code Synthesis）：
- 根据每个块的图像，使用基于“链式思考”（Chain-of-Thought，CoT）的提示方法，引导 MLLMs 生成每个块的代码。
- 生成的代码块遵循统一的 HTML 模板，确保整体风格一致。
- 布局保留组装（Layout-Preserved Assembly）：
- 使用两种策略组装代码块：绝对定位（APS）和基于 MLLM 的组装（MS）。
- 通过动态选择机制，根据生成结果的质量选择最优的组装策略。
- 使用验证器（Verifier）评估生成网页与原始设计的相似度，进一步优化输出。
测试结果
- 自动评估指标：
- 在 Design2Code-HARD 数据集上，使用 DeepSeek-VL2 时，TreeBLEU 分数提高了 58.33%，MAE 降低了 25.31%。
- 在更复杂的 CC-HARD 数据集上，TreeBLEU 分数提高了 66.67%，MAE 降低了 38.53%。
- 人类偏好评估：
- 在与基线方法的对比中，人类标注者在超过 60% 的情况下更倾向于选择 LaTCoder 生成的网页。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
