CN109783094A - 前端页面生成方法、装置、计算机设备及存储介质 - Google Patents
前端页面生成方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN109783094A CN109783094A CN201811537431.6A CN201811537431A CN109783094A CN 109783094 A CN109783094 A CN 109783094A CN 201811537431 A CN201811537431 A CN 201811537431A CN 109783094 A CN109783094 A CN 109783094A
- Authority
- CN
- China
- Prior art keywords
- base image
- image
- code
- content
- page
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000003860 storage Methods 0.000 title claims abstract description 19
- 238000013461 design Methods 0.000 claims abstract description 79
- 230000011218 segmentation Effects 0.000 claims abstract description 18
- 238000013459 approach Methods 0.000 claims abstract description 16
- 230000005540 biological transmission Effects 0.000 claims abstract description 14
- 238000012986 modification Methods 0.000 claims description 38
- 230000004048 modification Effects 0.000 claims description 38
- 230000015654 memory Effects 0.000 claims description 30
- 238000013528 artificial neural network Methods 0.000 claims description 26
- 238000004422 calculation algorithm Methods 0.000 claims description 22
- 238000006243 chemical reaction Methods 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 14
- 238000001514 detection method Methods 0.000 claims description 9
- 238000000926 separation method Methods 0.000 claims description 9
- 238000007781 pre-processing Methods 0.000 claims description 7
- 238000003709 image segmentation Methods 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 8
- 230000018109 developmental process Effects 0.000 abstract description 8
- 230000008569 process Effects 0.000 description 14
- 238000012545 processing Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 8
- 238000012549 training Methods 0.000 description 7
- 230000004069 differentiation Effects 0.000 description 5
- 238000000605 extraction Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 238000013527 convolutional neural network Methods 0.000 description 3
- 238000012937 correction Methods 0.000 description 3
- 238000009826 distribution Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000001537 neural effect Effects 0.000 description 3
- 238000012015 optical character recognition Methods 0.000 description 3
- 238000012360 testing method Methods 0.000 description 3
- 238000005520 cutting process Methods 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 210000004218 nerve net Anatomy 0.000 description 2
- 229910052704 radon Inorganic materials 0.000 description 2
- SYUHGPGVQRZVTB-UHFFFAOYSA-N radon atom Chemical compound [Rn] SYUHGPGVQRZVTB-UHFFFAOYSA-N 0.000 description 2
- 230000000306 recurrent effect Effects 0.000 description 2
- 230000006403 short-term memory Effects 0.000 description 2
- ORILYTVJVMAKLC-UHFFFAOYSA-N Adamantane Natural products C1C(C2)CC3CC1CC2C3 ORILYTVJVMAKLC-UHFFFAOYSA-N 0.000 description 1
- 235000001808 Ceanothus spinosus Nutrition 0.000 description 1
- 241001264786 Ceanothus spinosus Species 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000010485 coping Effects 0.000 description 1
- 230000007423 decrease Effects 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 238000005286 illumination Methods 0.000 description 1
- 238000010191 image analysis Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000002372 labelling Methods 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- VMXUWOKSQNHOCA-UKTHLTGXSA-N ranitidine Chemical compound [O-][N+](=O)\C=C(/NC)NCCSCC1=CC=C(CN(C)C)O1 VMXUWOKSQNHOCA-UKTHLTGXSA-N 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
- 230000002123 temporal effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Classifications
-
- 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
-
- 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
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种前端页面生成方法、装置、计算机设备及存储介质，所述方法包括：在接收到客户端发送的前端页面生成请求时，获取请求中包含的前端设计图，进而对前端设计图进行图像语义分割，得到至少一个基础图像，并获取基础图像对应的页面位置信息，使得前端设计图的框架模块被自动识别，再对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息，通过预设的代码转换方式，得到每个基础图像对应的基础代码，然后根据页面位置信息和基础代码，生成前端设计图对应的目标代码，执行目标代码，即可生成前端页面，使得通过智能化地对前端设计图进行解析，生成目标代码，从而得到前端页面，提高了前端页面的开发效率。
Description
技术领域
本发明涉及人工智能领域，尤其涉及一种前端页面生成方法、装置、计算机设备及存储介质。
背景技术
随着计算机网络技术的飞速发展，网站浏览已日渐成为人们生活的习惯，不管是查阅资料、购物、看新闻和听音乐等，都离不开网站，因而，网站页面的开发需求也越来越大，其中，网站页面包括PC端可浏览的网页、手机端可浏览的网页和平板等智能终端设备可浏览的网页。
鉴于HTML、CSS和SVG构建网站页面的快速便捷，当前许多网站的页面内容是使用基于HTM、CSS和SVG的方式来构建，基于这种方法进行页面构建，需要进行前端设计和前端开发，前端设计是根据实际需要，对界面结构排版和界面内容进行设计，前端开发是通过编程语言撰写代码来实现前端设计包含的内容，使得前端设计的内容得以在网页进行展示。
当前网站页面的开发，主要是先由前端页面设计人员进行设计，得到前端设计图，进而由前端开发人员根据前端设计图进行编写代码来完成，由于网站页面开发需求很大，而很多页面风格、特效或模块具有一定的相同点，甚至有些页面之间比较相似或者稍有变化，每次都去重新编写代码，这浪费了大量的人力和时间，导致了前端页面开发成本高，且开发效率低。
发明内容
本发明实施例提供一种前端页面生成方法、装置、计算机设备和存储介质，以解决当前前端页面开发成本高并且开发效率低的问题。
一种前端页面生成方法，包括：
若接收到客户端发送的前端页面生成请求，则获取所述前端页面生成请求中包含的前端设计图，其中，所述前端设计图包括至少一个内容版块；
使用预设的网络模型，对所述前端设计图进行图像语义分割，使得每个所述内容版块被分割成一个基础图像，并获取每个所述基础图像对应的页面位置信息；
对每个所述基础图像进行内容解析，得到每个所述基础图像对应的基本元素信息；
通过预设的代码转换方式，对所述基本元素信息进行代码转换，得到每个所述基础图像对应的基础代码；
根据每个所述基础图像对应的页面位置信息和每个所述基础图像对应的基础代码，生成所述前端设计图对应的目标代码；
执行所述目标代码，生成前端页面，并将所述前端页面发送给所述客户端。
一种前端页面生成装置，包括：
请求接收模块，用于若接收到客户端发送的前端页面生成请求，则获取所述前端页面生成请求中包含的前端设计图，其中，所述前端设计图包括至少一个内容版块；
图像分割模块，用于使用预设的网络模型，对所述前端设计图进行图像语义分割，使得每个所述内容版块被分割成一个基础图像，并获取每个所述基础图像对应的页面位置信息；
内容解析模块，用于对每个所述基础图像进行内容解析，得到每个所述基础图像对应的基本元素信息；
代码转换模块，用于通过预设的代码转换方式，对所述基本元素信息进行代码转换，得到每个所述基础图像对应的基础代码；
代码生成模块，用于根据每个所述基础图像对应的页面位置信息和每个所述基础图像对应的基础代码，生成所述前端设计图对应的目标代码；
页面生成模块，用于执行所述目标代码，生成前端页面，并将所述前端页面发送给所述客户端。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前端页面生成方法的步骤。
一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述前端页面生成方法的步骤。
本发明实施例提供的前端页面生成方法、装置、计算机设备及存储介质，在接收到客户端发送的前端页面生成请求时，获取前端页面生成请求中包含的前端设计图，进而使用预设的网络模型，对前端设计图进行图像语义分割，使得每个内容版块被分割成一个基础图像，并获取基础图像对应的页面位置信息，使得前端设计图的框架模块被自动识别，得到每一个框架模块的图像作为一个基础图像，再对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息，通过预设的代码转换方式，对基本元素信息进行代码转换，得到每个基础图像对应的基础代码，然后根据每个基础图像对应的页面位置信息和每个基础图像对应的基础代码，生成前端设计图对应的目标代码，进而执行目标代码，得到前端页面，并将前端页面发送给客户端，从而无需花费大量人力物力编写重复代码，有效降低前端页面的开发成本，并且通过智能化地对前端设计图进行解析，自动生成目标代码，得到前端页面，提高了前端页面的开发效率。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的前端页面生成方法的应用环境示意图；
图2是本发明实施例提供的前端页面生成方法的实现流程图；
图3是本发明实施例提供的前端页面生成方法中步骤S50的实现流程图；
图4是本发明实施例提供的前端页面生成方法中步骤S30的实现流程图；
图5是本发明实施例提供的前端页面生成方法中步骤S33的实现流程图；
图6是本发明实施例提供的前端页面生成方法中对前端页面进行更新的实现流程图；
图7是本发明实施例提供的前端页面生成装置的示意图；
图8是本发明实施例提供的计算机设备的示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，图1示出本发明实施例提供的前端页面生成方法的应用环境。该前端页面生成方法应用在网站站点开发的页面生成场景中。该页面生成包括服务端和客户端，其中，服务端和客户端之间通过网络进行连接，客户端向服务端发送前端设计图，服务端接收该前端设计图并对其进行解析，得到前端设计图对应的元素信息，再根据元素信息生成目标代码，进而得到前端页面。客户端具体可以但不限于是笔记本电脑、个人计算机、手机和便携式手持智能设备和可穿戴式智能设备等，服务端具体可以用独立的服务器或者多个服务器组成的服务器集群实现。
请参阅图2，图2示出本发明实施例提供的一种前端页面生成方法，以该方法应用在图1中的服务端为例进行说明，详述如下：
S10：若接收到客户端发送的前端页面生成请求，则获取前端页面生成请求中包含的前端设计图，其中，前端设计图包括至少一个内容版块。
具体地，前端设计人员将前端设计完成之后，通过客户端向服务端发送前端页面生成请求，服务端在接收到该前端页面生成请求时，通过网络传输协议接收该前端设计图。
其中，前端设计图是前端设计人员根据实际需要，对界面结构排版和界面特效布局进行设计得到的设计图样，前端设计图包括一个或多个内容版块，每个内容版块可以有自己独立的样式和特效。
例如，在一具体实施方式中，获取到的前端设计图包括三个内容版块，这三个内容版块分别为板块A、版块B和版块C，版块A位于设计图的上半部分，版块B和版块C并排排列在版块A的下面，版块A中包含5张图片及5张图片轮播的特效，版块B为一时事新闻版块，版块C包括多个带有超链接的友情链接。
其中，网络传输协议包括但不限于：互联网控制报文协议(Internet ControlMessage Protocol，ICMP)、地址解析协议(ARP Address Resolution Protocol，ARP)和文件传输协议(File Transfer Protocol，FTP)等。
S20：使用预设的网络模型，对前端设计图进行图像语义分割，使得每个内容版块被分割成一个基础图像，并获取每个基础图像对应的页面位置信息。
具体地，服务端获取到该前端设计图后，对该前端设计图建立坐标系，以便确定前端设计图中各个点的坐标，并通过预设的网络模型，对前端设计图中包含的每个区域进行语义识别分割，得到一个或多个基础图像，同时，根据基础图像的坐标范围，获取基础图像对应的页面位置信息。
其中，预设的网络模型用于对前端设计图进行图像语义分割，预设的网络模型具体包括但不限于：生成对抗神经网络(Generative Adversarial Networks，GAN)、全卷积神经网络(Fully Convolutional Networks for Semantic Segmentation，FCN)和基于模板的图像分割算法等。
其中，图像语义分割就是把图像按照图像代表的语义，分成若干个特定的、具有独特性质的区域并提出感兴趣目标的技术和过程，图像语义分割的过程也是一个标记过程，即把属于同一区域的像素赋予相同的编号。
优选地，本实施例采用生成对抗神经网络来对前端设计图进行图像语义分割。
具体地，生成对抗神经网络包括两个模块：生成模型(Generative Model)和判别模型(Discriminative Model)，通过至少两个模块的互相博弈学习产生相当好的输出，在本实施例中，生成模型与判别模型均采用神经网络来构造，因而，生成模型可称为生成网络，判别模型可称为判别网络。
优选地，本实施例中的生成式对抗网络采用预设数量的判别网络和一个生成网络。
其中，预设数量的判别网络由多个真实的前端设计图样本通过训练生成，用以对输入的前端设计图进行版块分布的图像语义识别，预设数量可根据实际情况进行设置，此处不做限定。
其中，生成网络用于根据判别网络确定的结果，将该前端设计图中的每一个版块生成一个基础图像。
值得说明的是，前端设计图为前端人员根据计算机软件工具绘制或者使用手写绘制，存在一定的不规范性，而生成对抗网络通过大量标准样本图像进行训练，判别网络所采用的数据特征也来源于标准样本图像，使得前端设计图通过生成对抗网络训练后，更接近标准样本图像，也即，更容易被机器所理解。
进一步地，基于生成对抗神经网络对前端设计图进行特征提取，使得每个内容版块被分割成一个基础图像的实现过程详述如下：
对前端设计图进行特征提取，得到基础特征，并将该基础特征分别输入到n个判别网络中；通过与判别网络对应的图像的数据特征进行相似度比较，计算基础特征属于该判别网络的概率，得到n个概率，其中，n为判别网络的总数；从n个概率中，选取值最大的概率对应的判别网络，作为目标判别网络，进而计算基础特征与目标判别网络的数据特征的特征损失，并将该特征损失更新到生产网络中；以基础图像为输入，以目标判别网络对应的样本图像为生成目标，使用生成网络进行图像生成，得到生成图像；按照目标判别网络中的版块区域分布，对生成图像进行切分，得到一个或多个基础图像。
在本实施例中，通过使用生成对抗神经网络，对前端设计图进行图像语义分割，使得前端设计图能够被准确地分割成多个具有独立语义的基础图像，为后续对每个基础图像进行图像解析提供数据基础。
S30：对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息。
具体地，对每个基础图像进行内容解析，得到该基础图像对应的基本元素信息，其中，基本元素信息包括但不限于颜色、图案、文字、相对坐标等。
其中，对每个基础图像进行内容解析，具体可以包括但不限于：图像特征提取算法、利用高斯拉普拉斯算子检测的方法、FAST特征点检测、OCR图像识别算法和基于神经网络的图像识别算法等。
S40：通过预设的代码转换方式，对基本元素信息进行代码转换，得到每个基础图像对应的基础代码。
具体地，通过预设的的代码转换方式，对每个基础图像对应的基本元素信息进行代码转换，得到被执行时可以生成基础图像的基础代码。
其中，预设的的代码转换方式，是通过预先存储的语法规则，生成每个基本元素信息对应的代码，并将属于同一基础图像中的基本元素信息对应的代码进行合并优化。
值得说明的是，当基本元素信息满足预设条件时，自动为该基本元素信息增加相应的特效，例如，当基本元素信息为燃烧的蜡烛的图案时，自动添加火焰闪烁摇摆的特效，当基本元素信息为文字“节日快乐”时，自动添加随机生成礼花庆祝的动画特效，预设条件和相应的特效，可依据实际情况进行设置，此处不做具体限定。
例如，在一具体实施方式中，一基础图像中的背景图像为一颗红色的心形，该心形范围为宽220个像素值，高220个像素值，与背景图像的上边界的距离为100个像素值，与左边界距离为110个像素值，基于预设的代码转换方式，生成代码“side{top:100px；width:220px；height:220px；border-radius:110px；}”，同时，根据预设条件，对该红色的心形增加每0.7秒跳动一次的特效，生成代码“heart{background:linear-gradient(-90deg,#F50A45 0％,#d5093c 40％)；animation:beat 0.7s ease 0s infinite normal；}”。
S50：根据每个基础图像对应的页面位置信息和每个基础图像对应的基础代码，生成前端设计图对应的目标代码。
具体地，在获取到每个基础图像对应的基础代码后，根据每个基础图像对应的页面位置信息，生成前端设计图对应的目标代码。
S60：执行目标代码，生成前端页面，并将前端页面发送给客户端。
具体地，执行该目标代码，在目标代码被成功执行后，生成前端页面，将生成的前端页面发送给客户端。
在本实施例中，在接收到客户端发送的前端页面生成请求时，获取前端页面生成请求中包含的前端设计图，进而使用预设的网络模型，对前端设计图进行图像语义分割，使得每个内容版块被分割成一个基础图像，并获取基础图像对应的页面位置信息，使得前端设计图的框架模块被自动识别，得到每一个框架模块的图像作为一个基础图像，再对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息，通过预设的代码转换方式，对基本元素信息进行代码转换，得到每个基础图像对应的基础代码，然后根据每个基础图像对应的页面位置信息和每个基础图像对应的基础代码，生成前端设计图对应的目标代码，进而执行目标代码，得到前端页面，并将前端页面发送给客户端，使得通过智能化地对前端设计图进行解析，生成目标代码，从而得到前端页面，提高了前端页面生成的效率。
在图2对应的实施例的基础之上，下面通过一个具体的实施例来对步骤S50中所提及的根据每个基础图像对应的页面位置信息和每个基础图像对应的基础代码，生成前端设计图对应的目标代码的具体实现方法进行详细说明。
请参阅图3，图3示出了本发明实施例提供的步骤S50的具体实现流程，详述如下：
S51：根据每个基础图像对应的页面位置信息，生成每个基础图像对应的位置代码。
具体地，每个基础图像对应的页面位置信息包含该基础图像在页面所占的位置，基础图像形状不同，其页面位置信息的表示方法可以不同，例如，基础图像形状为矩形，其页面位置信息可以使用矩形的左下角和右下角坐标来表示，基础图像形状为圆形，其页面位置信息可以使用圆心的点坐标和半径来表示，根据每个基础图像对应的页面位置信息的表达方式，生成每个基础图像对应的位置代码。
例如，在一具体实施方式中，一基础图像“001.jpg”对应的页面位置信息表示为“形状为矩形，矩形的上边界与页面上端距离为300个像素值，矩形的左边界和页面左端距离为150个像素值，矩形长度为200个像素值，矩形宽度为100个像素值”，根绝该页面位置信息生成位置代码为“<imgsrc＝"001.TIF"width＝"200px"；height＝"100px"；style＝"position:absolute；left:150px；top:300px；">”。
S52：针对每个基础图像，将基础图像对应的位置代码和基础图像对应的基础代码封装成基础图像模块。
具体地，针对每个基础图像，将该基础图像对应的位置代码和该基础图像对应的基础代码封装成一个基础图像模块，使得同一个基础图像的位置信息和图像中包含的语义信息被封装成一个整体，有利于后续生成相邻的基础图像模块的图像拼接代码。
其中，封装是指将抽象得到的基础图像的位置和基础图像的语义信息相结合，形成一个有机的整体，使得后续进行图像拼接时，无需考虑整体内部的各个细节，只用对整体进行操作即可。
S53：根据每个基础图像对应的页面位置信息，将页面位置相邻的两个基础图像作为一组相邻图像。
具体地，根据每个基础图像对应的页面位置信息，获取页面位置信息中具有公共点的基础图像，将任意两个具有公共点的两个基础图像确定为页面位置相邻的两个基础图像，并将这个基础图像作为一组相邻图像。
需要说明的是，步骤S51至步骤S52，与步骤S53之间没有必然的先后执行顺序，其可以是并列执行的关系，此处不做限制。
S54：为每组相邻图像对应的两个基础图像模块生成图像拼接代码，得到前端设计图对应的目标代码。
具体地，每个基础图像在生成到前端页面上时，均独立生成，可能造成前端页面不同模板之间存在明显的间隙，为避免后续生成前端页面出现模块之前的不连续的情况，需要对每组相邻的基础图像模块生成图像拼接代码，生成图像拼接代码后，即得到了前端设计图对应的目标代码，其中，图像拼接代码中包含每组相邻的基础图像模块。
其中，图像拼接代码是指图像拼接算法对应的代码，常用的图像拼接算法包括但不限于：基于亮度与白平衡自动调整的图像拼接算法、基于Opencv Sift和Surf特征的图像无缝拼接算法和基于区域匹配的帧图像拼接算法等。
在本实施例中，根据每个基础图像对应的页面位置信息，生成每个基础图像对应的位置代码，并针对每个基础图像，将基础图像对应的位置代码和基础图像对应的基础代码封装成基础图像模块，同时，根据每个基础图像对应的页面位置信息，将页面位置相邻的两个基础图像作为一组相邻图像，再为每组相邻图像对应的两个基础图像模块生成图像拼接代码，得到前端设计图对应的目标代码，使得生成的前端页面的各个模板之间实现无缝连接，提高了前端页面开发的质量。
在图2对应的实施例的基础之上，下面通过一个具体的实施例来对步骤S30中所提及的对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息的具体实现方法进行详细说明。
请参阅图4，图4示出了本发明实施例提供的步骤S30的具体实现流程，详述如下：
S31：对基础图像进行背景分离，得到基础图像的背景图像和基础图像的内容图像。
具体地，基础图像对应的基本元素信息包括背景元素信息和内容元素信息，对基础图像进行背景分离，得到基础图像的背景图像和基础图像的内容图像，以便后续对背景图像进行解析，得到背景元素信息，对内容图像进行解析，得到内容元素信息。
其中，背景分离的实现方式包括但不限于：背景差分法、帧差分法、光流场法，基于全卷积网络(Fully Convolutional Networks for Semantic Segmentation，FCN)的图像语义分割等。
S32：获取背景图像的背景颜色和背景样式，并将背景颜色和背景样式作为背景元素信息。
具体地，通过对背景图像中每个像素点的像素值进行遍历，得到背景图像的颜色信息，作为背景颜色，通过对背景图像建立坐标体系，得到每个像素点的位置信息和标识信息，作为背景样式，将背景颜色和背景样式，作为背景元素信息。
其中，背景样式包括样式标识和样式对应的位置，样式标识用来标识唯一的背景样式，样式对应的位置是指该背景样式对应的背景图片的位置信息。
S33：获取内容图像的内容文本、内容颜色和内容样式，并将内容文本、内容颜色和内容样式作为内容元素信息。
具体地，通过对内容图像中每个像素点的像素值进行遍历，得到内容图像的内容颜色，通过对内容图像建立坐标体系，得到每个像素点的位置信息和标识信息，作为内容图像的内容样式，通过使用光学字符识别(Optical Character Recognition，OCR)的方式，对内容图像进行文本识别，得到内容文本。
其中，内容样式包括内容标识和内容标识对应的位置，内容标识用于唯一标识该内容，内容对应的位置可以是内容对应的相对坐标或者绝对坐标。例如，获取到的一内容样式为“LOGO_1，(80，20)，(220，30)”，表示该内容样式的内容标识为“LOGO_1”，该内容样式对应的内容图像的左下角坐标为(80，20)，右上角坐标为(220，30)。
其中光学字符识别是指通过光学字符识别工具检查图片上的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程；即，针对图片上的字符，采用光学的方式将图片中的文字转换成为黑白点阵的图片文件，并通过识别软件或工具将图片中的文字转换成文本格式，供文字处理软件进一步编辑加工的技术。
值得说明的是，步骤S32和步骤S33之间，没有必然的先后执行顺序，其可以是并列执行的关系，此处不做限制。
在本实施例中，对基础图像进行背景分离，得到基础图像的背景图像和基础图像的内容图像，进而获取背景图像的背景颜色和背景样式，并将背景颜色和背景样式作为背景元素信息，再获取内容图像的内容文本、内容颜色和内容样式，并将内容文本、内容颜色和内容样式作为内容元素信息，从而实现对基础图像的解析，得到基础图像对应的基本元素信息，有利于后续通过这些基本元素信息获取对应的代码来生成基础代码。
在图4对应的实施例的基础之上，下面通过一个具体的实施例来对步骤S33中所提及的获取内容图像的内容文本的具体实现方法进行详细说明。
请参阅图5，图5示出了本发明实施例提供的步骤S33的具体实现流程，详述如下：
S331：对内容图像进行图像预处理，得到标准图像。
具体地，由于内容图像中可能包含多种颜色，而颜色本身非常容易受到光照等因素的影响，同类的物体颜色有很多变化，为避免干扰，因此需要对内容图像进行预处理，以减少图像的复杂度和信息处理量。
其中，图像预处理包括但不限于锐化处理、灰度化处理、透视变换处理和二值化处理等。
其中，灰度化处理是指将彩色图片转化成为灰度图片的过程，目的是为了改善画质，使图片的显示效果更加清晰。灰度化处理包括但不限于：分量法、最大值法、平均值法和加权平均法等。
其中，锐化处理是指是补偿图片的轮廓，增强图片的边缘及灰度跳变的部分，使图片变得清晰，分为空域处理和频域处理两类，锐化处理是为了突出图片上地物的边缘、轮廓，或某些线性目标要素的特征。
其中，二值化处理就是将图片上的像素点的灰度值设置为0或255，也就是将整个图片呈现出明显的黑白效果的过程，图片的二值化使图片中数据量大为减少，从而能凸显出目标的轮廓。
由于内容图像可能会存在不同程度的倾斜，影响模型识别结果，因此，需对内容图像进行透视变换(矫正)即将内容图像投影到一个新的视平面的过程，获取矫正后的图像。本案中，透视变换的的处理方法包括但不限于采用OpenCv中的perspectiveTransform()函数进行透视变换处理。OpenCV是一个包含大量开源接口的跨平台计算机视觉库，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。
为了使图像的边缘、轮廓线以及图像的细节变得清晰，需先对透视后的图像进行锐化处理，获取锐化图像，以去除背景纹路，提高识别准确率。其中，锐化处理的方法包括但不限于采用目前现有技术中常用的拉普拉斯算子、加权平均差分(Sobel)算子和平均差分(Prewitt)算子中的任意一种。
为了进一步去除图像背景的干扰，需对锐化图像进行二值化处理，获取二值化图像。服务端获取锐化图像后，基于锐化图像的采样像素值和预先选取的阈值进行比较，将采样像素值大于或等于阈值的像素值设置为1，小于阈值的像素值设置为0。采样像素值是锐化图像中每一像素点对应的像素值，阈值的设置可依实际情况进行确定，此处不作具体限制。
值得说明的是，本实施例中还可以根据实际需要，使用拉东变换(RadonTransform)对内容图像进行倾斜校正。
S332：采用场景文本检测算法对标准图像进行文字定位，确定标准图像中的文字范围，作为目标文字区域。
具体地，由于标准图像中的文字位置并不固定，即不同的标准图像，其文字位置不尽相同，因而在内容图像进行图像预处理，得到标准图像之后，需要确定标准图像中的文字区域，以便进行文字识别。
其中，文字区域的确定方法包括但不限于：霍夫投票(Hough Transform)算法、基于隐马尔可夫模型(Hidden Markov Model，HMM)的字符识别算法、区域特征提取(Maximally Stable Extremal Regions，MSER)算法和场景文本检测(Connectionist TextProposal Network)算法。
优选地，本发明实施例采用场景文本检测算法来确定标准图像中的文字区域，其实现方式为：通过使用卷积神经网络(Convolutional Neural Networks，CNN)模型对标准图像进行训练，得到图片的深度特征；进而根据深度特征与文本线构造算法(SideRefinement)来预测字符边缘，并按照预设大小的矩形框，将字符边缘处于同一行的字符放入同一个矩形框；将矩形框串成序列，并输入到循环神经网络(Recurrent NeuralNetworks，RNN)模型中进行训练，最后将训练结果使用全连接层来回归，得到正确的字符边缘，并将正确的字符边缘连接成线，从而得到标准图像中的文字区域。
可理解地，场景文本检测算法进行文字定位时是基于行级别进行定位，即会返回每一行对应的的矩形框的位置信息。
值得说明的是，本实施例中的目标文本区域可以是一个，也可以是多个，具体可依据实际检测结果而定，此处不作具体限制。
S333：采用预先训练好的长短时记忆神经网络模型，对目标文字区域进行识别，得到目标文字区域对应的文本信息，将文本信息作为内容文本。
具体地，采用预先训练好的长短时记忆神经网络模型对得到的目标文字区域的图像进行识别，得到目标文字区域的图像中包含的文本信息，并将该文本信息作为内容图像的内容文本。
其中，长短时记忆神经(Long-Short Term Memory，简称LSTM)网络是一种时间递归神经网络，适合于处理和预测具有时间序列，且时间序列间隔和延迟相对较长的重要事件，长短时记忆神经网络具有输入层、隐藏层和输出层这三层网络结构。其中，输入层是长短时记忆神经网络的第一层，用于接收外界信号，即负责接收内容图像。输出层是长短时记忆神经网络的最后一层，用于向外界输出信号，即负责输出长短时记忆神经网络的计算结果。隐藏层是长短时记忆神经网络中除输入层和输出层之外的各层，用于对提取的内容图像特征进行处理，获取长短时记忆神经网络的计算结果。
在采用预先训练好的长短时记忆神经网络模型，对目标文字区域进行识别前，还包括获取预先训练得到该长短时记忆神经网络模型，其过程为：对训练集中的训练样本图像进行顺序标注，并将标注好的训练样本图像输入到卷积神经网络-长短时记忆神经网络中进行训练，采用时序分类算法和Adam优化器更新卷积神经网络-长短时记忆神经网络的网络参数，从而得到该长短时记忆神经网络模型。
其中，时序分类算法(Connectionist temporal classification，简称CTC)，用于解决输入特征和输出标签之间对齐关系不确定的时间序列问题，是一种可以端到端同时优化模型参数和对齐切分的边界的算法。
在本实施例中，对内容图像进行图像预处理，得到标准图像，进而采用场景文本检测算法对标准图像进行文字定位，确定标准图像中的文字范围，作为目标文字区域，使得识别区域变小，避免过多的干扰造成的识别时间过多和识别准确率下降，提高了内容图像的内容文本识别效率，同时，采用预先训练好的长短时记忆神经网络模型，对目标文字区域进行识别，得到目标文字区域对应的文本信息，并将文本信息作为内容文本，这种通过神经网络模型进行文字识别的方式，提高了识别效率和识别准确率。
在一实施例中，在步骤S60之后，该前端页面生成方法还包括对生成前端页面进行更新。
请参阅图6，图6示出了本发明实施例提供的对生成的前端页面进行更新的具体实现流程，详述如下：
S71：若接收到客户端发送的页面修改请求，则获取页面修改请求中包含的修改元素信息，并获取修改元素信息对应的基本元素信息，作为被修改元素信息。
具体地，客户端的人员在接收到服务端发送的前端页面后，对该前端页面进行浏览测试，在发现一些错误因素或者对一些要素有更好的设计时，需要对前端页面进行修改更新，此处，通过客户端向服务端发送页面修改请求，服务端在接收到该页面修改请求后，获取该请求中包含的修改元素信息，并获取需要被修改的基本元素信息，作为被修改元素信息。
S72：通过预设的代码转换方式，对修改元素信息进行代码转换，得到修改元素信息对应的更新代码。
具体地，通过预设的代码转换方式，对修改元素信息进行代码转换，得到修改元素信息对应的更新代码，具体实现流程可参考步骤S40的描述，为避免重复，此处不再赘述。
S73：使用更新代码更新目标代码中，被修改元素信息对应的基础代码，得到更新后的目标代码。
具体地，使用更新代码对目标代码中，被修改元素信息对应的基础代码进行更新，即，使用更新代码，替换目标代码中被修改元素信息对应的基础代码，并根据预设的代码转换方式，检查优化代码的冗余和对应性，得到更新后的目标代码。
S74：执行更新后的目标代码，生成更新后的前端页面，并将更新后的前端页面发送给客户端。
具体地，对更新后的目标代码进行执行操作，生成更新后的前端页面，并将该更新后的前端页面发送个客户端，以使客户端的人员对更新后的前端页面进行浏览测试。
在本实施例中，在接收到客户端发送的页面修改请求时，获取页面修改请求中包含的修改元素信息，并获取修改元素信息对应的基本元素信息，作为被修改元素信息，进而通过预设的代码转换方式，对修改元素信息进行代码转换，得到修改元素信息对应的更新代码，使得可以根据需要，智能化地对生成的前端页面进行修改更新，提高了前端页面更新的效率。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
图7示出与上述实施例前端页面生成方法一一对应的前端页面生成装置的原理框图。如图7所示，该前端页面生成装置包括请求接收模块10、图像分割模块20、内容解析模块30、代码转换模块40、代码生成模块50和页面生成模块60。各功能模块详细说明如下：
请求接收模块10，用于若接收到客户端发送的前端页面生成请求，则获取前端页面生成请求中包含的前端设计图，其中，前端设计图包括至少一个内容版块；
图像分割模块20，用于使用预设的网络模型，对前端设计图进行图像语义分割，使得每个内容版块被分割成一个基础图像，并获取每个基础图像对应的页面位置信息；
内容解析模块30，用于对每个基础图像进行内容解析，得到每个基础图像对应的基本元素信息；
代码转换模块40，用于通过预设的代码转换方式，对基本元素信息进行代码转换，得到每个基础图像对应的基础代码；
代码生成模块50，用于根据每个基础图像对应的页面位置信息和每个基础图像对应的基础代码，生成前端设计图对应的目标代码；
页面生成模块60，用于执行目标代码，生成前端页面，并将前端页面发送给客户端。
进一步地，代码生成模块50包括：
位置代码生成单元51，用于根据每个基础图像对应的页面位置信息，生成每个基础图像对应的位置代码；
图像模块封装单元52，用于针对每个基础图像，将基础图像对应的位置代码和基础图像对应的基础代码封装成基础图像模块；
相邻图像确定单元53，用于根据每个基础图像对应的页面位置信息，将页面位置相邻的两个基础图像作为一组相邻图像；
相邻图像拼接单元54，用于为每组相邻图像对应的两个基础图像模块生成图像拼接代码，得到前端设计图对应的目标代码。
进一步地，内容解析模块30包括：
背景分离单元31，用于对基础图像进行背景分离，得到基础图像的背景图像和基础图像的内容图像；
第一获取单元32，用于获取背景图像的背景颜色和背景样式，并将背景颜色和背景样式作为背景元素信息；
第二获取单元33，用于获取内容图像的内容文本、内容颜色和内容样式，并将内容文本、内容颜色和内容样式作为内容元素信息。
进一步地，第二获取单元33包括：
预处理子单元331，用于对内容图像进行图像预处理，得到标准图像；
区域确定子单位332，用于采用场景文本检测算法对标准图像进行文字定位，确定标准图像中的文字范围，作为目标文字区域；
文本识别子单元333，用于采用预先训练好的长短时记忆神经网络模型，对目标文字区域进行识别，得到目标文字区域对应的文本信息，将文本信息作为内容文本。
进一步地，该前端页面生成装置还包括：
修改请求接收模块71，用于若接收到客户端发送的页面修改请求，则获取页面修改请求中包含的修改元素信息，并获取修改元素信息对应的基本元素信息，作为被修改元素信息；
更新代码生成模块72，用于通过预设的代码转换方式，对修改元素信息进行代码转换，得到修改元素信息对应的更新代码；
目标代码更新模块73，用于使用更新代码更新目标代码中，被修改元素信息对应的基础代码，得到更新后的目标代码；
前端页面更新模块74，用于执行更新后的目标代码，生成更新后的前端页面，并将更新后的前端页面发送给客户端。
关于前端页面生成装置的具体限定可以参见上文中对于前端页面生成方法的限定，在此不再赘述。上述前端页面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
图8是本发明一实施例提供的计算机设备的示意图。该计算机设备可以是服务端，其内部结构图可以如图8所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储基本元素信息对应的代码以及预设的网络模型。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种前端页面生成方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例前端页面生成方法的步骤，例如图2所示的步骤S10至步骤S60。或者，处理器执行计算机程序时实现上述实施例前端页面生成装置的各模块/单元的功能，例如图7所示的模块10至模块60的功能。为避免重复，这里不再赘述。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
在一实施例中，提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例前端页面生成方法的步骤，或者，该计算机程序被处理器执行时实现上述实施例前端页面生成装置中各模块/单元的功能。为避免重复，这里不再赘述。
可以理解地，所述计算机可读存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、电载波信号和电信信号等。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
Claims (10)
1.一种前端页面生成方法，其特征在于，
若接收到客户端发送的前端页面生成请求，则获取所述前端页面生成请求中包含的前端设计图，其中，所述前端设计图包括至少一个内容版块；
使用预设的网络模型，对所述前端设计图进行图像语义分割，使得每个所述内容版块被分割成一个基础图像，并获取每个所述基础图像对应的页面位置信息；
对每个所述基础图像进行内容解析，得到每个所述基础图像对应的基本元素信息；
通过预设的代码转换方式，对所述基本元素信息进行代码转换，得到每个所述基础图像对应的基础代码；
根据每个所述基础图像对应的页面位置信息和每个所述基础图像对应的基础代码，生成所述前端设计图对应的目标代码；
执行所述目标代码，生成前端页面，并将所述前端页面发送给所述客户端。
2.如权利要求1所述的前端页面生成方法，其特征在于，所述根据每个所述基础图像对应的页面位置信息和每个所述基础图像对应的基础代码，生成所述前端设计图对应的目标代码包括：
根据每个所述基础图像对应的页面位置信息，生成每个所述基础图像对应的位置代码；
针对每个所述基础图像，将所述基础图像对应的位置代码和所述基础图像对应的基础代码封装成基础图像模块；
根据每个所述基础图像对应的页面位置信息，将页面位置相邻的两个所述基础图像作为一组相邻图像；
为每组所述相邻图像对应的两个所述基础图像模块生成图像拼接代码，得到所述前端设计图对应的所述目标代码。
3.如权利要求1所述的前端页面生成方法，其特征在于，所述基本元素信息包括背景元素信息和内容元素信息，所述对每个所述基础图像进行内容解析，得到每个所述基础图像对应的基本元素信息包括：
对所述基础图像进行背景分离，得到所述基础图像的背景图像和所述基础图像的内容图像；
获取所述背景图像的背景颜色和背景样式，并将所述背景颜色和所述背景样式作为背景元素信息；
获取所述内容图像的内容文本、内容颜色和内容样式，并将所述内容文本、所述内容颜色和所述内容样式作为内容元素信息。
4.如权利要求3所述的前端页面生成方法，其特征在于，所述获取所述内容图像的内容文本包括：
对所述内容图像进行图像预处理，得到标准图像；
采用场景文本检测算法对所述标准图像进行文字定位，确定所述标准图像中的文字范围，作为目标文字区域；
采用预先训练好的长短时记忆神经网络模型，对所述目标文字区域进行识别，得到所述目标文字区域对应的文本信息，将所述文本信息作为所述内容文本。
5.如权利要求1至4任一项所述的前端页面生成方法，其特征在于，在所述执行所述目标代码，得到前端页面，并将所述前端页面发送给所述客户端之后，所述前端页面生成方法还包括：
若接收到所述客户端发送的页面修改请求，则获取所述页面修改请求中包含的修改元素信息，并获取所述修改元素信息对应的基本元素信息，作为被修改元素信息；
通过预设的代码转换方式，对所述修改元素信息进行代码转换，得到所述修改元素信息对应的更新代码；
将所述更新代码更新所述目标代码中，所述被修改元素信息对应的基础代码，得到更新后的目标代码；
执行所述更新后的目标代码，生成更新后的前端页面，并将所述更新后的前端页面发送给所述客户端。
6.一种前端页面生成装置，其特征在于，所述前端页面生成装置包括：
请求接收模块，用于若接收到客户端发送的前端页面生成请求，则获取所述前端页面生成请求中包含的前端设计图，其中，所述前端设计图包括至少一个内容版块；
图像分割模块，用于使用预设的网络模型，对所述前端设计图进行图像语义分割，使得每个所述内容版块被分割成一个基础图像，并获取每个所述基础图像对应的页面位置信息；
内容解析模块，用于对每个所述基础图像进行内容解析，得到每个所述基础图像对应的基本元素信息；
代码转换模块，用于通过预设的代码转换方式，对所述基本元素信息进行代码转换，得到每个所述基础图像对应的基础代码；
代码生成模块，用于根据每个所述基础图像对应的页面位置信息和每个所述基础图像对应的基础代码，生成所述前端设计图对应的目标代码；
页面生成模块，用于执行所述目标代码，生成前端页面，并将所述前端页面发送给所述客户端。
7.如权利要求6所述的前端页面生成装置，其特征在于，所述内容解析模块包括：
背景分离单元，用于对所述基础图像进行背景分离，得到所述基础图像的背景图像和所述基础图像的内容图像；
第一获取单元，用于获取所述背景图像的背景颜色和背景样式，并将所述背景颜色和所述背景样式作为背景元素信息；
第二获取单元，用于获取所述内容图像的内容文本、内容颜色和内容样式，并将所述内容文本、所述内容颜色和所述内容样式作为内容元素信息。
8.如权利要求6所述的前端页面生成装置，其特征在于，所述第二获取单元包括：
预处理子单元，用于对所述内容图像进行图像预处理，得到标准图像；
区域确定子单位，用于采用场景文本检测算法对所述标准图像进行文字定位，确定所述标准图像中的文字范围，作为目标文字区域；
文本识别子单元，用于采用预先训练好的长短时记忆神经网络模型，对所述目标文字区域进行识别，得到所述目标文字区域对应的文本信息，将所述文本信息作为所述内容文本。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述的前端页面生成方法的步骤。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的前端页面生成方法的步骤。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811537431.6A CN109783094A (zh) | 2018-12-15 | 2018-12-15 | 前端页面生成方法、装置、计算机设备及存储介质 |
| PCT/CN2019/120109 WO2020119420A1 (zh) | 2018-12-15 | 2019-11-22 | 前端页面生成方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811537431.6A CN109783094A (zh) | 2018-12-15 | 2018-12-15 | 前端页面生成方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109783094A true CN109783094A (zh) | 2019-05-21 |
Family
ID=66497084
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811537431.6A Pending CN109783094A (zh) | 2018-12-15 | 2018-12-15 | 前端页面生成方法、装置、计算机设备及存储介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN109783094A (zh) |
| WO (1) | WO2020119420A1 (zh) |
Cited By (32)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321126A (zh) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | 生成页面代码的方法和装置 |
| CN110333862A (zh) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | Ui页面代码生成方法、装置以及服务器 |
| CN110363194A (zh) * | 2019-06-17 | 2019-10-22 | 深圳壹账通智能科技有限公司 | 基于nlp的智能阅卷方法、装置、设备及存储介质 |
| CN110502236A (zh) * | 2019-08-07 | 2019-11-26 | 山东师范大学 | 基于多尺度特征解码的前端代码生成方法、系统及设备 |
| CN110502710A (zh) * | 2019-07-11 | 2019-11-26 | 平安普惠企业管理有限公司 | 页面生成方法、装置、设备及可读存储介质 |
| CN111259567A (zh) * | 2020-02-21 | 2020-06-09 | 深圳市信锐网科技术有限公司 | 一种布局图生成方法、装置和存储介质 |
| WO2020119420A1 (zh) * | 2018-12-15 | 2020-06-18 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
| CN111309300A (zh) * | 2020-01-17 | 2020-06-19 | 深圳壹账通智能科技有限公司 | 代码生成方法、装置、计算机系统及可读存储介质 |
| CN111475156A (zh) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN111580902A (zh) * | 2020-04-20 | 2020-08-25 | 微梦创科网络科技（中国）有限公司 | 一种基于图片分析的移动端元素定位方法及系统 |
| CN111782180A (zh) * | 2020-06-24 | 2020-10-16 | 智车优行科技（北京）有限公司 | 页面生成方法和装置、电子设备和存储介质 |
| CN111913695A (zh) * | 2020-08-07 | 2020-11-10 | 国网信息通信产业集团有限公司 | 一种代码转换方法、装置和存储介质 |
| CN112099773A (zh) * | 2020-09-14 | 2020-12-18 | 济南浪潮高新科技投资发展有限公司 | 一种实现桌面应用开发方法 |
| CN112255962A (zh) * | 2020-10-30 | 2021-01-22 | 浙江佳乐科仪股份有限公司 | 基于人工智能的plc编程系统 |
| CN112379880A (zh) * | 2020-12-01 | 2021-02-19 | 北京致远互联软件股份有限公司 | 一种零代码动态更新系统页面文字的方法 |
| CN112416340A (zh) * | 2020-05-14 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | 基于草图的网页生成方法和系统 |
| CN112558973A (zh) * | 2020-12-25 | 2021-03-26 | 青岛海尔科技有限公司 | 一种前端页面的生成方法及装置、存储介质、电子装置 |
| CN112631586A (zh) * | 2020-12-24 | 2021-04-09 | 软通动力信息技术(集团)股份有限公司 | 一种应用开发方法、装置、电子设备和存储介质 |
| CN112631588A (zh) * | 2020-12-28 | 2021-04-09 | 北京五八信息技术有限公司 | 文件生成方法、装置、电子设备和计算机可读介质 |
| CN112732259A (zh) * | 2021-01-11 | 2021-04-30 | 赞同科技股份有限公司 | 基于人工智能的前端交互页面转换方法、装置及介质 |
| CN112749364A (zh) * | 2020-02-28 | 2021-05-04 | 腾讯科技（深圳）有限公司 | 基于人工智能的网页生成方法、装置、设备及存储介质 |
| CN112837332A (zh) * | 2021-01-13 | 2021-05-25 | 杭州水母智能科技有限公司 | 创意设计的生成方法、装置、终端、存储介质及处理器 |
| CN113296769A (zh) * | 2020-11-18 | 2021-08-24 | 阿里巴巴集团控股有限公司 | 数据处理方法、视觉稿的处理方法、系统及电子设备 |
| CN113326045A (zh) * | 2021-08-03 | 2021-08-31 | 成都中科合迅科技有限公司 | 基于设计文件的界面代码生成方法 |
| CN113361525A (zh) * | 2021-06-30 | 2021-09-07 | 深圳市斯博科技有限公司 | 基于ocr的页面生成方法、装置、计算机设备及存储介质 |
| CN113391805A (zh) * | 2021-06-24 | 2021-09-14 | 上海中通吉网络技术有限公司 | 前端代码自动生成方法 |
| CN113626023A (zh) * | 2021-08-30 | 2021-11-09 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113742619A (zh) * | 2020-11-13 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | 页面布局的确定方法、装置、电子设备和存储介质 |
| CN113822272A (zh) * | 2020-11-12 | 2021-12-21 | 北京沃东天骏信息技术有限公司 | 数据处理方法和装置 |
| WO2022151876A1 (zh) * | 2021-01-15 | 2022-07-21 | 北京字节跳动网络技术有限公司 | 应用程序的测试控制方法、装置、电子设备及存储介质 |
| CN116610304A (zh) * | 2023-07-18 | 2023-08-18 | 腾讯科技（深圳）有限公司 | 页面代码生成方法、装置、设备和存储介质 |
| CN116661667A (zh) * | 2023-07-28 | 2023-08-29 | 北京安锐卓越信息技术股份有限公司 | 一种海报图片的处理方法、装置、电子设备及存储介质 |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117730309A (zh) * | 2022-05-31 | 2024-03-19 | 小米科技(武汉)有限公司 | 模型的确定方法、布局生成方法、装置、介质和芯片 |
Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014025467A1 (en) * | 2012-08-09 | 2014-02-13 | Google Inc. | Browser-level background page for providing multiple views |
| CN103605521A (zh) * | 2013-11-21 | 2014-02-26 | 广州爱九游信息技术有限公司 | 一种实现界面对位的方法及装置 |
| US20160092211A1 (en) * | 2014-09-29 | 2016-03-31 | Radu-Florian Atanasiu | Visualizations of inter-entity calls |
| CN105930159A (zh) * | 2016-04-20 | 2016-09-07 | 中山大学 | 一种基于图像的界面代码生成的方法及系统 |
| CN106126249A (zh) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | 一种在前端实现行为、数据、视图联动的方法及系统 |
| CN106886418A (zh) * | 2017-03-27 | 2017-06-23 | 湛江市霞山区新软佳科技有限公司 | Html界面控件贴 |
| CN107291476A (zh) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas代码生成方法、装置、电子设备及存储介质 |
| CN107545262A (zh) * | 2017-07-31 | 2018-01-05 | 华为技术有限公司 | 一种在自然场景图像中检测文本的方法及装置 |
| CN108198159A (zh) * | 2017-12-28 | 2018-06-22 | 努比亚技术有限公司 | 一种图像处理方法、移动终端以及计算机可读存储介质 |
| US20180203571A1 (en) * | 2017-01-18 | 2018-07-19 | Oracle International Corporation | Generating a graphical user interface model from an image |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| US10031729B1 (en) * | 2014-12-30 | 2018-07-24 | Open Text Corporation | Method and system for implementing custom UI actions in a web application using hidden containers |
| US20180210725A1 (en) * | 2017-01-26 | 2018-07-26 | Nice Ltd. | Image based method and system for building object model and application states comparison and graphic-based interoperability with an application |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108415705A (zh) * | 2018-03-13 | 2018-08-17 | 腾讯科技（深圳）有限公司 | 网页生成方法、装置、存储介质及设备 |
| CN108764226A (zh) * | 2018-04-13 | 2018-11-06 | 顺丰科技有限公司 | 图像文本识别方法、装置、设备及其存储介质 |
| CN108804093A (zh) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | 一种代码生成方法和电子设备 |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8073189B2 (en) * | 2007-08-03 | 2011-12-06 | General Electric Company | Methods and systems for selecting an image application based on image content |
| CN105447096A (zh) * | 2015-11-09 | 2016-03-30 | 百度在线网络技术（北京）有限公司 | 网页生成方法及装置 |
| CN108229478B (zh) * | 2017-06-30 | 2020-12-29 | 深圳市商汤科技有限公司 | 图像语义分割及训练方法和装置、电子设备、存储介质和程序 |
| CN108229504B (zh) * | 2018-01-29 | 2020-09-08 | 深圳市商汤科技有限公司 | 图像解析方法及装置 |
| CN108985214A (zh) * | 2018-07-09 | 2018-12-11 | 上海斐讯数据通信技术有限公司 | 图像数据的标注方法和装置 |
| CN109783094A (zh) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
-
2018
- 2018-12-15 CN CN201811537431.6A patent/CN109783094A/zh active Pending
-
2019
- 2019-11-22 WO PCT/CN2019/120109 patent/WO2020119420A1/zh active Application Filing
Patent Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014025467A1 (en) * | 2012-08-09 | 2014-02-13 | Google Inc. | Browser-level background page for providing multiple views |
| CN103605521A (zh) * | 2013-11-21 | 2014-02-26 | 广州爱九游信息技术有限公司 | 一种实现界面对位的方法及装置 |
| US20160092211A1 (en) * | 2014-09-29 | 2016-03-31 | Radu-Florian Atanasiu | Visualizations of inter-entity calls |
| US10031729B1 (en) * | 2014-12-30 | 2018-07-24 | Open Text Corporation | Method and system for implementing custom UI actions in a web application using hidden containers |
| CN105930159A (zh) * | 2016-04-20 | 2016-09-07 | 中山大学 | 一种基于图像的界面代码生成的方法及系统 |
| CN106126249A (zh) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | 一种在前端实现行为、数据、视图联动的方法及系统 |
| US20180203571A1 (en) * | 2017-01-18 | 2018-07-19 | Oracle International Corporation | Generating a graphical user interface model from an image |
| US20180210725A1 (en) * | 2017-01-26 | 2018-07-26 | Nice Ltd. | Image based method and system for building object model and application states comparison and graphic-based interoperability with an application |
| CN106886418A (zh) * | 2017-03-27 | 2017-06-23 | 湛江市霞山区新软佳科技有限公司 | Html界面控件贴 |
| CN107291476A (zh) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas代码生成方法、装置、电子设备及存储介质 |
| CN107545262A (zh) * | 2017-07-31 | 2018-01-05 | 华为技术有限公司 | 一种在自然场景图像中检测文本的方法及装置 |
| CN108198159A (zh) * | 2017-12-28 | 2018-06-22 | 努比亚技术有限公司 | 一种图像处理方法、移动终端以及计算机可读存储介质 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108415705A (zh) * | 2018-03-13 | 2018-08-17 | 腾讯科技（深圳）有限公司 | 网页生成方法、装置、存储介质及设备 |
| CN108764226A (zh) * | 2018-04-13 | 2018-11-06 | 顺丰科技有限公司 | 图像文本识别方法、装置、设备及其存储介质 |
| CN108804093A (zh) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | 一种代码生成方法和电子设备 |
Non-Patent Citations (1)
| Title |
|---|
| 彭红超: "一种基于视觉的网页分割技术及应用研究" * |
Cited By (43)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2020119420A1 (zh) * | 2018-12-15 | 2020-06-18 | 深圳壹账通智能科技有限公司 | 前端页面生成方法、装置、计算机设备及存储介质 |
| CN110333862A (zh) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | Ui页面代码生成方法、装置以及服务器 |
| CN110363194A (zh) * | 2019-06-17 | 2019-10-22 | 深圳壹账通智能科技有限公司 | 基于nlp的智能阅卷方法、装置、设备及存储介质 |
| CN110321126A (zh) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | 生成页面代码的方法和装置 |
| CN110321126B (zh) * | 2019-07-08 | 2020-09-29 | 北京三快在线科技有限公司 | 生成页面代码的方法和装置 |
| CN110502710A (zh) * | 2019-07-11 | 2019-11-26 | 平安普惠企业管理有限公司 | 页面生成方法、装置、设备及可读存储介质 |
| CN110502236A (zh) * | 2019-08-07 | 2019-11-26 | 山东师范大学 | 基于多尺度特征解码的前端代码生成方法、系统及设备 |
| CN110502236B (zh) * | 2019-08-07 | 2022-10-25 | 山东师范大学 | 基于多尺度特征解码的前端代码生成方法、系统及设备 |
| CN111309300A (zh) * | 2020-01-17 | 2020-06-19 | 深圳壹账通智能科技有限公司 | 代码生成方法、装置、计算机系统及可读存储介质 |
| CN111259567A (zh) * | 2020-02-21 | 2020-06-09 | 深圳市信锐网科技术有限公司 | 一种布局图生成方法、装置和存储介质 |
| CN111259567B (zh) * | 2020-02-21 | 2024-06-04 | 深圳市信锐网科技术有限公司 | 一种布局图生成方法、装置和存储介质 |
| CN112749364A (zh) * | 2020-02-28 | 2021-05-04 | 腾讯科技（深圳）有限公司 | 基于人工智能的网页生成方法、装置、设备及存储介质 |
| CN112749364B (zh) * | 2020-02-28 | 2023-09-15 | 腾讯科技（深圳）有限公司 | 基于人工智能的网页生成方法、装置、设备及存储介质 |
| CN111475156B (zh) * | 2020-04-13 | 2024-04-02 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN111475156A (zh) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN111580902A (zh) * | 2020-04-20 | 2020-08-25 | 微梦创科网络科技（中国）有限公司 | 一种基于图片分析的移动端元素定位方法及系统 |
| CN111580902B (zh) * | 2020-04-20 | 2024-01-26 | 微梦创科网络科技（中国）有限公司 | 一种基于图片分析的移动端元素定位方法及系统 |
| CN112416340A (zh) * | 2020-05-14 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | 基于草图的网页生成方法和系统 |
| CN112416340B (zh) * | 2020-05-14 | 2024-08-02 | 上海哔哩哔哩科技有限公司 | 基于草图的网页生成方法和系统 |
| CN111782180A (zh) * | 2020-06-24 | 2020-10-16 | 智车优行科技（北京）有限公司 | 页面生成方法和装置、电子设备和存储介质 |
| CN111913695A (zh) * | 2020-08-07 | 2020-11-10 | 国网信息通信产业集团有限公司 | 一种代码转换方法、装置和存储介质 |
| CN112099773A (zh) * | 2020-09-14 | 2020-12-18 | 济南浪潮高新科技投资发展有限公司 | 一种实现桌面应用开发方法 |
| CN112255962A (zh) * | 2020-10-30 | 2021-01-22 | 浙江佳乐科仪股份有限公司 | 基于人工智能的plc编程系统 |
| CN113822272A (zh) * | 2020-11-12 | 2021-12-21 | 北京沃东天骏信息技术有限公司 | 数据处理方法和装置 |
| CN113742619A (zh) * | 2020-11-13 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | 页面布局的确定方法、装置、电子设备和存储介质 |
| CN113296769A (zh) * | 2020-11-18 | 2021-08-24 | 阿里巴巴集团控股有限公司 | 数据处理方法、视觉稿的处理方法、系统及电子设备 |
| CN112379880A (zh) * | 2020-12-01 | 2021-02-19 | 北京致远互联软件股份有限公司 | 一种零代码动态更新系统页面文字的方法 |
| CN112631586A (zh) * | 2020-12-24 | 2021-04-09 | 软通动力信息技术(集团)股份有限公司 | 一种应用开发方法、装置、电子设备和存储介质 |
| CN112631586B (zh) * | 2020-12-24 | 2023-05-26 | 软通动力信息技术(集团)股份有限公司 | 一种应用开发方法、装置、电子设备和存储介质 |
| CN112558973A (zh) * | 2020-12-25 | 2021-03-26 | 青岛海尔科技有限公司 | 一种前端页面的生成方法及装置、存储介质、电子装置 |
| CN112631588A (zh) * | 2020-12-28 | 2021-04-09 | 北京五八信息技术有限公司 | 文件生成方法、装置、电子设备和计算机可读介质 |
| CN112732259A (zh) * | 2021-01-11 | 2021-04-30 | 赞同科技股份有限公司 | 基于人工智能的前端交互页面转换方法、装置及介质 |
| CN112732259B (zh) * | 2021-01-11 | 2024-05-24 | 赞同科技股份有限公司 | 基于人工智能的前端交互页面转换方法、装置及介质 |
| CN112837332B (zh) * | 2021-01-13 | 2024-01-19 | 杭州水母智能科技有限公司 | 创意设计的生成方法、装置、终端、存储介质 |
| CN112837332A (zh) * | 2021-01-13 | 2021-05-25 | 杭州水母智能科技有限公司 | 创意设计的生成方法、装置、终端、存储介质及处理器 |
| WO2022151876A1 (zh) * | 2021-01-15 | 2022-07-21 | 北京字节跳动网络技术有限公司 | 应用程序的测试控制方法、装置、电子设备及存储介质 |
| CN113391805A (zh) * | 2021-06-24 | 2021-09-14 | 上海中通吉网络技术有限公司 | 前端代码自动生成方法 |
| CN113361525A (zh) * | 2021-06-30 | 2021-09-07 | 深圳市斯博科技有限公司 | 基于ocr的页面生成方法、装置、计算机设备及存储介质 |
| CN113326045A (zh) * | 2021-08-03 | 2021-08-31 | 成都中科合迅科技有限公司 | 基于设计文件的界面代码生成方法 |
| CN113626023A (zh) * | 2021-08-30 | 2021-11-09 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN116610304A (zh) * | 2023-07-18 | 2023-08-18 | 腾讯科技（深圳）有限公司 | 页面代码生成方法、装置、设备和存储介质 |
| CN116610304B (zh) * | 2023-07-18 | 2024-01-02 | 腾讯科技（深圳）有限公司 | 页面代码生成方法、装置、设备和存储介质 |
| CN116661667A (zh) * | 2023-07-28 | 2023-08-29 | 北京安锐卓越信息技术股份有限公司 | 一种海报图片的处理方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2020119420A1 (zh) | 2020-06-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109783094A (zh) | 前端页面生成方法、装置、计算机设备及存储介质 | |
| US11670012B2 (en) | Encoding and decoding a stylized custom graphic | |
| US11657230B2 (en) | Referring image segmentation | |
| US10354362B2 (en) | Methods and software for detecting objects in images using a multiscale fast region-based convolutional neural network | |
| CN110009027B (zh) | 图像的比对方法、装置、存储介质及电子装置 | |
| CN110446063A (zh) | 视频封面的生成方法、装置及电子设备 | |
| CN111260740A (zh) | 一种基于生成对抗网络的文本到图像生成方法 | |
| CN115457531A (zh) | 用于识别文本的方法和装置 | |
| CN107766349B (zh) | 一种生成文本的方法、装置、设备及客户端 | |
| CN111143617A (zh) | 一种图片或视频文本描述自动生成方法及系统 | |
| CN110046617A (zh) | 一种基于深度学习的数字电表读数自适应识别方法 | |
| CN111783712A (zh) | 一种视频处理方法、装置、设备及介质 | |
| CN111950528A (zh) | 图表识别模型训练方法以及装置 | |
| CN112149642A (zh) | 一种文本图像识别方法和装置 | |
| CN110991149A (zh) | 一种多模态实体链接方法和实体链接系统 | |
| CN112419326A (zh) | 图像分割数据处理方法、装置、设备及存储介质 | |
| CN115131604A (zh) | 一种多标签图像分类方法、装置、电子设备及存储介质 | |
| CN115131801A (zh) | 基于多模态的文档识别方法、装置、设备和存储介质 | |
| CN113094287B (zh) | 页面兼容性检测方法、装置、设备及存储介质 | |
| CN116776157B (zh) | 支持模态增加的模型学习方法及其装置 | |
| CN116361502B (zh) | 一种图像检索方法、装置、计算机设备及存储介质 | |
| CN111881900B (zh) | 语料生成、翻译模型训练、翻译方法、装置、设备及介质 | |
| CN113822521A (zh) | 题库题目的质量检测方法、装置及存储介质 | |
| CN117131923A (zh) | 一种针对跨模态学习的后门攻击方法及相关装置 | |
| CN112508031A (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 | ||
| AD01 | Patent right deemed abandoned | ||
| AD01 | Patent right deemed abandoned |
Effective date of abandoning: 20231215 |