(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211164220.9 (22)申请日 2022.09.23 (71)申请人 上海汇付支付有限公司 地址 200233 上海市徐汇区宜山路70 0号C5 栋5楼 (72)发明人 周晔　穆海洁　胡鹏程　赵天龙　 (74)专利代理 机构 上海专利商标事务所有限公 司 31100 专利代理师 施浩 (51)Int.Cl. G06F 16/958(2019.01) G06N 20/00(2019.01) G06V 10/44(2022.01) G06V 10/46(2022.01) (54)发明名称 基于机器学习识别图形并转换为网页代码 的方法和系统 (57)摘要 本发明公开了一种基于机器学习识别图形 并转换为网页代码的方法和系统， 能够根据 Sketch设计图自动生成网页代码。 其技术方案 为： 系统包括图形解析编码引擎、 与图形解析编 码引擎连接的低代码平台， 其中图形解析编码引 擎配置为接收Sketch设计稿的数据， 其中一部分 数据生成为HTML代码以供直接发布； 另一部分数 据生成为DSL描述文件后输出至低代码平台； 低 代码平台配置为对DSL描 述文件进行二次配置后 发布。 权利要求书2页 说明书6页 附图3页 CN 115455332 A 2022.12.09 CN 115455332 A 1.一种基于机器学习识别图形并转换为网页代码的系统， 其特征在于， 系统包括图形 解析编码引擎、 与图形解析编码引擎连接的低代码平台， 其中： 图形解析编码引擎配置为： 接收Sketch设计稿的数据， 其中一部分数据生成为HTML代 码以供直接发布； 另一部分数据生成为D SL描述文件后输出至低代码平台； 低代码平台配置为： 对D SL描述文件进行二次配置后发布。 2.根据权利要求1所述的基于机器学习识别图形并转换为网页代码的系统， 其特征在 于， 图形解析编码引擎包括图形 处理模块、 分别与图形处理模块相连的DSL生 成模块和HTML 生成模块， 其中： 图形处理模块， 配置为对Sketch设计稿的数据进行图形分析处理， 将图形分析处理的 结果输出至DSL生成模块和 HTML生成模块， 其中图形分析处理是通过机器学习训练所得的 模型匹配出Sketc h设计稿各个区域的图形， 识别出布局类型、 页面控 件类型； DSL生成模块， 配置为在根据图形处理模块所得的页面布局及控件类型、 位置在内的信 息判断为需要生成的是D SL的情况 下， 生成D SL描述文件； HTML生成模块， 配置为在根据图形处理模块所得的页面布局及控件类型、 位置在内的 信息判断为需要生成的是HTML的情况 下， 生成原生的HTML代码。 3.根据权利要求2所述的基于机器学习识别图形并转换为网页代码的系统， 其特征在 于， 图形处 理模块包括图形计算模块、 深度学习模块和模型匹配模块， 其中： 图形计算模块， 根据Sketc h使用的基础组件计算页面的布局以及控 件类型、 位置； 深度学习模块， 对图形结算模块的输出结果进行特征提取并与存量数据进行对比分 析， 形成相应的模式； 模式匹配模块， 辅助图形计算模块中先进行模式匹配， 对匹配成功 的对象直接根据所 匹配的模式进行包括页面布局、 控 件类型及位置在内的数据提取处 理。 4.根据权利要求1所述的基于机器学习识别图形并转换为网页代码的系统， 其特征在 于， 低代码平台包括组件匹配模块、 样式转换模块、 页面 适配模块和代码生成模块， 其中： 组件匹配模块配置为： 根据DSL描述文件 匹配出整个页面需要使用的低代码平台组件， 低代码平台组件 包括布局组件、 基础组件； 样式转换模块配置为： 对匹配出的控件根据DSL描述文件的描述， 修改控件样式、 大小 以及布局位置； 页面适配模块配置为： 根据不同分辨 率进行响应式布局， 以适配不同分辨 率设备； 代码生成模块配置为： 根据选择的前端 主流框架生成对应的代码。 5.一种基于 机器学习识别图形并转换为网页代码的方法， 其特 征在于， 方法包括： 步骤1： 图形解析编码引擎接收Sketc h设计稿； 步骤2： 图形解析编码引擎根据Sketch使用的基础组件计算页面的布局以及控件类型、 位置在内的信息； 步骤3： 图形解析编码引擎将Sketch设计稿的一部分数据生成为HTML代码以供直接进 行代码发布； 步骤4： 图形解析编码引擎将Sketch设计稿的另一部分数据生成为DSL描述文件， 并导 入到低代码平台； 步骤5： 低代码平台基于 接收到的D SL描述文件经二次配置后进行代码发布。权　利　要　求　书 1/2 页 2 CN 115455332 A 26.根据权利要求5所述的基于机器学习识别图形并转换为网页代码的方法， 其特征在 于， 步骤2进一 步包括： 步骤2.1:对Sketch文件进行边缘检测、 轮廓检测， 提取Sketch文件中识别到的所有图 形特征； 步骤2.2： 进行特征检测， 对图形中识别到的图形特征逐个进行识别， 其中包括提取每 个图形特征的特征点与匹配模板进行匹配， 得 出页面的布局、 控 件类型及位置 。 7.根据权利要求6所述的基于机器学习识别图形并转换为网页代码的方法， 其特征在 于， 在步骤2.2中， 引入深度学习和模式匹配： 对图形进行特征提取并与存量数据进行对比 分析， 以形成相应的模式， 以在特征检测的处理中先进 行模式匹配， 对匹配成功的对象直接 根据所匹配的模式进行包括页面布局、 控 件类型及位置在内的数据提取处 理。 8.根据权利要求5所述的基于机器学习识别图形并转换为网页代码的方法， 其特征在 于， 步骤5的二次配置进一 步包括： 根据DSL描述文件匹配出整个页面需要使用的低代码平台组件， 低代码平台组件包括 布局组件、 基础组件； 对匹配出的控 件根据DSL描述文件的描述， 修改控 件样式、 大小以及布局位置； 根据不同分辨 率进行响应式布局， 以适配不同分辨 率设备； 根据选择的前端 主流框架生成对应的代码。权　利　要　求　书 2/2 页 3 CN 115455332 A 3