基于大模型的前端图生码技术实践-李永超.pdf

1、扫/码/关/注 重庆 两江软件园 海王星数字创园(5楼)华为主任程师 李永超 随着模型赋能千百业，前端智能化也迎来了突破性发展。以 GPT 系列为代表的模型已经证明AI在辅助研发具备巨潜，如 AI 辅助代码续写、重构、DT 等。在前端领域，我们探索了码（基于模板）、图码等。本次分享介绍了如何综合运机器视觉、深度学习及模型推理技术实现图成前端代码的技术（以下简称 D2C）。AI成的代码同时符合华为编程规范和 UX 设计规范。根据华为内部实践统计数据，D2C 平均代码接纳率超过50%，在新开发场景平均提效 30%以上。基于模型的前端图码技术实践HUAWEI TECHNOLOGIES CO.,LTD

2、.Huawei Confidential 基于模型的前端图码技术实践分享人：李永超日期：2024.10HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 前端开发痛点开发作量，周期新代码不符合业界最佳实践前端 UI组件学习成本140+组件，检索+学习平均要10+分钟/组件开发在版本开发中占据30%的作量从UX设计师开发保真到原型实现需要3天写代码存在不符合 UX规范业务团队的前端问题占超过50%，其中样式问题、实现致性问题等占据30%以上,即使是员也经常犯错，引发问题UX规范UI内源项1)布局不合理2)适应差3)后期维护成本HUAWEI TECHNO

3、LOGIES CO.,LTD.Huawei Confidential D2C简介 D2C是种通过使智能化技术将设计稿转化为代码的具，旨在提升开发效率，减少成本，并缩短设计到开发的流程。通过将设计稿源件（如：PSD、Sketch、Figma）转化为React、Vue、程序等平台的前端代码，再使领域特定语（DSL）将其转化为各端代码，D2C通常通过智能训练的模型或算法实现。D2C业务流及开发流程构建图码技术，动成UI界图像处理+深度学习成静态代码HTML控件图低/保真图输提示词成代码成保真图HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 华为智能编程

4、助-CodeArts Snap介绍HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential D2C整体技术案Opencv视觉识别深度学习组件识别保真图框架划分组件标注布局识别算法模型推理与调优DSL可运代码HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential D2C插件架构设计能开放语料训练图像训练模型微调代码成Agent对接 识别处理层 框架识别ROI提取组件识别基础设施API训练定义AgentAI产线代码规范布局计算DSL成 UX规范Eslint 编程规范Prettier 样式规范CSS参数表推理优化层技术栈选

5、择户接层框架场景表单场景图表场景稿场景混合场景实时渲染YOLOCodeArts SnapHUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 代码：https:/codehub- TECHNOLOGIES CO.,LTD.Huawei Confidential D2C插件持的场景框架表单稿图表HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 框架场景持栅格框架场景，动成看板布局注：框架识别是基于背景提取的框架，需要具有完整的矩形边框1.明显的边框背景2.具有框架边线HUAWEI TECHNOLOGIES C

6、O.,LTD.Huawei Confidential 框架识别技术HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 表单场景持表单场景动成标题，表单项 等内容注：1.背景同样需要接近的纯2.尽量使清图3.组件之间间距不宜过4.不能有扰信息，如：必选提示HUAWEI TECHNOLOGIES CO.,LTD.Huawei Confidential 关键实现：?基于OpenCV图片区域，组件以及特征进行识别，确定组件类型以及位置关系表单组件识别技术HUAWEI TECHNOLOGIES CO.,LTD.Huawe