CN105930159B - 一种基于图像的界面代码生成的方法及系统 - Google Patents

Abstract

本发明实施例公开了一种基于图像的界面代码生成的方法及系统，其方法包括：输入待处理的UI设计图并进行预处理；对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历和深度搜索的方法得到多个图层；利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；利用递归生成不同图层的方法得到界面完整的HTML代码。本发明实施例增强了图像界面代码转换的效率，增强用户体验度。

Description

一种基于图像的界面代码生成的方法及系统

技术领域

本发明涉及计算机技术领域，尤其涉一种基于图像的界面代码生成的方法及系统。

背景技术

专利CN201010194523.6的一种基于模板的用户应用界面代码自动生成方法。这一方法通过对于客户的要求分析业务需求，通过获得的需求业务模型，解析业务模型并搜索典型界面模板库。又有专利CN200610001470.5的一种界面自动生成方法和系统。这一方法通过编译配置文件生成配置描述代码，将代码加载到内存空间，从而形成用户应用界面。

专利CN201010194523.6在使用时分析业务需求来对应不同的模板界面，大大降低了灵活性。如果后期业务变更频繁，或者同样的业务需求但是有多种可能，工作量依然很大。

专利CN200610001470.5其界面都是根据配置文件临时生成的，生成的界面是死的，用户不能根据自己的需求来调整界面内容，降低了用户体验。

发明内容

本发明基于图像的界面代码生成的方法及系统，提高了图像界面代码转换的效率，增强用户体验度。

为了解决上述问题，本发明提出了一种基于图像的界面代码生成的方法，包括如下步骤：

输入待处理的UI设计图并进行预处理；

对处理后的设计图进行类型识别，判断UI用途；

利用蛇形遍历和深度搜索的方法得到多个图层；

利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；

建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；

利用递归生成不同图层的方法得到界面完整的HTML代码。

所述输入待处理的UI设计图并进行预处理包括：

通过图像锐化和去噪使得图像画质得到增强。

所述对处理后的设计图进行类型识别，判断UI用途包括：

搜集不同类型用户界面建立一个UI图库；

使用SIFT算法进行图片识别获取图片特征值；

使用特征值匹配库内对应类型的界面，找到相似度最高的一类用来定义这个设计图的类型。

所述利用蛇形遍历和深度搜索的方法得到多个图层包括：

切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘；

得到层叠的多图层数据的预期效果。

所述利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容包括：

处理背景图片，将UI设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色信息。

所述将UI设计图中的文字转化为文本信息包括：

解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；

将这个字从整个图像中分割出来；

运用K-means提取文字图像；

利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。

所述利用递归生成不同图层的方法得到界面完整的HTML代码包括：

编写一种代码转换程序；

利用递归生成不同图层的方法得到界面完整的HTML代码

将得到的page类的对象传入并获得源代码。

相应的，本发明还提供了一种基于图像的界面代码生成的系统，所述系统包括：

预处理模块，用于输入待处理的UI设计图并进行预处理；

图形识别模块，用于对处理后的设计图进行类型识别，判断UI用途；

图层处理模块，用于利用蛇形遍历和深度搜索的方法得到多个图层；

图层定位模块，用于利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；

页面层次化模块，用于建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；

代码化模块，用于利用递归生成不同图层的方法得到界面完整的HTML代码。

通过实施本发明实施例，通过图片预处理，增强图像画质，对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历+深度搜索的方法得到多个图层，利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性等全部的网页页面信息，最后利用递归生成不同图层的方法得到界面完整的HTML代码，增强了图像界面代码转换的效率，增强用户体验度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明实施例中的基于图像的界面代码生成的方法流程图；

图2是本发明实施例中的缘分割算法代码示例图；

图3是本发明实施例中的主页型的页面结构示意图；

图4是本发明实施例中的登录/注册页型的页面常见的布局方式结构示意图；

图5是本发明实施例中的基于图像的界面代码生成的系统结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例的基于图像的用户界面代码自动生成的方法包括：输入待处理的UI设计图并进行简单预处理，如画质增强；对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历+深度搜索的方法得到多个图层，利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性等全部的网页页面信息，最后利用递归生成不同图层的方法得到界面完整的HTML代码。

相应的，图1示出了本发明实施例中的基于图像的界面代码生成的方法流程图，其具体实施过程如下：

S101、输入待处理的UI设计图并进行预处理；

首先可以对UI设计图进行预处理，通过锐化，去噪等手段都可以使画质得到增强，防止了噪声等图片的干扰因素在实际操作中使用识别算法和切割算法造成的不精确的结果，极大地提升后续切割图像和识别图像的精确度。

实施本发明实施例的方法，可以解决用户界面代码自动生成普遍存在的低灵活性。同时我们使用了改进的分割算法加强了图像分割的精度，建立有独特的存储页面信息的数据结构(如页面类型，图层维度，组件，背景等)，将页面信息参数化并通过将数据传入相应程序从而生成对应代码段，实现了高效率的UI开发过程。

S102、对处理后的设计图进行类型识别，判断UI用途；

具体实施过程中，通过搜集大量主页，登陆/注册页，产品列表页等现有的不同类型用户界面建立一个UI图库；使用SIFT算法进行图片识别获取图片特征值；使用特征值匹配库内对应类型的界面，找到相似度最高的一类，用来定义这个设计图的类型。

S103、利用蛇形遍历和深度搜索的方法得到多个图层；

使用利用蛇形遍历+深度搜索的方法进行图像分割，并在分割过程中记录图层的Z-index值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果，改进后的边缘分割算法如图2中所示。

在实际实施中，可能遇到很多种情况使得一般的分割算法精度不高，或是不能满足我们对于UI设计图的分割要求。但是经改进后的分割算法能够解决将边框像素为1的边界准确划分的问题，设置合理的阈值解决了把渐变色图形错误分割的问题，引入参数z表示不同的图层，体现了控件之间的包含关系，并以此划分。在分割的过程中，通过记录分割出的控件的相对位置等信息，为之后的代码自动生成打下基础。

以下是关于这种算法的几点说明：

当边缘像素为1的时候，要加一个判断条件，即不仅要比较一个点周围的点，还要拿这个点与周围的点进行比较，防止出现边缘像素为1，边缘两侧颜色相近的情况，边缘像素大于1的时候，算法将每次切割最外层边缘。

因为有些图片是渐变色的，如果仅仅是判断颜色不同，可能会把渐变色的图也给划分为了边缘，这样就会使划分精度下降，引进一个阈值，只有颜色变化大于这个值的时候才会识别为边缘。

对于非矩形的图形，我们可以判断遍历的点能不能回到“原点”，一般来说矩形图形都能回到“原点”，其他一些不规则图形则不能回到“原点”。

深度遍历图形，引进Z值来表示图层的覆盖关系。

S104、利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；

识别不可分割的最小子图层内容的步骤包括：处理背景图片，将UI设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色等信息。

在具体实施过程中，通过从分割UI设计图中得到图中所有生成页面所需的数据，图层的划分和各图层的属性信息收集，最后得到构成页面的最小的各个元素，也就是z指数最高的图层(不能继续划分出更多图层)，这些图层可能包括图像，文字，控件或者带有超链接的文字。下面识别构成这些图层的HTML元素。

1、背景图片

取图片的几个特征点，利用这些点的颜色亮度，生成与原图色调尽可能相似的纯色图片，用来提示前端工程师加入哪张图片的源地址。

2、将UI设计图中的文字转化为文本信息

通过控件属性，如形状，文字等判断控件类型的步骤包括：解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；将这个字从整个图像中分割出来，具体方法有间距法、垂直投影法、基于多行的垂直投影法等；运用K-means提取文字图像，K-means算法是运用聚类分析或者文法判断的方式得到每个汉字的字符与文字图像的对应，以此训练一个能够涵盖几乎全部文字图像的字符集。利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。具体的特征匹配可采用欧氏距离算法。

3.控件等其他元素

在具体识别这些图层的HTML元素主要是依靠文字(内容和颜色)以及不同页面类型中图层的定位完成，有如下几种判据：

判据一：文字/图像内容，首先在大量页面中采集信息，建立一个可能与lable等不同控件对应的文字库，并对这个文字库按照字典顺序建立索引。同样，很多控件有时使用扁平化的图像代替文字对用户表明自己的功能，对这些图像我们可以建立一个图像库，类似上文中区分网页类型，使用sift算法对获取的图像与数据库中图像特征值进行匹配。

判据二：不同页面类型中图层的位置，位置信息的使用依赖于页面类型的区分，举例说明，图3和图4分别是主页型的页面和登录/注册页型的页面常见的布局方式；

当图层中识别出来与文字库中相匹配的文字，比如“搜索”(相关联的HTML页面元素是<label>)，如果这个图层处在图3中的1，则认为这个元素有相当大的可能是<label>标签，但如果该图层位于图3的3，可能只是某文本信息中出现的词语。同样，文字出现在图3的2中，则很有可能是下拉列表。此外，同样的词语在不同类型的页面中可能是由不同控件构成，比如“注册”出现在图4的1中，可能是<label>，出现在图4中，有更大的可能来自一个表单的<input>标签，如<form><input type＝”submit”><form>。

判据三：Z—index同样的文字内容，z指数越高，越有可能是<text>或者<label>。

判据四：文字形状，颜色不同功能的文字(超链接/文本信息/控件名称)的字形往往不同，比如超链接经常是蓝色，有下划线。比如<text>标签中的提示信息往往颜色较浅。

利用综合概率P_X判断控件类型，其中x＝1，2，3...分别对应不同的控件，如表1；P_x代表x取到某一值时对应概率。

P_X＝P_main+P_z+P_offset

P_main＝P(x,word,location)是主要依据，通过判据一、判据二中文字的内容和位置与所建文字库比对后得出；

P_z＝P(x,z-index)是次要依据，通过判据三中Z指数的取值求出；

