(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211026365.2 (22)申请日 2022.08.25 (71)申请人 北京沃东天骏信息技 术有限公司 地址 100176 北京市北京经济技 术开发区 科创十一 街18号院2号楼4层A402室 申请人 北京京东世纪贸易有限公司 (72)发明人 王元　 (74)专利代理 机构 中原信达知识产权代理有限 责任公司 1 1219 专利代理师 李雪楠　王志远 (51)Int.Cl. G06F 8/38(2018.01) G06V 10/44(2022.01) G06V 10/56(2022.01) G06V 10/764(2022.01)G06V 10/82(2022.01) G06V 30/18(2022.01) G06V 30/19(2022.01) (54)发明名称 一种页面组件的样式信息的确定方法和装 置 (57)摘要 本发明公开了一种页面组件的样式信息的 确定方法和装置， 涉及超级深度学习技术领域。 该方法的具体实施方式包括： 接收页面组件的样 式生成请求； 其中， 样式生成请求指示了页面组 件的样式图片； 将样式图片输入 预训练的组件样 式模型； 其中， 组件样式模型是根据历史样式图 片的像素点的颜色值和位置值训练得到的； 响应 于样式生成请求， 根据组件样式模型的输出， 得 到页面组件的样式信息。 该实施方式通过按钮组 件的样式信息一键生成的方式， 重复生成页面 UI， 大大提高了组件生成效率， 生成的页面UI样 式准确、 精度较高， 满足用户的精度、 观感和交互 需求， 降低了 前端工程师的人力、 时间成本， 提高 其的开发效率。 权利要求书3页 说明书18页 附图10页 CN 115469867 A 2022.12.13 CN 115469867 A 1.一种页面组件的样式信息的确定方法， 其特 征在于， 包括： 接收页面组件的样式生成请求； 其中， 所述样式生成请求指示了所述页面组件的样式 图片； 将所述样式图片输入预训练的组件样式模型； 其中， 所述组件样式模型是根据历史样 式图片的像素点的颜色值和位置值训练得到的； 响应于所述样式生成请求， 根据所述组件样式模型的输出， 得到所述页面组件的样式 信息。 2.根据权利要求1所述的方法， 其特 征在于， 还 包括： 对所述样式图片进行 预处理， 确定所述页面组件的像素点信息； 将所述页面组件的多个像素点的颜色值和位置值进行对比， 确定所述页面组件的背景 样式信息、 边框样式信息和字体样式信息； 根据所述背景样式信息、 边框样式信息和字体样式信息， 生成所述页面组件的样式信 息， 得到所述组件样式模型。 3.根据权利要求2所述的方法， 其特征在于， 所述对所述样式图片进行预处理， 确定所 述页面组件的像素点信息， 包括： 根据预设裁剪尺寸， 确定所述样式图片的裁剪候选框； 其中， 所述预设裁剪尺寸大于所 述页面组件的最大边框尺寸； 利用所述裁剪候选框对所述样式图片进行裁剪， 确定包含所述页面组件的目标组件区 域； 提取所述目标组件区域的像素点信息作为所述页面组件的像素点信息； 其中， 所述像 素点信息为 二维数组格式。 4.根据权利要求2所述的方法， 其特征在于， 所述将所述页面组件的多个像素点的颜色 值和位置值进 行对比， 确定所述页面组件的背景样式信息、 边框样式信息和字体样式信息， 包括： 根据所述目标组件区域中的各个像素点的最大颜色值， 确定所述页面组件的背景样式 信息； 确定所述目标组件区域的多个定位像素点， 根据多个所述定位像素点的颜色值和位置 值确定所述页面组件的边框样式信息； 根据预训练的文字识别模型、 所述背景样式信息和所述边框样式信息， 确定所述页面 组件的字体样式信息 。 5.根据权利要求4所述的方法， 其特征在于， 所述根据所述目标组件区域中的各个像素 点的最大颜色值， 确定所述页面组件的背景样式信息， 包括： 遍历所述目标组件区域的像素点； 确定当前遍历点的颜色值是否是首次出现， 如果是， 将所述当前遍历点的颜色值添加 至预置的背景颜色数据组； 如果否， 递增所述背景颜色数据组中与所述当前遍历点的颜色 值对应的像素点的数量； 在所述目标组件区域的像素点遍历完毕的情况下， 确定所述背景颜色数据组中的最大 颜色值为所述组件的背景颜色， 得到所述背景样式信息 。 6.根据权利要求4所述的方法， 其特征在于， 所述确定所述目标组件区域的多个定位像权　利　要　求　书 1/3 页 2 CN 115469867 A 2素点， 根据多个所述定位像素点的颜色值和位置值确定所述页面组件的边框样式， 包括： 根据所述目标组件区域的边界像素点的颜色值， 确定第一定位像素点， 根据所述第一 定位像素点的颜色值确定所述页面组件的边框颜色信息； 将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比， 确定所述 页面组件的边框 宽度信息； 确定其余的定位像素点， 根据全部所述定位像素点的位置值， 计算所述页面组件的边 框圆角信息 。 7.根据权利要求6所述的方法， 其特征在于， 所述根据所述目标组件区域的边界像素点 的颜色值， 确定第一定位像素点， 根据所述第一定位像素点的颜色值确定所述页面组件的 边框颜色信息包括： 确定所述目标组件区域的边界像素点； 将所述边界像素点的颜色值顺 次与相邻的像素点的颜色值进行对比， 确定第 一个与所 述边界像素点的颜色值 不同的像素点 为第一定位像素点； 将所述第一定位像素点的颜色值作为所述页面组件的边框颜色， 得到所述页面组件的 边框颜色信息 。 8.根据权利要求7所述的方法， 其特征在于， 所述位置值包括所述像素点的横坐标； 所 述将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进 行对比， 确定所述页 面组件的边框 宽度信息， 包括： 确定所述第一定位像素点的第一横坐标； 递增所述第一横坐标， 得到第二横坐标； 将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对 比， 确定所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值是否相 同； 如果是， 递增所述第二横坐标， 执行所述将所述第一定位像素点的颜色值和与所述第 二横坐标对应的像素点的颜色值进行对比； 如果否， 根据所述第二横坐标与所述第一横坐 标的差， 确定所述 边框宽度信息 。 9.根据权利要求8所述的方法， 其特征在于， 所述位置值还包括所述像素点的纵坐标； 所述确定其余的定位像素点， 根据全部所述定位像素点的位置值， 计算所述页面组件的边 框圆角信息， 包括： 根据所述边界像素点的颜色值、 所述第一定位像素点的颜色值、 所述像素点信息和所 述边框宽度信息， 划定圆角遍历范围， 定位 其余的定位像素点； 根据全部所述定位像素点的横坐标和纵坐标， 计算各个边框圆角的边框圆角半径和边 框圆角圆心； 将多个所述 边框圆角的边框圆角半径和边框圆角圆心组成所述 边框圆角信息 。 10.根据权利要求4所述的方法， 其特征在于， 所述根据预训练的文字识别模型、 所述背 景样式信息和所述 边框样式信息， 确定所述页面组件的字体样式信息， 包括： 利用所述字体识别模型， 确定所述页面组件的字体 类型； 根据与边界像素点的颜色值和第 一定位像素点的颜色值不同的像素点的颜色值， 确定 所述页面组件的字体颜色；权　利　要　求　书 2/3 页 3 CN 115469867 A 3