[发明专利]基于界面设计图自动生成界面代码的方法、装置、介质及电子设备

说明书

本公开提供了一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备。本公开涉及智能决策中的检测模型。通过识别所述界面设计图的界面元素的位置，并根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板和对应的通用代码，根据通用代码与提取所述界面元素的参数结合，从而形成对应的界面代码，另外，还可依据请求指令中携带有需要的风格信息进行参数的调整，使得在原有的通用代码上填充调整后的参数，并生成符合用户喜好的界面设计图和对应的界面代码，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

技术领域

本发明涉及智能决策中的检测模型，特别涉及一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备。

背景技术

在相关技术中，界面设计图的设计需要通过设计师绘图、人工提炼元素和匹配对应的界面参数，并将对应的界面参数交付至开发人员进行界面编程，界面设计图对应的界面生成相当繁琐，工作效率低，并且不利于把握用户喜好。

发明内容

本公开旨在提供一种基于界面设计图自动生成界面代码的方法、装置、介质及电子设备，其能够依据用户的喜好信息进行对应的界面代码自动生成，大大提高界面设计图的工作效率，简化界面设计图生产的工序。

根据本公开的一方面，提供了一种基于界面设计图自动生成界面代码的方法，包括：获取界面设计图；识别所述界面设计图的界面元素的位置；根据识别的界面元素的位置，查找界面元素位置与代码模板对应关系表，获得与所述界面元素的位置对应的代码模板，所述代码模板中含有所述位置的界面元素的界面的通用代码，其中界面元素的参数在代码模板中未填写；提取所述界面元素的参数；响应于接收到用于风格转化的请求指令，所述请求指令中携带有需要的风格信息；根据所述需要的风格信息，查找风格信息与参数改变量匹配关系表，以确定参数改变量，以便将所述参数改变量施加在所述界面元素的参数上；将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码。

在一个实施例中，所述获取界面设计图，包括：接收到待处理界面设计图，并将所述待处理界面设计图转换成灰度图像；对所述灰度图像进行平滑处理，将所述经平滑处理后的灰度图像进行中值滤波处理；将所述中值滤波处理后的灰度图像进行二值化处理，得到二值图像，作为获取到的界面设计图。

在一个实施例中，所述识别所述界面设计图的界面元素的位置，包括：

识别所述二值图像中的边缘曲线，其中，如果二值图像中相邻两个像素点的像素值相同，则用线连接所述相邻两个像素点，用线连接二值图像上所有相邻的像素值相同的像素点后形成的每一条连通曲线为一条边缘曲线；将所述边缘曲线输入至识别界面元素的机器学习模型，由机器学习模型输出所述界面元素。

在一个实施例中，所述机器学习模型通过以下方式预先训练而成：

获取边缘曲线样本集合，所述边缘曲线样本中的每个边缘曲线样本具有贴好的界面元素标签；将所述边缘曲线样本中的每个边缘曲线样本输入机器学习模型，由所述机器学习模型输出判定的界面元素名称，将判定的界面元素名称与贴好的界面元素标签对应，如不一致，则调整所述机器学习模型的系数，使得判定的界面元素名称与贴好的界面元素标签对应。

在一个实施例中，所述将改变后的界面元素的参数填充到所述代码模板中所述参数的对应位置，生成对应于所述风格信息的界面代码，包括：逐一标记各所述改变后的界面元素的参数，各所述标记依序排列；依照顺序检测所述代码模板所空缺的位置，将所述所空缺的位置与所述标记进行匹配；若匹配成功，则将所述标记对应的参数与对应的所述所空缺的位置进行关联，且将所述标记对应的参数填充至对应的所述所空缺的位置，以生成对应于所述风格信息的界面代码。