P_offset＝P(x,property)是额外依据，通过判据四中文字的属性如颜色等得出。

最后，取P_x最大时所对应的x值为有效值，待定HTML元素即为其对应控件类型。

表一

S105、建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；

建立层次化的数据结构存储UI设计图中的图层，控件，图像，文字的内容和属性等全部的网页页面信息数据结构。

实际实施中，改数据结构中存储了主页中的不同层次(z)中的各个组件的相对位置，大小，颜色，类型，文字等丰富的信息，为代码自动生成提供了足够的条件。

S106、利用递归生成不同图层的方法得到界面完整的HTML代码。

编写一种代码转换程序；利用递归生成不同图层的方法得到界面完整的HTML代码。将上述步骤得到的page类的对象传入并获得源代码。

通过将上述步骤中获得的记录了页面控件信息的数据结构使用这一代码转换程序进行分析，就可以获得对应的用户界面代码。

相应的，图5示出了本发明实施例中的基于图像的界面代码生成的系统结构示意图，该系统具体包括：

预处理模块，用于输入待处理的UI设计图并进行预处理；

图形识别模块，用于对处理后的设计图进行类型识别，判断UI用途；

图层处理模块，用于利用蛇形遍历和深度搜索的方法得到多个图层；

图层定位模块，用于利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容；

页面层次化模块，用于建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性全部的网页页面信息；

代码化模块，用于利用递归生成不同图层的方法得到界面完整的HTML代码。

综上，本发明通过图片预处理，增强图像画质，对处理后的设计图进行类型识别，判断UI用途；利用蛇形遍历+深度搜索的方法得到多个图层，利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，建立层次化的数据结构记录UI设计图中的图层，控件，图像，文字的内容和属性等全部的网页页面信息，最后利用递归生成不同图层的方法得到界面完整的HTML代码，增强了图像界面代码转换的效率，增强用户体验度。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁盘或光盘等。

另外，以上对本发明实施例所提供的基于图像的界面代码生成的方法及系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (6)

1.一种基于图像的界面代码生成的方法，其特征在于，包括如下步骤：

输入待处理的UI设计图并进行预处理；

对处理后的设计图进行类型识别，判断UI用途；

利用蛇形遍历和深度搜索的方法得到多个图层，具体为：使用蛇形遍历+深度搜索的方法进行图像分割，并在分割过程中记录图层的Z-index值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果；

利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，具体为：处理背景图片，将UI设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色等信息；

建立层次化的数据结构记录UI设计图中的图层、控件、图像、文字的内容和属性全部的网页页面信息；

利用递归生成不同图层的方法得到界面完整的HTML代码。

2.如权利要求1所述的基于图像的界面代码生成的方法，其特征在于，所述输入待处理的UI设计图并进行预处理包括：

通过图像锐化和去噪使得图像画质得到增强。

3.如权利要求1所述的基于图像的界面代码生成的方法，其特征在于，所述对处理后的设计图进行类型识别，判断UI用途包括：

搜集不同类型用户界面建立一个UI图库；

使用SIFT算法进行图片识别获取图片特征值；

使用特征值匹配库内对应类型的界面，找到相似度最高的一类用来定义这个设计图的类型。

4.如权利要求1所述的基于图像的界面代码生成的方法，其特征在于，所述将UI设计图中的文字转化为文本信息包括：

解决图像中文字区域存在的放置稍微倾斜甚至颠倒的现象，减少其对后续识别处理的影响；

将这个字从整个图像中分割出来；

运用K-means提取文字图像；

利用神经网络算法将图像文字分割后的单字图像进行特征提取，然后与训练库进行匹配。

5.如权利要求1所述的基于图像的界面代码生成的方法，其特征在于，所述利用递归生成不同图层的方法得到界面完整的HTML代码包括：

编写一种代码转换程序；

利用递归生成不同图层的方法得到界面完整的HTML代码

将得到的page类的对象传入并获得源代码。

6.一种基于图像的界面代码生成的系统，其特征在于，所述系统包括：

预处理模块，用于输入待处理的UI设计图并进行预处理；

图形识别模块，用于对处理后的设计图进行类型识别，判断UI用途；

图层处理模块，用于利用蛇形遍历和深度搜索的方法得到多个图层，具体为：使用蛇形遍历+深度搜索的方法进行图像分割，并在分割过程中记录图层的Z-index值，以达到切割出矩形图层而不会将文字或图片中颜色突变的地方当做切割边缘，得到层叠的多图层数据的预期效果；

图层定位模块，用于利用文字结合不同类型的界面中的定位识别不可分割的最小子图层内容，具体为：处理背景图片，将UI设计图中的文字转化为文本信息，识别不同控件以及获取控件的位置，颜色等信息；

页面层次化模块，用于建立层次化的数据结构记录UI设计图中的图层、控件、图像、文字的内容和属性全部的网页页面信息；

代码化模块，用于利用递归生成不同图层的方法得到界面完整的HTML代码。