CN110377282B - 基于生成对抗和卷积神经网络的UI生成Web代码的方法 - Google Patents

基于生成对抗和卷积神经网络的UI生成Web代码的方法 Download PDF

Info

Publication number
CN110377282B
CN110377282B CN201910562411.2A CN201910562411A CN110377282B CN 110377282 B CN110377282 B CN 110377282B CN 201910562411 A CN201910562411 A CN 201910562411A CN 110377282 B CN110377282 B CN 110377282B
Authority
CN
China
Prior art keywords
html
generating
picture
code
sim
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910562411.2A
Other languages
English (en)
Other versions
CN110377282A (zh
Inventor
孙小兵
徐勇
李斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yangzhou University
Original Assignee
Yangzhou University
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Yangzhou University filed Critical Yangzhou University
Priority to CN201910562411.2A priority Critical patent/CN110377282B/zh
Publication of CN110377282A publication Critical patent/CN110377282A/zh
Priority to PCT/CN2020/085880 priority patent/WO2020259036A1/zh
Priority to US17/622,698 priority patent/US11579850B2/en
Application granted granted Critical
Publication of CN110377282B publication Critical patent/CN110377282B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/20—Image preprocessing
    • G06V10/25—Determination of region of interest [ROI] or a volume of interest [VOI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/044—Recurrent networks, e.g. Hopfield networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/045—Combinations of networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/047—Probabilistic or stochastic networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/048—Activation functions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/08—Learning methods
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/08—Learning methods
    • G06N3/088—Non-supervised learning, e.g. competitive learning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/70—Determining position or orientation of objects or cameras
    • G06T7/73—Determining position or orientation of objects or cameras using feature-based methods
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/74—Image or video pattern matching; Proximity measures in feature spaces
    • G06V10/761—Proximity, similarity or dissimilarity measures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/77—Processing image or video features in feature spaces; using data integration or data reduction, e.g. principal component analysis [PCA] or independent component analysis [ICA] or self-organising maps [SOM]; Blind source separation
    • G06V10/7715—Feature extraction, e.g. by transforming the feature space, e.g. multi-dimensional scaling [MDS]; Mappings, e.g. subspace methods
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/82—Arrangements for image or video recognition or understanding using pattern recognition or machine learning using neural networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2207/00—Indexing scheme for image analysis or image enhancement
    • G06T2207/20—Special algorithmic details
    • G06T2207/20084—Artificial neural networks [ANN]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2207/00—Indexing scheme for image analysis or image enhancement
    • G06T2207/30—Subject of image; Context of image processing
    • G06T2207/30176—Document

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Evolutionary Computation (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Computing Systems (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Computational Linguistics (AREA)
  • Data Mining & Analysis (AREA)
  • Multimedia (AREA)
  • Databases & Information Systems (AREA)
  • Biophysics (AREA)
  • Mathematical Physics (AREA)
  • Molecular Biology (AREA)
  • Biomedical Technology (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Medical Informatics (AREA)
  • Human Computer Interaction (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Probability & Statistics with Applications (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种基于生成对抗和卷积神经网络的UI生成Web代码的方法，包括：构建HTML元素显示效果与其源代码的映射关系；识别图片I中HTML元素的位置；生成I完整的HTML代码；求取人工编写的HTML代码与生成的HTML代码的相似度Sim1；求取图片I与经生成的HTML代码生成的图片I1的相似度Sim2；将Sim1和Sim2平衡为Sim0，判别Sim0与阈值t的关系，若Sim0小于t，重复上述过程，反之，执行下一步；经过上一步训练，获得图片到HTML代码的生成模型M，将待处理的UI图片输入模型M即得到相应的HTML代码。本发明方法能够获得图片到HTML代码的生成模型M，对M输入待处理的UI图片，便能生成相应的HTML代码，普适性和通用性更强，可以取代实际开发中的部分环节，使实际使用成本更低、应用领域更广。

Description

基于生成对抗和卷积神经网络的UI生成Web代码的方法
技术领域
本发明属于软件开发领域，特别是一种基于生成对抗和卷积神经网络的UI生成Web代码的方法。
背景技术
由于软件产品的规模和复杂性爆炸式增长，快速开发软件变得越来越具有挑战性，尤其在软件开发的初期阶段，设计师设计好原型图，将原型图用代码实现出来，这个工作量非常繁重且效率极低。通过研究软件代码的自动生成，开发人员可以在开发过程中，加速自己的开发进度，更快速的实现软件功能，最终迅速的推出自己的软件产品。因此，对自动软件代码生成的研究越来越重要。
目前针对自动代码生成有很多技术，包括基于模板的Freemarker、XSLT、velocity,基于模型驱动的MDA、MDD，基于对象关系映射的ORM、MVC，基于文档注释的Annotation、XDoclet，以及基于代理动态类的AOP、PROXY、ASM，这些自动代码生成方法都只是在软件开发过程中起着局部的辅助作用，并不能取代软件开发的某个环节，对提高软件开发速度的作用相当有限。此外，这些自动代码生成方法，都需要先进行相关领域的学习，再掌握了这些方法后才可在实际开发中进行应用，其使用门槛较高，不利于大多数开发人员使用，故普适性差，不能大规模应用于实际开发中。
发明内容
本发明的目的在于提供一种成本低、准确性高、应用范围广的UI生成Web代码的方法。
实现本发明目的的技术解决方案为：基于生成对抗和卷积神经网络的UI生成Web代码的方法，包括以下步骤：
步骤1、构建HTML元素显示效果与其源代码的映射关系；
步骤2、对UI图片I进行目标识别，识别I中HTML元素的位置；
步骤3、结合步骤1的映射关系和步骤2的HTML元素的位置，生成图片I完整的HTML代码；
步骤4、针对上述UI图片I，求取人工编写的HTML代码与生成的HTML代码的相似度Sim1；
步骤5、求取UI图片I与经所述生成的HTML代码生成的图片I1的相似度Sim2；
步骤6、步骤2、3构成生成对抗网络GAN中的生成网络G，步骤4、5构成GAN中的判别网络D，对G和D进行极小极大博弈，在所有可能的G和D中，求出平衡解，即使得G生成与人工编写的HTML代码具有相同分布的HTML代码，所述平衡解将步骤4中的Sim1和步骤5中的Sim2平衡为Sim0，之后判别Sim0是否大于设定的阈值t，若Sim0小于t，重复步骤2至步骤5，反之，执行步骤7；
步骤7、经过步骤6的训练，根据最终获得的GAN的生成网络G和判别网络D即获得图片到HTML代码的生成模型M，将待处理的UI图片输入模型M即得到相应的HTML代码。
本发明与现有技术相比，其显著优点为：1)充分利用计算机视觉技术，预先对UI图片进行目标识别处理，以改善HTML元素显示效果与其源代码的映射关系，使其映射关系更可靠，准确性更高；2)获得了HTML元素显示效果与代码的映射关系，且该映射关系可以不断被扩充，最终强化本发明的模型效果，提高了图片生成代码的准确性，应用范围更广；3)获得了图片到HTML代码的转换模型，在实际使用时，只需提供相应的图片输入，便能得到最终的代码结果，可以取代实际开发中的部分环节，使实际使用成本更低、应用领域更广。
下面结合附图对本发明作进一步详细的描述。
附图说明
图1为本发明基于生成对抗和卷积神经网络的UI生成Web代码的方法的流程图。
图2为本发明实施例中输入的Web设计图demo1.png。
图3为本发明实施例中针对demo1.png进行目标识别后的Button目标图。
图4为本发明实施例中针对demo1.png进行目标识别后的Divider目标图。
图5为本发明实施例中针对demo1.png进行目标识别后的Flag目标图。
图6为本发明实施例中针对demo1.png进行目标识别后的Icon目标图。
图7为本发明实施例中针对demo1.png进行目标识别后的Breadcrumb目标图。
图8为本发明实施例中针对demo1.png进行目标识别后的Message目标图。
图9为本发明实施例中针对demo1.png进行目标识别后的Checkbox目标图。
图10为本发明实施例中对demo2.html进行运行后的截图。
具体实施方式
结合图1，本发明基于生成对抗和卷积神经网络的UI生成Web代码的方法，包括以下步骤：
步骤1、构建HTML元素显示效果与其源代码的映射关系；
步骤2、对UI图片I进行目标识别，识别I中HTML元素的位置；
步骤3、结合步骤1的映射关系和步骤2的HTML元素的位置，生成图片I完整的HTML代码；
步骤4、针对上述UI图片I，求取人工编写的HTML代码与生成的HTML代码的相似度Sim1；
步骤5、求取UI图片I与经所述生成的HTML代码生成的图片I1的相似度Sim2；
步骤6、步骤2、3构成生成对抗网络GAN中的生成网络G，步骤4、5构成GAN中的判别网络D，对G和D进行极小极大博弈，在所有可能的G和D中，求出平衡解，即使得G生成与人工编写的HTML代码具有相同分布的HTML代码，所述平衡解将步骤4中的Sim1和步骤5中的Sim2平衡为Sim0，之后判别Sim0是否大于设定的阈值t，若Sim0小于t，重复步骤2至步骤5，反之，执行步骤7；
步骤7、经过步骤6的训练，根据最终获得的GAN的生成网络G和判别网络D即获得图片到HTML代码的生成模型M，将待处理的UI图片输入模型M即得到相应的HTML代码。
进一步优选地，步骤1具体为：利用卷积神经网络CNN(Convolutional NeuralNetwork)提取HTML元素的特征图，将HTML元素的特征图与HTML代码一一对应。常见的HTML元素有：Elements(Button、Container、Divider、Flag、Header、Icon、Image、Input、Label、List、Loader、Placeholder、Rail、Reveal、Segment、Step)、Collections(Breadcrumb、Form、Grid、Menu、Message、Table)、Views(Advertisement、Card、Comment、Feed、Item、Statistic)、Modules(Accordion、Checkbox、Dimmer、Dropdown、Embed、Modal、Popup、Progress、Rating、Search、Shape、Sidebar、Sticky、Tab、Transition)。
进一步优选地，步骤2中对UI图片I进行目标识别，识别I中HTML元素的位置，具体包括：
步骤2-1、利用卷积神经网络CNN提取UI图片I的特征图，具体为：利用卷积层convolution、池化层pooling、修正线性单元ReLU(Rectified Linear Unit)三层提取特征图，在卷积时进行扩边处理，以保证多次卷积后不改变输入和输出的矩阵大小；
步骤2-2、利用候选框网络RPN生成目标候选框；
步骤2-3、由池化层pooling中的候选框池化RoI(Region of Interest)Pooling层提取所述目标候选框对应的候选特征图；
步骤2-4、结合目标候选框对应的候选特征图，由分类层检测目标候选框最终的精确位置即UI图片I中HTML元素的位置。
进一步优选地，步骤2-2中利用候选框网络RPN(Region Proposal Network)生成目标候选框，具体为：
步骤2-2-1、在原图I中设置
Figure BDA0002108632890000041
个候选锚点，其中，SW为原图宽的缩放比例，SH为原图高的缩放比例，Z为整数；
步骤2-2-2、利用CNN判断哪些锚点为有目标的前景点，哪些为没目标的背景点；
步骤2-2-3、对有目标的前景点进行边框回归处理，由此获得其对应的目标候选框。
示例性优选地，SW＝16，SH＝16，Z＝9。
进一步优选地，步骤2-3中由池化层pooling中的候选框池化RoI Pooling层提取所述目标候选框对应的候选特征图，具体为：
假设所述目标候选框的大小为M×N，缩放比例为SW×SH；
步骤2-3-1、将目标候选框的尺度映射为
Figure BDA0002108632890000042
步骤2-3-2、将尺度映射后目标候选框对应的特征图区域水平分为pooledw×pooledh的网格；
步骤2-3-3、对每一个网格中的特征图进行最大池化处理，由此获得目标候选框对应的候选特征图。
进一步优选地，步骤2-4中结合目标候选框对应的候选特征图，由分类层检测目标候选框最终的精确位置即UI图片I中HTML元素的位置，具体为：
步骤2-4-1、针对每个候选特征图，通过全连接层与softmax分类器计算每个目标候选框具体属于哪个HTML元素，获得目标候选框的粗略位置，并输出其概率向量；
步骤2-4-2、结合概率向量，利用边框回归法获得每个目标候选框的位置偏移量，用于回归更加精确的目标框。
进一步地，步骤3中结合步骤1的映射关系和步骤2的HTML元素的位置，生成图片I完整的HTML代码，具体为：
步骤3-1、利用CNN提取步骤2获得的精确位置的目标候选框对应的特征图；
步骤3-2、结合步骤1中映射关系，按步骤3-1所述特征图的值去匹配与该特征图对应的HTML代码，由此获得图片I内所有HTML元素对应的HTML代码；
步骤3-3、将所有HTML代码块组合，生成最终的完整HTML代码。
进一步地，步骤4中针对上述UI图片I，计算人工编写的HTML代码与生成的HTML代码的相似度Sim1，具体为：
步骤4-1、分别抽取人工编写的HTML代码与生成的HTML代码中属性class值的集合S1、S2；
步骤4-2、利用Jaccard系数求取相似度Sim1为：
Figure BDA0002108632890000051
式中，S1为人工编写的HTML代码中属性class值的集合，S2为生成的HTML代码中属性class值的集合。
示例性优选地，步骤5所述经生成的HTML代码生成图片I1包括两种方式：
利用现代标准浏览器运行生成的HTML代码，对显示结果进行截图获得I1；
或者，利用Python的imgkit包渲染生成的HTML代码即获得I1。
示例性优选地，步骤5中求取UI图片I与经所述生成的HTML代码生成的I1的相似度Sim2，具体为：结合图片相似度算法中的直方图、图像模板匹配、感知哈希算法，获得相似度Sim2。
实施例
本发明基于生成对抗和卷积神经网络的UI生成Web代码的方法，包括以下内容：
1、构建HTML元素显示效果与其源代码的映射关系，具体为：利用CNN提取HTML元素的特征图，将HTML元素的特征图与HTML代码一一对应。
常见的HTML元素包括Elements(Button、Container、Divider、Flag、Header、Icon、Image、Input、Label、List、Loader、Placeholder、Rail、Reveal、Segment、Step)、Collections(Breadcrumb、Form、Grid、Menu、Message、Table)、Views(Advertisement、Card、Comment、Feed、Item、Statistic)、Modules(Accordion、Checkbox、Dimmer、Dropdown、Embed、Modal、Popup、Progress、Rating、Search、Shape、Sidebar、Sticky、Tab、Transition)。
本实施例中，输入的Web设计图demo1.png如图2所示。本实施例中，定义了Button、Divider、Flag、Icon、Breadcrumb、Message、Checkbox的一一映射关系，如下表1所示。
表1HTML元素代码与其显示效果的映射关系
Figure BDA0002108632890000061
2、对图1进行目标识别，识别图中HTML元素的位置，具体为：
2-1、利用CNN提取UI图1的特征图，具体为：利用卷积层convolution、池化层pooling、修正线性单元ReLU三层提取特征图，在卷积时进行扩边处理，以保证多次卷积后不改变输入和输出的矩阵大小；
2-2、利用候选框网络RPN生成目标候选框，具体为：
2-2-1、在图1中设置
Figure BDA0002108632890000071
个候选锚点；
2-2-2、利用CNN判断哪些锚点为有目标的前景点，哪些为没目标的背景点；
2-2-3、对有目标的前景点进行边框回归处理，由此获得其对应的目标候选框。
2-3、由池化层pooling中的候选框池化RoI Pooling层提取所述目标候选框对应的候选特征图，具体为：
假设所述目标候选框的大小为M×N；
2-3-1、将目标候选框的尺度映射为
Figure BDA0002108632890000072
2-3-2、将尺度映射后目标候选框对应的特征图区域水平分为pooledw×pooledh的网格；
2-3-3、对每一个网格中的特征图进行最大池化处理，由此获得目标候选框对应的候选特征图。
2-4、Classification检测目标框最终的精确位置，即利用已经获得的候选特征图，通过全连接层与softmax计算每个候选框具体属于哪个HTML元素，输出cls_prob概率向量。同时再次利用边框回归法获得每个目标框的位置偏移量bbox_pred，用于回归更加精确的目标框。
本实施例中，最终得到的目标图片如下表2所示。
表2识别出来的目标图片
序号 目标图片
1 图3
2 图4
3 图5
4 图6
5 图7
6 图8
7 图9
3、结合步骤1的映射关系和步骤2的HTML元素的位置，生成图1完整的HTML代码。
根据上表2中的目标图片在表1的映射关系里寻找代码，得到以下代码如下表3所示：
表3目标图片对应的代码
Figure BDA0002108632890000081
对以上代码进行拼接，获得以下完整的代码demo2.html：
Figure BDA0002108632890000082
Figure BDA0002108632890000091
4、针对上述图1，求取人工编写的HTML代码demo1.html与生成的HTML代码demo2.html的相似度Sim1，具体为：
4-1、分别抽取人工编写的HTML代码与生成的HTML代码中属性class值的集合S1、S2；
4-2、利用Jaccard系数求取相似度Sim1为：
Figure BDA0002108632890000092
式中，S1为人工编写的HTML代码中属性class值的集合，S2为生成的HTML代码中属性class值的集合。
本实施例中，人工编写的HTML代码demo1.html为：
Figure BDA0002108632890000093
Figure BDA0002108632890000101
由上获得：
S1＝{"ui button","ui divider","ae flag","france flag","myanmarflag","question circle icon","ui breadcrumb","section","right angle icondivider","section","right angle icon divider","active section","ui compactmessage","ui checkbox",}
S2＝{"ui button","ui divider","ae flag","france flag","myanmarflag","question circle icon","ui breadcrumb","section","right angle icondivider","section","right angle icon divider","active section","ui compactmessage","ui checkbox",}
由此可得相似度
Figure BDA0002108632890000111
5、求取UI图1与经生成的HTML代码生成的图片的相似度Sim2，具体为：
其中，生成的HTML代码生成图片的方法为：利用现代标准浏览器运行生成的HTML代码，对显示结果进行截图；或者，利用Python的imgkit包渲染生成的HTML代码。
结合图片相似度算法中的直方图、图像模板匹配、感知哈希算法，获得相似度Sim2。
本实施例中，对代码demo1.html进行运行，并保存其显示效果，显示如图10所示。
获得图1和图10的相似度Sim2为100％。
6、上述2、3过程构成生成对抗网络GAN中的生成网络G，上述4、5过程构成GAN中的判别网络D，对G和D进行极小极大博弈，在所有可能的G和D中，求出平衡解，即使得G生成与人工编写的HTML代码具有相同分布的HTML代码，所述平衡解将上述Sim1和Sim2平衡为Sim0，之后判别Sim0是否大于设定的阈值t，若Sim0小于t，重复上述2至5，反之，执行下述过程7。
本实施例中，设定t为95％，由Sim1＝100％，Sim2＝100％，得到平衡后的Sim0为100％。此时，Sim0＝100％大于t＝95％，执行下一步。
7、经过上述6的训练，根据最终获得的GAN的生成网络G和判别网络D即获得图片到HTML代码的生成模型M，将待处理的UI图片输入模型M即得到相应的HTML代码。
本发明的方法能够获得图片到HTML代码的生成模型M，对该模型输入待处理的UI图片，便能生成相应的HTML代码，普适性和通用性更强，可以取代实际开发中的部分环节，使实际使用成本更低、应用领域更广。

Claims (10)

1.一种基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，包括以下步骤：
步骤1、构建HTML元素显示效果与其源代码的映射关系；
步骤2、对UI图片I进行目标识别，识别I中HTML元素的位置；
步骤3、结合步骤1的映射关系和步骤2的HTML元素的位置，生成图片I完整的HTML代码；
步骤4、针对上述UI图片I，求取人工编写的HTML代码与生成的HTML代码的相似度Sim1；
步骤5、求取UI图片I与经所述生成的HTML代码生成的图片I1的相似度Sim2；
步骤6、步骤2、3构成生成对抗网络GAN中的生成网络G，步骤4、5构成GAN中的判别网络D，对G和D进行极小极大博弈，在所有可能的G和D中，求出平衡解，即使得G生成与人工编写的HTML代码具有相同分布的HTML代码，所述平衡解将步骤4中的Sim1和步骤5中的Sim2平衡为Sim0，之后判别Sim0是否大于设定的阈值t，若Sim0小于t，重复步骤2至步骤5，反之，执行步骤7；
步骤7、经过步骤6的训练，根据最终获得的GAN的生成网络G和判别网络D即获得图片到HTML代码的生成模型M，将待处理的UI图片输入模型M即得到相应的HTML代码。
2.根据权利要求1所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤1所述构建HTML元素显示效果与其源代码的映射关系，具体为：利用卷积神经网络CNN提取HTML元素的特征图，将HTML元素的特征图与HTML代码一一对应。
3.根据权利要求1或2所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤2所述对UI图片I进行目标识别，识别I中HTML元素的位置，具体包括：
步骤2-1、利用卷积神经网络CNN提取UI图片I的特征图，具体为：利用卷积层convolution、池化层pooling、修正线性单元ReLU三层提取特征图，在卷积时进行扩边处理，以保证多次卷积后不改变输入和输出的矩阵大小；
步骤2-2、利用候选框网络RPN生成目标候选框；
步骤2-3、由池化层pooling中的候选框池化RoI Pooling层提取所述目标候选框对应的候选特征图；
步骤2-4、结合目标候选框对应的候选特征图，由分类层检测目标候选框最终的精确位置即UI图片I中HTML元素的位置。
4.根据权利要求3所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤2-2所述利用候选框网络RPN生成目标候选框，具体为：
步骤2-2-1、在原图I中设置
Figure FDA0002108632880000021
个候选锚点，其中，SW为原图宽的缩放比例，SH为原图高的缩放比例，Z为整数；
步骤2-2-2、利用CNN判断哪些锚点为有目标的前景点，哪些为没目标的背景点；
步骤2-2-3、对有目标的前景点进行边框回归处理，由此获得其对应的目标候选框。
5.根据权利要求4所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤2-3所述由池化层pooling中的候选框池化RoIPooling层提取所述目标候选框对应的候选特征图，具体为：
假设所述目标候选框的大小为M×N，缩放比例为SW×SH；
步骤2-3-1、将目标候选框的尺度映射为
Figure FDA0002108632880000022
步骤2-3-2、将尺度映射后目标候选框对应的特征图区域水平分为pooledw×pooledh的网格；
步骤2-3-3、对每一个网格中的特征图进行最大池化处理，由此获得目标候选框对应的候选特征图。
6.根据权利要求5所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤2-4所述结合目标候选框对应的候选特征图，由分类层检测目标候选框最终的精确位置即UI图片I中HTML元素的位置，具体为：
步骤2-4-1、针对每个候选特征图，通过全连接层与softmax分类器计算每个目标候选框具体属于哪个HTML元素，获得目标候选框的粗略位置，并输出其概率向量；
步骤2-4-2、结合概率向量，利用边框回归法获得每个目标候选框的位置偏移量，用于回归更加精确的目标框。
7.根据权利要求1所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤3所述结合步骤1的映射关系和步骤2的HTML元素的位置，生成图片I完整的HTML代码，具体为：
步骤3-1、利用CNN提取步骤2获得的精确位置的目标候选框对应的特征图；
步骤3-2、结合步骤1中映射关系，按步骤3-1所述特征图的值去匹配与该特征图对应的HTML代码，由此获得图片I内所有HTML元素对应的HTML代码；
步骤3-3、将所有HTML代码块组合，生成最终的完整HTML代码。
8.根据权利要求1所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤4所述针对上述UI图片I，计算人工编写的HTML代码与生成的HTML代码的相似度Sim1，具体为：
步骤4-1、分别抽取人工编写的HTML代码与生成的HTML代码中属性class值的集合S1、S2；
步骤4-2、利用Jaccard系数求取相似度Sim1为：
Figure FDA0002108632880000031
式中，S1为人工编写的HTML代码中属性class值的集合，S2为生成的HTML代码中属性class值的集合。
9.根据权利要求1所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤5所述经生成的HTML代码生成图片I1包括两种方式：
利用现代标准浏览器运行生成的HTML代码，对显示结果进行截图获得I1；
或者，利用Python的imgkit包渲染生成的HTML代码即获得I1。
10.根据权利要求1或9所述的基于生成对抗和卷积神经网络的UI生成Web代码的方法，其特征在于，步骤5所述求取UI图片I与经所述生成的HTML代码生成的I1的相似度Sim2，具体为：结合图片相似度算法中的直方图、图像模板匹配、感知哈希算法，获得相似度Sim2。
CN201910562411.2A 2019-06-26 2019-06-26 基于生成对抗和卷积神经网络的UI生成Web代码的方法 Active CN110377282B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201910562411.2A CN110377282B (zh) 2019-06-26 2019-06-26 基于生成对抗和卷积神经网络的UI生成Web代码的方法
PCT/CN2020/085880 WO2020259036A1 (zh) 2019-06-26 2020-04-21 基于生成对抗和卷积神经网络的UI生成Web代码的方法
US17/622,698 US11579850B2 (en) 2019-06-26 2020-04-21 Method for generating web code for UI based on a generative adversarial network and a convolutional neural network

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910562411.2A CN110377282B (zh) 2019-06-26 2019-06-26 基于生成对抗和卷积神经网络的UI生成Web代码的方法

Publications (2)

Publication Number Publication Date
CN110377282A CN110377282A (zh) 2019-10-25
CN110377282B true CN110377282B (zh) 2021-08-17

Family

ID=68249423

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910562411.2A Active CN110377282B (zh) 2019-06-26 2019-06-26 基于生成对抗和卷积神经网络的UI生成Web代码的方法

Country Status (3)

Country Link
US (1) US11579850B2 (zh)
CN (1) CN110377282B (zh)
WO (1) WO2020259036A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110377282B (zh) 2019-06-26 2021-08-17 扬州大学 基于生成对抗和卷积神经网络的UI生成Web代码的方法
CN112379878B (zh) * 2020-10-21 2024-03-26 扬州大学 基于多标签学习的UI元素的Web代码生成方法
CN114821610B (zh) * 2022-05-16 2022-11-29 三峡高科信息技术有限责任公司 一种基于树状神经网络的从图像生成网页代码的方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102880708A (zh) * 2012-09-28 2013-01-16 用友软件股份有限公司 用于实现html页面的可视化设计的系统和方法
CN105930159A (zh) * 2016-04-20 2016-09-07 中山大学 一种基于图像的界面代码生成的方法及系统
CN106886406A (zh) * 2017-01-19 2017-06-23 阿里巴巴集团控股有限公司 开发代码或文档的生成方法和装置
CN109522017A (zh) * 2018-11-07 2019-03-26 中山大学 一种基于神经网络和自注意力机制的网页截图代码生成方法

Family Cites Families (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102170446A (zh) 2011-04-29 2011-08-31 南京邮电大学 一种基于空间布局与视觉特征的钓鱼网页检测方法
US9189210B2 (en) * 2012-02-29 2015-11-17 Avaya Inc. Using source code generated from a data model file to generate a graphical user interface from objects in a database
US9652314B2 (en) * 2012-10-15 2017-05-16 Alcatel Lucent Dynamic application programming interface publication for providing web services
US10242258B2 (en) * 2015-09-30 2019-03-26 Microsoft Technology Licensing, Llc Organizational data enrichment
US9619366B1 (en) * 2015-11-12 2017-04-11 International Business Machines Corporation Object monitoring in code debugging
CA3024558C (en) * 2016-05-18 2023-01-24 The Governing Council Of The University Of Toronto Code auditor
US11003995B2 (en) * 2017-05-19 2021-05-11 Huawei Technologies Co., Ltd. Semi-supervised regression with generative adversarial networks
US11417082B2 (en) * 2017-06-16 2022-08-16 Markable, Inc. Image processing system
US10489126B2 (en) * 2018-02-12 2019-11-26 Oracle International Corporation Automated code generation
US10726555B2 (en) * 2018-06-06 2020-07-28 International Business Machines Corporation Joint registration and segmentation of images using deep learning
US11423282B2 (en) * 2018-10-30 2022-08-23 Huawei Technologies Co., Ltd. Autoencoder-based generative adversarial networks for text generation
CN109683871B (zh) 2018-11-01 2022-04-12 中山大学 基于图像目标检测的代码自动生成装置及方法
CN110377282B (zh) 2019-06-26 2021-08-17 扬州大学 基于生成对抗和卷积神经网络的UI生成Web代码的方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102880708A (zh) * 2012-09-28 2013-01-16 用友软件股份有限公司 用于实现html页面的可视化设计的系统和方法
CN105930159A (zh) * 2016-04-20 2016-09-07 中山大学 一种基于图像的界面代码生成的方法及系统
CN106886406A (zh) * 2017-01-19 2017-06-23 阿里巴巴集团控股有限公司 开发代码或文档的生成方法和装置
CN109522017A (zh) * 2018-11-07 2019-03-26 中山大学 一种基于神经网络和自注意力机制的网页截图代码生成方法

Also Published As

Publication number Publication date
WO2020259036A1 (zh) 2020-12-30
CN110377282A (zh) 2019-10-25
US20220261226A1 (en) 2022-08-18
US11579850B2 (en) 2023-02-14

Similar Documents

Publication Publication Date Title
CN110930454B (zh) 一种基于边界框外关键点定位的六自由度位姿估计算法
CN110377282B (zh) 基于生成对抗和卷积神经网络的UI生成Web代码的方法
US11055571B2 (en) Information processing device, recording medium recording information processing program, and information processing method
US8750602B2 (en) Method and system for personalized advertisement push based on user interest learning
US11861925B2 (en) Methods and systems of field detection in a document
CN111652317B (zh) 基于贝叶斯深度学习的超参数图像分割方法
CN109191424B (zh) 一种乳腺肿块检测与分类系统、计算机可读存储介质
CN108009222B (zh) 基于较优视图和深度卷积神经网络的三维模型检索方法
CN112257738A (zh) 机器学习模型的训练方法、装置和图像的分类方法、装置
CN112149722A (zh) 一种基于无监督域适应的图像自动标注方法
US11106942B2 (en) Method and apparatus for generating learning data required to learn animation characters based on deep learning
CN116721301B (zh) 目标场景分类模型训练方法、分类方法、设备及存储介质
CN113255501B (zh) 生成表格识别模型的方法、设备、介质及程序产品
CN110992365A (zh) 一种基于图像语义分割的损失函数及其设计方法
CN111222546B (zh) 一种多尺度融合的食品图像分类模型训练及图像分类方法
CN107274425A (zh) 一种基于脉冲耦合神经网络的彩色图像分割方法及装置
Dao et al. Class enhancement losses with pseudo labels for open-vocabulary semantic segmentation
CN107193979B (zh) 一种同源图片检索的方法
Piriyothinkul et al. Detecting text in manga using stroke width transform
CN108021918B (zh) 文字识别方法及装置
CN111488400A (zh) 数据分类方法、装置和计算机可读存储介质
US11328179B2 (en) Information processing apparatus and information processing method
CN114511877A (zh) 一种行为识别方法、装置、存储介质及终端
Peng et al. Computer vision classification detection of chicken parts based on optimized Swin-Transformer
CN116543389B (zh) 基于关系网络的字符识别方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant