CN116610304B - 页面代码生成方法、装置、设备和存储介质 - Google Patents

页面代码生成方法、装置、设备和存储介质 Download PDF

Info

Publication number
CN116610304B
CN116610304B CN202310878920.2A CN202310878920A CN116610304B CN 116610304 B CN116610304 B CN 116610304B CN 202310878920 A CN202310878920 A CN 202310878920A CN 116610304 B CN116610304 B CN 116610304B
Authority
CN
China
Prior art keywords
page
component
segmentation
data
page design
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
CN202310878920.2A
Other languages
English (en)
Other versions
CN116610304A (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202310878920.2A priority Critical patent/CN116610304B/zh
Publication of CN116610304A publication Critical patent/CN116610304A/zh
Application granted granted Critical
Publication of CN116610304B publication Critical patent/CN116610304B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • 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/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • 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
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请涉及一种页面代码生成方法、装置、设备和存储介质，该方法涉及图像处理技术。所述方法包括：获取页面设计图；将页面设计图分割成多个子区域；将分割出的各子区域与预设的各组件样例图进行图像匹配；获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图；根据组件数据填充页面结构数据模板，得到页面结构数据；根据页面结构数据生成页面代码，页面代码用于生成与页面设计图对应的应用页面。采用本方法能够对页面设计图进行自动识别，可以自动化、高效地将页面设计稿转换为页面代码，提高应用页面的开发效率。

Description

页面代码生成方法、装置、设备和存储介质
技术领域
本申请涉及计算机技术领域，特别是涉及一种页面代码生成方法、装置、计算机设备和计算机可读存储介质。
背景技术
随着计算机技术与互联网技术的快速发展，各类客户端的页面开发已经成为了计算机行业的热门领域。在生成一个应用页面时，通常需要设计师提供页面设计稿，然后由开发人员根据页面设计稿来编写应用页面代码。页面设计稿的修改频率较高，这给应用页面开发带来了很大的挑战，因此，页面设计稿转换页面代码的技术需求也日益突出。
目前，开发人员通常可以借助一些工具将页面设计稿转换为代码，然而，这些工具基本上都需要开发人员手动操作才能实现设计稿转换页面代码的功能，需要人工干预，无法实现自动化、高效地将设计稿转换为页面代码，导致应用页面的开发效率较低。
发明内容
基于此，有必要针对上述技术问题，提供一种能够提高应用页面的开发效率的页面代码生成方法、装置、计算机设备和计算机可读存储介质。
第一方面，本申请提供了一种页面代码生成方法。所述方法包括：
获取页面设计图；
将所述页面设计图分割成多个子区域；
将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；
根据所述组件数据填充页面结构数据模板，得到页面结构数据；
根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
第二方面，本申请还提供了一种页面代码生成装置。所述装置包括：
获取模块，用于获取页面设计图；
分割模块，用于将所述页面设计图分割成多个子区域；
图像匹配模块，用于将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
组件数据获取模块，用于获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；
结构生成模块，用于根据所述组件数据填充页面结构数据模板，得到页面结构数据；
代码生成模块，用于根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
在其中一个实施例中，所述获取模块，还用于获取页面设计稿对应的设计稿链接；从所述设计稿链接提取所述页面设计稿对应的访问参数；根据所述访问参数，生成所述页面设计稿对应的页面设计图的访问请求；根据所述访问请求，获取所述页面设计稿对应的页面设计图。
在其中一个实施例中，所述分割模块，还用于对所述页面设计图进行灰度化处理，得到所述页面设计图对应的灰度图；对所述灰度图进行投影处理，得到所述页面设计图对应的投影直方图；基于所述投影直方图，确定所述页面设计图上的分割位置；基于所述分割位置，将所述页面设计图分割成多个子区域。
在其中一个实施例中，所述分割模块，还用于确定所述灰度图中灰度值等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第一预设灰度值；确定所述灰度图中灰度值不等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第二预设灰度值，得到所述页面设计图的投影直方图；其中，所述第一预设灰度值与所述第二预设灰度值不同。
在其中一个实施例中，所述分割模块，还用于遍历所述投影直方图的每一行像素点；统计所述投影直方图中每一行像素点中灰度值等于所述第一预设灰度值的像素点的数量，若所述数量为所述页面设计图的一行像素数，则将相应的行作为候选分割行；基于所述候选分割行，确定所述页面设计图上的分割位置。
在其中一个实施例中，所述分割模块，还用于若所述投影直方图中存在连续的多个候选分割行，则将所述连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
在其中一个实施例中，所述分割模块，还用于以所述页面设计图的顶部为起点、沿着所述页面设计图的高度方向向下延伸预设距离到达组件区域分割位置；根据所述组件区域分割位置从所述页面设计图中裁出顶部区域，得到组件区域；将所述组件区域分割成多个子区域。
在其中一个实施例中，所述图像匹配模块，还用于获取预设的各组件样例图；对于分割出的每个所述子区域，计算所述子区域与预设的各组件样例图之间的相似度；根据所述相似度确定所述子区域与所述组件样例图之间的图像匹配结果。
在其中一个实施例中，所述页面结构数据模板包括页面根节点数据和页面子节点数据模板；所述组件数据包括组件名称、组件文案和组件样式，所述结构生成模块，还用于对于匹配成功的组件样例图对应的组件数据，从所述组件数据中提取组件名称、组件文案和组件样式，将所述组件名称、组件文案和组件样式填充至一个页面子节点数据模板，得到页面子节点数据；根据所述页面根节点数据和每个页面子节点数据，得到页面结构数据。
在其中一个实施例中，所述结构生成模块，还用于根据所述页面结构数据中的所述页面根节点数据，生成根节点；根据所述页面结构数据中的每个所述页面子节点数据，生成每个子节点；将所述根节点和各所述子节点进行关联，得到页面代码。
在其中一个实施例中，所述结构生成模块，还用于根据所述页面代码生成与所述页面设计图对应的应用页面；展示所述应用页面。
第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
获取页面设计图；
将所述页面设计图分割成多个子区域；
将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；
根据所述组件数据填充页面结构数据模板，得到页面结构数据；
根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
获取页面设计图；
将所述页面设计图分割成多个子区域；
将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；
根据所述组件数据填充页面结构数据模板，得到页面结构数据；
根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：
获取页面设计图；
将所述页面设计图分割成多个子区域；
将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；
根据所述组件数据填充页面结构数据模板，得到页面结构数据；
根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
上述页面代码生成方法、装置、计算机设备和计算机可读存储介质，获取页面设计图，将页面设计图分割成多个子区域，将子区域与预设的组件样例图进行图像匹配，获取图像匹配成功的组件样例图的组件标识所对应的组件数据，将组件数据填充至页面结构数据模板，得到页面结构数据，根据页面结构数据生成页面代码。上述方法在获取到页面设计图时可以基于图像匹配将页面设计图自动转换为页面代码，无需人为手动操作，可以自动化、高效地将页面设计图转换为用于生成应用页面的页面代码，提高应用页面的开发效率。
附图说明
图1为一个实施例中页面代码生成方法的应用环境图；
图2为一个实施例中页面代码生成方法的流程示意图；
图3为一个实施例中生成页面代码的总体流程示意图；
图4为一个实施例中获取页面设计图的流程图；
图5为一个实施例中浏览器展示页面设计稿的底色值的示意图；
图6为一个实施例中页面设计图对应的灰度图；
图7为一个实施例中灰度图对应的投影直方图；
图8为一个实施例中行像素点中灰度值等于第一预设灰度值的像素点的数量的部分分布数据示意图；
图9为一个实施例中页面设计图分割的流程示意图；
图10为一个实施例中浏览器展示页面设计稿的顶部距离的示意图；
图11为一个实施例中六种常见的匹配算法对应的算法公式示意图；
图12为一个实施例中图像匹配的示例图；
图13为一个实施例中各子区域与预设的各组件样例图进行图像匹配流程图；
图14为一个实施例中页面结构数据的示例图；
图15为一个实施例中获取页面结构数据的流程示意图；
图16为一个实施例中获取页面代码的流程示意图；
图17为一个实施例中页面代码生成方法的应用场景；
图18为一个实施例中页面代码生成装置的结构框图；
图19为一个实施例中服务器的内部结构图；
图20为一个实施例中终端的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请实施例提供的方案涉及人工智能的计算机视觉技术等技术，其中，人工智能(Artificial Intelligence, AI)，是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。
人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
计算机视觉技术(Computer Vision, CV)计算机视觉是一门研究如何使机器“看”的科学，更进一步的说，就是指用摄影机和电脑代替人眼对目标进行识别和测量等机器视觉，并进一步做图形处理，使电脑处理成为更适合人眼观察或传送给仪器检测的图像。本申请实施例利用计算机视觉技术自动识别页面设计图中各种元素，并且可以对各种元素进行分类和标记。作为一个科学学科，计算机视觉研究相关的理论和技术，试图建立能够从图像或者多维数据中获取信息的人工智能系统。计算机视觉技术通常包括图像处理、图像识别、图像语义理解、图像检索、OCR、视频处理、视频语义理解、视频内容/行为识别、三维物体重建、3D技术、虚拟现实、增强现实、同步定位与地图构建等技术，还包括常见的人脸识别、指纹识别等生物特征识别技术。
本申请实施例提供的方案涉及以下关键技术：
OpenCV：它是一个跨平台的计算机视觉库，可用于开发实时的图像处理、计算机视觉以及模式识别程序。本申请实施例通过OpenCV技术自动识别页面设计图中各种元素，并且可以对各种元素进行分类和标记。
Figma：它是一个矢量图形编辑器和原型设计工具，主要基于网页进行工作，通过macOS或Windows的桌面应用程序可激活离线编辑功能。本申请实施例利用Figma工具生成页面设计稿以及设计稿链接。
图像直方图：它是一种反映图像色调分布的直方图，其绘制每个色调值的像素数。每个色调值的像素数也称为频率。本申请实施例通过对页面设计图的灰度图进行投影处理，得到投影直方图，利用投影直方图分割页面设计图。
图像模板匹配: 给定的图片中查找和模板最相似的区域，该算法的输入包括模板和测试图片，整个任务的思路就是按照滑窗的思路不断的移动模板图片，计算其与图像中对应区域的匹配度，最终将匹配度最高的区域选择为最终的结果。本申请实施例中，图像模板匹配具体用于对页面设计图分割出的子区域与预设的组件样例图进行图像匹配。
API：它是一个计算接口（应用程序编程接口），限定了多个软件中介之间的相互作用。本申请实施例通过API接口获取页面设计稿对应页面设计图。
URL：它是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。本申请实施例的URL涉及页面设计稿对应的设计稿链接。
DSL：它是在模型之上建立的一种更加灵活的对模型化的理解和使用方式。本申请实施例中的DSL数据指页面结构数据。
Dot product(点积)：它是指接受在实数R上的两个向量并返回一个实数值标量的二元运算。本申请实施例的点积用在图像匹配过程中计算相似度的过程中。
DOM Tree：DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法，其中，访问方法指通过一些函数访问到Dom Tree的数据，例如：获取Dom Tree的文字内容。本申请实施例的DOM Tree用于表示页面代码。
原子类名：它是指一个定义了单一属性或者一组相关属性的类名，它们可以通过组合不同的类名来实现复杂的样式效果。本申请实施例的原子类名用在生成页面代码时，按照原子类名对组件样式进行转换。
本申请实施例提供的页面代码生成方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据，例如页面设计图、组件样例图、页面结构数据模板和页面代码。数据存储系统可以集成在服务器104上，也可以放在云上或其他服务器上。在一个实施例中，终端102可以将获取的页面设计图发送至服务器104，服务器104将接收到的页面设计图分割成多个子区域，将分割出的各子区域与预设的各组件样例图进行图像匹配，获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图，根据组件数据填充页面结构数据模板，得到页面结构数据，根据页面结构数据生成页面代码，页面代码用于生成与页面设计图对应的应用页面。可选地，终端102可以获取用户输入的页面设计稿对应的设计稿链接，根据该设计稿链接获取对应的页面设计图，当然，终端102也可以获取从本地导入的页面设计图。
在其它实施例中，也可以是，终端102将页面设计稿对应的设计稿链接发送至服务器104，服务器104根据接收到的该设计稿链接获取对应的页面设计图，再进行上述类似的处理，以生成页面代码。
在其它实施例中，在终端本地存储了组件样例图、页面结构数据模板的情况下，也可以是，由终端102直接对获取的页面设计图执行该页面代码生成方法，即终端102将获取的页面设计图分割成多个子区域，将分割出的各子区域与预设的各组件样例图进行图像匹配，获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图，根据组件数据填充页面结构数据模板，得到页面结构数据，根据页面结构数据生成页面代码。
其中，终端102可以但不限于是各种台式计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能电视等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
在一个实施例中，如图2所示，提供了一种页面代码生成方法，以该方法应用于图1中的计算机设备（终端102或服务器104）为例进行说明，包括以下步骤：
步骤202，获取页面设计图。
其中，页面设计图是用于生成应用程序的某个应用页面的图像，该某个应用页面可用于人机交互，该应用页面可以是前端的登录页面、数据分析页面和功能分区页面等，该应用程序可以是任意的一个应用程序，例如可以是移动客户端、电脑端客户端、浏览器、网页，还可以是小程序。
在一个实施例中，计算机设备可以获取本地的页面设计图，也可以获取其它设备发送的页面设计图，该页面设计图的格式是图像格式，具有相应的像素数据。
在一个实施例中，页面设计图基于页面设计稿生成，页面设计稿是用于描述设计元素的数据结构的视觉稿数据及其载体，页面设计稿不仅包括各部件，还包括页面设计稿中各部件之间的底层信息以及各元素之间的关联信息。页面设计稿是在页面代码生成之前由页面设计人员事先设计好的，根据实际需要，一个页面设计稿中可以包括多个部件。
具体地，计算机设备可以获取页面设计稿，根据该页面设计稿导出页面设计图。例如，计算机设备可以根据页面设计稿的设计稿链接，获取与该页面设计稿对应的页面设计图。
如图3所示，为一个实施例中生成页面代码的总体流程示意图。参照图3，计算机设备可以执行步骤301，直接获取到页面设计图，并跳转至步骤304，切割页面设计图，得到多个子区域，计算机设备也可以执行步骤302，获取页面设计稿对应的设计稿链接；步骤303，根据设计稿链接，获取页面设计稿对应的页面设计图，并执行步骤304，切割页面设计图，得到多个子区域。
步骤204，将页面设计图分割成多个子区域。
基于页面设计图生成页面代码，需要识别出页面设计图中是否包括一些组件，组件可用于生成应用页面中的UI元素。为了识别出页面设计图中是否包括一些组件，计算机设备需要对页面设计图进行自动分割，得到多个子区域。分割出的每个子区域是页面设计图中一个相对独立的区域，子区域与子区域之间通常没有重叠或连通。
可选地，计算机设备可以横向地将页面设计图分割成多个子区域，可选地，计算机设备也可以竖向地将页面设计图分割成多个子区域。计算机设备可以采用各类方法将页面设计图分割成多个子区域，例如，基于阈值的分割方法、基于边缘检测的分割方法、基于区域的分割方法、基于深度学习的分割方法，等等。
在一个实施例中，计算机设备采用基于深度学习的分割方法来分割页面设计图。具体而言，计算机设备通过大量的页面设计图样本，训练基于深度学习的图像分割模型，通过训练好的图像分割模型自动识别页面设计图中的各种元素，并且对识别出的各种元素进行分类和标记，根据分类标记结果，将页面设计图分割成多个子区域。
在一些实施例中，计算机设备采用基于阈值的分割方法来分割页面设计图。具体而言，计算机设备将页面设计图的背景底色的像素值，作为分割阈值，计算机设备根据该分割阈值将页面设计图进行二值化处理，从而可以帮助更准确地识别页面设计图中的边缘和潜在的分割点，以便于将页面设计图分割成多个子区域。
步骤206，将分割出的各子区域与预设的各组件样例图进行图像匹配。
其中，组件可用于生成应用页面中的UI元素，组件样例图指应用页面中的UI元素对应的组件模板图像。本实施例中，按照各个预设组件的样式，生成对应的组件样例图，并将组件样例图存储至组件库中，开发技术人员可以使用各种优秀的组件库来快速构建所需的应用程序的页面代码，不仅可以减少开发成本，还可以提高应用程序的质量和可靠性。
图像匹配的目的在于判断子区域内是否包含某一个或多个组件。本实施例根据子区域与预设的各组件样例图之间的相似度判断图像匹配是否成功，若子区域与至少一个组件样例图之间的相似度大于或等于相似度阈值，则确定子区域与预设的至少一个组件样例图匹配成功，子区域内包含组件；若子区域与预设的各组件样例图之间的相似度均小于相似度阈值，则确定子区域与预设的各组件样例图匹配不成功，子区域内不包含组件。
参照图3，步骤304执行后，得到多个子区域。在分割出多个子区域后，执行步骤305，对于分割出的每个子区域，将子区域与组件样例图进行图像匹配，具体地，计算机设备计算子区域与预设的各组件样例图之间的相似度，若相似度大于或等于相似度阈值，则确定子区域与至少一个组件样例图匹配成功，执行步骤306，保存匹配成功的子区域；若相似度小于相似度阈值，则确定子区域与预设的各组件样例图匹配不成功，执行步骤307，舍弃匹配不成功的子区域。
步骤208，获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图。
其中，组件标识用于标识一个组件，组件通过相应的组件数据来表示，且组件标识与一个组件样例图对应。当一个子区域与某个组件样例图图像匹配时，计算机设备可以获取该匹配成功的组件样例图对应的组件标识，根据该组件标识获取相应的组件数据，组件数据包括组件名称、组件文案和组件样式等参数，其中组件文案指组件内的文字信息。
步骤210，根据组件数据填充页面结构数据模板，得到页面结构数据。
其中，由于匹配成功的组件样例图对应的组件数据包含太多干扰数据，并没有构成页面代码相对应的页面结构数据，因此，本申请实施例将组件数据填充页面结构数据模板，可以得到页面结构数据，便于生成页面代码。
页面结构数据模板包括构成页面代码相对应的结构数据，其中，结构数据反映页面设计图的页面结构，例如，根节点和子节点之间的树形结构。页面结构数据模板的格式可以是模型化数据，例如DSL数据，其中，DSL数据是 "Domain-Specific Language"（领域特定语言）的缩写，例如，HTML（超文本标记语言）就是一种 DSL数据，专门用于描述网页的结构和内容。
参照图3，步骤306执行后，执行步骤308，计算机设备根据图像匹配成功的组件样例图对应的组件标识，获得对应的组件数据；执行步骤309，将获得的组件数据填充页面结构数据模板中，得到页面结构数据。
步骤212，根据页面结构数据生成页面代码，页面代码用于生成与页面设计图对应的应用页面。
其中，页面代码用于显示与页面设计图对应的应用页面。本实施例可以根据页面设计图的布局自动生成页面代码，减少了开发人员的工作量，提高应用程序开发的效率，缩短开发周期，降低开发成本。
参照图3，步骤309执行后，执行步骤310，根据页面结构数据生成页面代码。
上述页面代码生成方法中，获取页面设计图，将页面设计图分割成多个子区域，将子区域与预设的组件样例图进行图像匹配，获取图像匹配成功的组件样例图的组件标识所对应的组件数据，将组件数据填充至页面结构数据模板，得到页面结构数据，根据页面结构数据生成页面代码。上述方法在获取到页面设计图时可以基于图像匹配将页面设计图自动转换为页面代码，无需人为手动操作，可以自动化、高效地将页面设计图转换为用于生成应用页面的页面代码，提高应用页面的开发效率。
在一个实施例中，计算机设备可以直接获取到页面设计图，并对页面设计图进行分割，但是直接获取到的页面设计图仅包括各元素的轮廓特征，计算机设备无法获取页面设计稿的一些属性参数，例如，页面设计图的底色值、顶部距离、页面尺寸等参数，在后续对页面设计图进行分割时，计算机设备需要利用相关技术获取页面设计图的属性信息，处理过程较繁琐，并且获取的属性参数的准确性低，导致页面设计图分割过程中分割效率和分割精度较低。因此，为解决上述问题，本实施例获取页面设计图包括以下步骤：
获取页面设计稿对应的设计稿链接；从设计稿链接提取页面设计稿对应的访问参数；根据访问参数，生成页面设计稿对应的页面设计图的访问请求；根据访问请求，获取页面设计稿对应的页面设计图。
其中，页面设计稿是用于描述设计元素的数据结构的视觉稿数据及其载体，页面设计稿不仅包括各部件，还包括文页面设计稿中各部件之间的底层信息以及各元素之间的关联信息。页面设计稿是在页面代码生成之前由页面设计人员事先设计好的，根据实际需要，一个页面设计稿中可以包括多个部件。
设计稿链接是页面设计工具生成的，根据设计稿链接可以在浏览器上展示页面设计稿。当用户通过页面设计工具完成页面设计稿时，页面设计工具自动生成页面设计稿对应的设计稿链接，根据该设计稿链接可以在浏览器上展示的页面设计稿以及相关的属性信息，例如，底色值、顶部距离、页面尺寸等参数。其中，页面设计工具指为用户提供设计页面设计稿的平台，例如Figma工具。
设计稿链接包括访问参数，其中，访问参数用于指示页面设计稿的存储位置，例如，访问参数包括设计稿文件关键值和设计稿模块id。通过对设计稿链接进行数据读取处理，可以得到访问参数。
由于设计稿链接是用于在浏览器上展示页面设计稿，无法直接获取页面设计稿对应的页面设计图，因此，为获取页面设计图，本实施例根据访问参数，生成页面设计稿对应的页面设计图的访问请求，其中，访问请求用于通过API接口请求页面设计稿对应的页面设计图。可以按照API接口对应的访问参数，生成访问请求。其中，API接口如下：
其中，设计稿链接包括访问参数file_key与ids，其中，file_key表示设计稿文件的关键值，ids表示设计稿存储地址的标识。
例如，设计稿链接为：
对上述设计稿链接进行正则表达式处理，得到访问参数，即得到file_key以及ids。其中，上述设计稿链接中设计稿文件关键值为file_key：JQ5mkp85ZFDuFaeWBy27lw；上述设计稿链接中设计稿模块id为ids：1-25。将获取到的file_key和ids填充至API接口中，得到的访问请求如下：
如图4所示，为一个实施例中获得页面设计图的流程图，参照图4，具体包括以下步骤：步骤401，计算机设备获取终端发送的页面设计稿对应的设计稿链接；步骤402，对设计稿链接进行正则表达式处理，得到设计稿链接中页面设计稿对应的访问参数；步骤403，计算机设备按照API接口和访问参数，生成访问请求，访问请求用于通过API接口请求页面设计稿对应的页面设计图；步骤404，计算机设备通过访问请求，获取页面设计稿对应的页面设计图对应的图片下载链接；步骤405，计算机设备根据图片下载链接，下载并保存页面设计图。
本实施例中，通过从页面设计稿对应的设计稿链接提取页面设计稿对应的访问参数，根据访问参数，生成页面设计稿对应的页面设计图的访问请求，根据访问请求，获取页面设计稿对应的页面设计图。上述通过页面设计稿对应的设计稿链接，获取页面设计图的方法，可以获取页面设计稿对应的属性参数，为后续页面设计图分割提供多维度、高精度的参考数据，提高分割精度。
在一个实施例中，将页面设计图分割成多个子区域，包括以下步骤：
一、对页面设计图进行灰度化处理，得到页面设计图对应的灰度图。
其中，对页面设计图进行灰度化处理的好处有：可以减少页面设计图处理的复杂度：由于灰度图只有一个通道，相比于彩色图像的三个通道，处理起来更加简单和高效。可以提高页面设计图处理的速度：灰度图相比于彩色图像的三个通道，灰度图需要处理的数据量更少，页面设计图处理的速度更快。可以提高页面设计图处理的准确性：灰度图可以更好地突出页面设计图的纹理和形状特征，提高页面设计图处理的准确性。
具体地，计算机设备采用灰度化处理函数（例如，opencv的提供函数：img =cv.imread(src,0) ）对页面设计图进行灰度化处理，得到页面设计图对应的灰度图。
二、对灰度图进行投影处理，得到页面设计图对应的投影直方图。
其中，对灰度图进行投影处理，指的是将页面设计图的背景底色的像素值，作为分割阈值，计算机设备根据该分割阈值将页面设计图进行二值化处理。
本实施例的投影直方图可以显示页面设计图中每个像素点的亮度和对比度分布情况，便于更好地理解页面设计图的特征和属性，也可以增强页面设计图的对比度和细节，使页面设计图更加清晰和易于分析，基于投影直方图对页面设计图进行分割，可以提高页面设计图分割的精度和效率。
在一些实施例中，对灰度图进行投影处理，得到页面设计图对应的投影直方图，包括：确定灰度图中灰度值等于预设值的像素点，将确定的像素点对应的灰度值设置为第一预设灰度值；确定灰度图中灰度值不等于预设值的像素点，将确定的像素点对应的灰度值设置为第二预设灰度值，得到页面设计图的投影直方图；其中，第一预设灰度值与第二预设灰度值不同。
其中，预设值指页面设计图的背景底色的像素值，即底色值，底色值可以根据实际需求进行设置。由于不同的页面设计图的底色值可能不相同，因此，在对灰度图进行投影处理之前，需要获取页面设计图对应的预设值。可选地，计算机设备可以识别页面设计图中背景区域中像素点的像素值。进一步可选地，计算机设备根据页面设计稿对应的设计稿链接在浏览器上展示页面设计稿时，一并展示页面设计稿的属性信息，例如，底色值、顶部距离、页面尺寸等。例如，图5为浏览器展示页面设计稿的底色值的示意图，通过参照图5中展示的属性信息可知图5中页面设计稿的底色值为242。
第一预设灰度值和第二预设灰度值为色值差别较大的不同灰度值。例如，图6为页面设计图对应的灰度图，图7为图6所示的灰度图对应的投影直方图，其中，对图6所示的灰度图进行投影处理，并设置第一预设灰度值为255，第二预设灰度值为0，预设值为242，将灰度图中灰度值等于242的像素点的灰度值设置为255，将灰度图中灰度值不等于242的像素点的灰度值设置为0，最终得到的投影直方图如图7所示。
具体地，计算机设备遍历灰度图中各像素点的灰度值，确定灰度图中灰度值等于预设值的像素点，并将该像素点的灰度值设置为第一预设灰度值；计算机设备确定灰度图中灰度值不等于预设值的像素点，并将该像素点对应的灰度值设置为第二预设灰度值，得到页面设计图的投影直方图。
三、基于投影直方图，确定页面设计图上的分割位置。
其中，分割位置，指页面设计图中两个相对独立的区域之间的分割位置，例如，将两个没有重叠或连通的区域之间的背景区域作为分割位置。
在一些实施例中，基于投影直方图，确定页面设计图上的分割位置，包括：
遍历投影直方图的每一行像素点；统计投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，若数量为页面设计图的一行像素数，则将相应的行作为候选分割行；基于候选分割行，确定页面设计图上的分割位置。
其中，某一行像素点中灰度值等于第一预设灰度值的像素点的数量为页面设计图的一行像素数，表征该行中每个像素点的像素值都是背景底色的像素值，也就确定该行是一条背景底色行，该行可能处于页面设计图中两个相对独立的子区域之间，将该行作为候选分割行。
根据投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，生成矩阵数据，其中，矩阵数据中第i 个数值表示第i行像素点中灰度值等于第一预设灰度值的像素点的数量。例如，统计图7所示的投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，并根据每行对应的数量生成矩阵数据，其中，由于投影直方图中行数过多导致数据量过大，本实施例只提供矩阵数据中部分数据，其中，图8为图7中行像素点中灰度值等于第一预设灰度值的像素点的数量的部分分布数据示意图，根据浏览器上展示的页面设计稿以及页面设计稿的属性信息，确定图7所示的页面设计图的一行像素数为750，第一个数字0表示第1行像素点中灰度值等于第一预设灰度值的像素点的数量为0，第100-105个数字750表示第100行至第105行中每行像素点中灰度值等于第一预设灰度值的像素点的数量为750，则将第100行至第105行中每行确定为候选分割行。
在一个实施例中，基于候选分割行，确定页面设计图上的分割位置，包括：
若投影直方图中存在连续的多个候选分割行，则将连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
其中，候选分割行，用于指示可以按照候选分割行对页面设计图进行分割。分割位置包括多组分割起始位置和分割终止位置。
具体地，计算机设备在进行分割时，将连续的多个候选分割行中的最后一个候选分割行作为分割起始位置，在下一个连续的多个候选分割行中的第一个候选分割行作为分割终止位置，将该下一个连续的多个候选分割行中的最后一个候选分割行作为下一个分割起始位置，将再下一个连续的多个候选分割行中的第一个候选分割行作为下一个分割终止位置，按照这种分割方法可以从页面设计图中分割出多个相对独立的子区域。
例如，图7中部分行像素点中灰度值等于第一预设灰度值的像素点的数量的分布数据为：[750,750,750,12,15,15,12,750,750]，遍历该数组，将排序第三的750所对应的行标记为分割起始位置，将排序第八的750所对应的行标记为分割终止位置，分割得到的子区域包括排序第四至第七的数字所对应的行。
在一些实施例中，分割起始位置和分割终止位置也可以根据其他方式设置，例如，将连续的多个候选分割行中的第一个候选分割行设置为分割起始位置，将该多个候选分割行中最后一个候选分割行设置为分割终止位置，按照这种分割方法可以从页面设计图中分割出两个相对独立的区域之间的背景区域，页面设计图中除背景区域以外的区域为子区域。
例如，图7中部分行像素点中灰度值等于第一预设灰度值的像素点的数量的分布数据为：[750,750,750,12,15,15,12,750,750]，遍历该数组，将排序第一的750所对应的行标记为分割起始位置，将排序第三的750所对应的行标记为分割终止位置，从页面设计图中分割出的区域为排序第一的750所对应的行与排序第三的750所对应的行之间的区域；之后，将排序第八的750所对应的行标记为分割起始位置，将排序第九的750所对应的行标记为分割终止位置，从页面设计图中分割出的区域为排序第八的750所对应的行与排序第九的750所对应的行之间的区域，最终得到排序第四至第七的数字所对应的行，并作为子区域。
在一些实施例中，分割起始位置和分割终止位置也可以根据其他方式设置，例如，将连续的多个候选分割行中的第i个候选分割行设置为分割起始位置，将下一个连续的多个候选分割行中的第j个候选分割行设置为分割终止位置。
例如，图7中部分行像素点中灰度值等于第一预设灰度值的像素点的数量的分布数据为：[750,750,750,12,15,15,12,750,750]，遍历该数组，将排序第二的750所对应的行标记为分割起始位置，将排序第九的750所对应的行标记为分割终止位置，最终分割得到的子区域包括排序第三至第八的数字所对应的行。
四、基于分割位置，将页面设计图分割成多个子区域。
具体地，图9为页面设计图分割的流程示意图，参照图9可知，页面设计图分割具体包括以下步骤：步骤901，计算机设备根据灰度化处理函数读取页面设计图对应的灰度图；步骤902，对灰度图进行投影处理，得到页面设计图对应的投影直方图；步骤903，计算机设备统计投影直方图中投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，得到矩阵数据；步骤904，计算机设备查找矩阵数据中数值等于页面设计图的一行像素数的数值，并将该数值对应的行确定为候选分割行；步骤905，计算机设备基于候选分割行，确定页面设计图上的分割起始位置和分割终止位置；步骤906，计算机设备根据分割起始位置和分割终止位置对页面设计图进行分割，得到多个子区域。
本实施例中，对页面设计图进行灰度化处理，得到页面设计图对应的灰度图，对灰度图进行投影处理，得到页面设计图对应的投影直方图，并基于投影直方图，确定页面设计图上的分割位置，基于分割位置，将页面设计图分割成多个子区域。上述投影直方图可以显示页面设计图中每个像素点的亮度和对比度分布情况，便于更好地理解页面设计图的特征和属性，也可以增强页面设计图的对比度和细节，使页面设计图更加清晰和易于分析，基于投影直方图对页面设计图进行分割，可以提高页面设计图分割的精度和效率。
在一个实施例中，根据页面设计稿的设计特点可知，页面设计稿布局一般分为顶部区域、内容区域和底部区域，其中顶部区域一般设置在页面设计稿的顶部，用于设置页面的标题、页面标识信息和顶部导航栏等；内容区域一般设置在页面社交的中部，用于设置页面的各部件信息；底部区域一般设置在页面设计稿的底部，用于设置联系方式等信息。在进行页面设计图分割时，为提高分割效率以及图像匹配效率，本实施例中页面代码生成方法还包括：
以页面设计图的顶部为起点、沿着页面设计图的高度方向向下延伸预设距离到达组件区域分割位置；根据组件区域分割位置从页面设计图中裁出顶部区域，得到组件区域。
其中，页面设计图的顶部指的是页面设计图中第一行像素点。例如，以第一行像素点中任一像素点为起点，沿着页面设计图的高度方向向下延伸预设距离到达组件区域分割位置。
预设距离指页面设计稿中顶部区域沿页面设计图的高度方向的顶部距离。本实施例中计算机设备根据页面设计稿对应的设计稿链接在浏览器上展示的页面设计稿以及页面设计稿的属性信息，确定顶部距离。图10为浏览器展示页面设计稿的顶部距离的示意图，通过参照图10中展示的属性信息可知图10中页面设计稿的顶部距离为295mm。
组件区域分割位置，指页面设计图中顶部距离所到达的一行像素点。例如，图10中页面设计图的顶部距离为295mm，则以页面设计图的第一行像素点中任一像素点为起点，沿着页面设计图的高度方向向下延伸295mm后到达的一行像素点为组件区域分割位置。
顶部区域，指页面设计图的顶部至组件区域分割位置之间的区域，顶部区域包含了无意义的节点，例如，顶部导航栏。组件区域指页面设计图中除顶部区域以外的区域。
具体地，计算机设备以页面设计图的第一行像素点中任一像素点为起点，沿着页面设计图的高度方向向下延伸预设距离到达组件区域分割位置，按照组件区域分割位置所对应的行像素，从页面设计图中分割出顶部区域，获取页面设计图中除顶部区域以外的组件区域。
在一些实施例中，将页面设计图分割成多个子区域，包括：将组件区域分割成多个子区域。
可选地，计算机设备可以横向地将组件区域分割成多个子区域，可选地，计算机设备也可以竖向地将组件区域分割成多个子区域。计算机设备可以采用各类方法将组件区域分割成多个子区域，例如，基于阈值的分割方法、基于边缘检测的分割方法、基于区域的分割方法、基于深度学习的分割方法，等等。
在一个实施例中，计算机设备采用基于深度学习的分割方法来分割组件区域。具体而言，计算机设备通过大量的页面设计图样本，训练基于深度学习的图像分割模型，通过训练好的图像分割模型自动识别页面设计图中组件区域的各种元素，并且对识别出的各种元素进行分类和标记，根据分类标记结果，将组件区域分割成多个子区域。
在一些实施例中，计算机设备采用基于阈值的分割方法来分割组件区域。具体而言，计算机设备将页面设计图的背景底色的像素值，作为分割阈值，计算机设备根据该分割阈值将组件区域进行二值化处理，从而可以帮助更准确地识别组件区域中的边缘和潜在的分割点，以便于将组件区域分割成多个子区域。
在一些实施例中，将组件区域分割成多个子区域包括：
对组件区域进行灰度化处理，得到组件区域对应的灰度图；对灰度图进行投影处理，得到组件区域对应的投影直方图；基于投影直方图，确定组件区域上的分割位置；基于分割位置，将组件区域分割成多个子区域。
在一些实施例中，对灰度图进行投影处理，得到组件区域对应的投影直方图，包括：
确定灰度图中灰度值等于预设值的像素点，将像素点对应的灰度值设置为第一预设灰度值；确定灰度图中灰度值不等于预设值的像素点，将像素点对应的灰度值设置为第二预设灰度值，得到组件区域对应的的投影直方图；其中，第一预设灰度值与第二预设灰度值不同。
在一些实施例中，基于投影直方图，确定组件区域上的分割位置，包括：
遍历投影直方图的每一行像素点；统计投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，若数量为页面设计图的一行像素数，则将行作为候选分割行；基于候选分割行，确定组件区域上的分割位置。
在一些实施例中，基于候选分割行，确定组件区域上的分割位置，包括;
若投影直方图中存在连续的多个候选分割行，则将连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
本实施例中，在分割页面设计图时，通过以页面设计图的顶部为起点、沿着页面设计图的高度方向向下延伸预设距离，确定组件区域分割位置，根据组件区域分割位置从页面设计图中分割出顶部区域，并将组件区域分割成多个子区域，上述方法舍弃顶部区域，可以舍弃部分没有意义的节点，舍弃的顶部区域无需再进行分割以及图像匹配，降低了工作量，进而提高了分割效率以及图像匹配效率。
在一个实施例中，将分割出的各子区域与预设的各组件样例图进行图像匹配，包括以下步骤：
获取预设的各组件样例图；对于分割出的每个子区域，计算子区域与预设的各组件样例图之间的相似度；根据相似度确定子区域与组件样例图之间的图像匹配结果。
其中，各组件样例图预先存储在组件库中，计算机设备从组件库中依次读取组件样例图。
本实施例在子区域上，采用从左到右、从上向下计算组件样例图与子区域之间的匹配度（即相似度），匹配程度越大，两者相同的可能性越大，对应使用的代码如下：
result=cv2.matchTemplate(draw_img, temp_img, cv2.TM_CCORR_NORMED)
其中，draw_img为分割得到的子区域；temp_img为组件样例图；cv2.TM_CCORR_NORMED为OpenCV中cv2.macthTemplate函数中常见的匹配算法。
本实施例提供OpenCV中cv2.macthTemplate函数中六种常见的匹配算法，具体如下：
cv2.TM_SQDIFF: 计算组件样例图与子区域之间的方差，由于方差是像素值差值的平方的和，所以方差越小匹配度越高。
cv2. TM_SQDIFF_NORMED: 范化的cv2.TM_SQDIFF，取值为0-1之间，完美匹配返回值为0；匹配度计算结果越接近0，匹配度越高。
cv2.TM_CCORR: 使用Dot product计算匹配度，匹配度计算结果越高匹配度越高。
cv2.TM_CCORR_NORMED: 范化的cv2.TM_CCORR，0-1之间，匹配度计算结果越接近1，匹配度越高。
cv2. TM_CCOEFF: 采用组件样例图与子区域中像素与各自对应的平均值计算点积，正值越大匹配度越高，负值越大图像的区别越大，但如果图像没有明显的特征（即图像中的像素值与平均值接近）则返回值越接近0。
cv2.TM_CCOEFF_NORMED: 范化的cv2.TM_CCOEFF，-1 ~ 1之间; 匹配度计算结果越接近1，匹配度越高。
图11为上述六种常见的匹配算法对应的算法公式示意图，其中，I(x，y)为子区域的图像矩阵，T(x’,y’)为组件样例图的图像矩阵，匹配结果矩阵为 R(x,y)。
图像匹配结果包括匹配成功和匹配不成功，其中，若子区域与至少一个组件样例图之间的相似度大于或等于相似度阈值，则确定子区域与组件样例图匹配成功，并获取图像匹配成功的组件样例图中与子区域的相似度最高的组件样例图对应的组件数据；若区域与各组件样例图之间的相似度小于相似度阈值，则确定子区域与组件样例图匹配不成功。
例如，图12为图像匹配的示例图，图12中的子区域与组件样例图之间的相似度为0.868，相似度阈值设置为0.75，由于计算得到的相似度大于相似度阈值，则确定子区域与该组件样例图匹配成功。
具体地，图13为各子区域与预设的各组件样例图进行图像匹配流程图，参照图13可知，图像匹配包括以下步骤：步骤1301，计算机设备从组件库中获取各组件样例图；步骤1302，对于分割出的每个子区域，计算机设备遍历各组件样例图，并逐个将各组件样例图与子区域进行图像匹配，采用匹配算法计算各组件样例图与子区域之间的相似度，若子区域与至少一个组件样例图之间的相似度大于或等于相似度阈值，则确定子区域与组件样例图匹配成功，并执行步骤步骤1303，确定图像匹配成功的组件样例图中与子区域的相似度最高的组件样例图，保存相似度最高的组件样例图对应的组件数据；若区域与各组件样例图之间的相似度小于相似度阈值，则确定子区域与组件样例图匹配不成功，并执行步骤1304，舍弃子区域。
本实施例中，计算子区域与预设的各组件样例图之间的相似度；根据相似度确定子区域与组件样例图之间的图像匹配结果。通过上述方法可以确定与子区域相似度最高的组件样例图，将相似度最高的组件样例图对应的组件数据，填充页面结构数据模板，可以得到更精确的页面结构数据，提高页面代码的转换精度。
在一个实施例中，根据组件数据填充页面结构数据模板，得到页面结构数据，包括：
对于匹配成功的组件样例图对应的组件数据，从组件数据中提取组件名称、组件文案和组件样式，将组件名称、组件文案和组件样式填充至一个页面子节点数据模板，得到页面子节点数据；根据页面根节点数据和每个页面子节点数据，得到页面结构数据。
其中，页面结构数据模板包括页面根节点数据和页面子节点数据模板。页面根节点数据指页面的 Document 对象，Document 对象使用户可以从脚本中对HTML页面中的所有元素进行访问，页面上所有内容都可以在 Document 对象上呈现。
例如，图14为页面结构数据的示例图，参照图14可知，页面根节点数据的样例为：
"compontentName":"div",
"isCompontent": false,
"content":"",
"children"：[]
"style": Object{...}
其中，compontentName表示组件名称；div表示容器，本实施例用div表示父节点，例如，图14中从上往下第一个div表示根节点，第二个div表示在该节点为组件名称为1b(7)的节点的父节点；isCompontent表示组件标识信息，用于表征是否为组件，false表示不是组件，true表示是组件；content表示组件文案，即组件内包含的文字信息；children表示子节点数组；style表示组件样式。
页面子节点数据模板，指页面根节点数据中子节点数组的内容。其中，页面子节点数据模板包括组件名称、组件文案和组件样式等字段，该字段的内容为空白，组件数据包括组件名称、组件文案和组件样式。计算机设备在获取匹配成功的组件样例图对应的组件数据后，将组件数据填充页面子节点数据模板中相对应位置，得到子区域对应的页面子节点数据。
例如，匹配成功的组件样例图对应的组件数据中组件名称为环形图；组件文案按需设置，例如；双轴图，组件样式为："fontWeight":400,"fontSize": 24.lineHeightPx":34，表示组件显示元素的文本中所用的字体的粗细采用正常标准，采用1.5倍行高的字体型号。如图14所示，将上述组件数据填充至一个页面子节点数据模板后，得到的子区域对应的页面子节点数据如下所示：
"compontentName": "ring（8）"
isCompontent": true,
content":" ",
"children":Array[0],
"style": Object{...}
其中，ring表示环形图；Array表示数组，Array[0]表示数组内的元素为0，即该节点下无子节点；style表示组件样式；Object表示组件样式的内容。
具体地，图15为获取页面结构数据的流程示意图，参照图15可知，获取页面结构数据包括以下步骤：步骤1501，对于每个子区域，计算机设备获取与子区域匹配成功的组件样例图对应的组件数据；步骤1502，从组件数据中提取组件名称、组件文案和组件样式；步骤1503，将组件名称、组件文案和组件样式填充至一个页面子节点数据模板，得到该子区域对应的页面子节点数据；步骤1504，根据页面根节点数据和每个页面子节点数据，得到页面结构数据。
本实施例中，页面结构数据模板包括页面根节点数据和页面子节点数据模板，将匹配成功的组件样例图对应的组件数据填充至一个页面子节点数据模板，得到子区域对应的页面子节点数据，根据页面根节点数据和每个页面子节点数据，得到页面结构数据。上述方法通过页面根节点数据和页面子节点数据模板可以避免匹配成功的组件样例图对应的组件数据包含太多干扰属性，导致页面代码生成效率以及准确性较低的问题。
在一些实施例中，根据页面结构数据生成页面代码，包括以下步骤：
根据页面结构数据中的页面根节点数据，生成根节点；根据页面结构数据中的每个页面子节点数据，生成每个子节点；将根节点和各子节点进行关联，得到页面代码。
其中，根节点指标签为VIEW的根节点文档对象模型（rootDOM），rootDOM是一种处理HTML和XML文件的标准API，rootDOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。
子节点是构成应用页面最基本的组成部分，包括元素节点，文本节点等。本实施例中，通过rootDOM.append(dom)函数关联根节点与子节点。
具体地，图16为获取页面代码的流程示意图，获取页面代码具体包括以下步骤：步骤1601，计算机设备遍历页面结构数据中的数组；步骤1602，将"compontentName"为div的数组作为一个根节点，生成一个标签为VIEW的rootDOM；步骤1603，遍历children数组，如果children数组中有数据，则将children数组下的数据作为子节点；步骤1604，通过rootDOM.append(dom)函数关联根节点与子节点，得到页面代码。
例如，图14的根节点数据中children数组包括组件名称为ring (8)、div和table（5）_3的三个子节点，其中，组件名称为div的子节点还是组件名称为1b （7）的节点的父节点，通过rootDOM.append(dom)函数关联根节点与子节点，得到树形结构数据，对树形结构数据进行渲染，最终得到的页面代码为：
<view>
<part></part>
<part></part>
</view>。
其中，view表示根节点的标签；part表示渲染后的组件。
在一些实施例中，在生成页面代码时，对于页面结构数据中组件样式，按照原子类名的样式类名写法对组件样式进行匹配。原子类名指一个只定义了单一属性或者一组相关属性的类名，可以通过组合不同的类名来实现复杂的样式效果。原子类名的设计模式可以帮助开发者更快地开发出具有一致性和可扩展性的前端应用程序。具有以下优势：
1、可复用性：原子类名的设计思想是将样式定义为最小单元，使其能够在不同的场景中被复用，减少代码重复，提高开发效率。例如，一个单独的 "bg-red" 类可以用于任何需要红色背景色的元素上。
2、易于维护：原子类名的设计风格使得代码更易于维护和修改。如果需要改变某个样式属性，只需要修改对应的类名即可，而不需要搜索整个样式表来查找要修改的样式。这种模块化的方式也使得团队协作更容易，不同的开发者可以独立工作在不同的组件上，不必担心样式冲突。
例如，应用程序有很多个应用页面，不同应用页面开发者不同，实现方式不同，实现同一个页面背景颜色，可能会放在不同类名中，后续如果统一去修改背景颜色时，还得去针对每个应用页面进行修改验证。如果使用原子类名，规定一个类名就是背景颜色，后续统一修改的时候，修改这个类名就可以了。
3、更少的 CSS 代码：由于原子类名是高度可复用的，开发者可以创建一组小型的、通用的样式规则，然后在 HTML 中应用它们。这种方式使得 CSS 文件更加简洁、易于管理，也减少了网络传输的负担，因为样式表的大小更小。
例如，实现一个字体颜色为黑色、加粗、字体36px、背景颜色为白色的容器A，现在又要加一个字体颜色为蓝色、加粗、字体36px、背景颜色为白色的容器B，这个时候得复制容器A的样式代码，它们的区别知识字体颜色，此时代码8行，如果使用原子类名组合的方式，可以5行完成。
4、更高的可预测性：由于每个原子类名只定义了一个属性，这使得样式更具可预测性。开发者可以更容易地掌握每个元素的样式表现，而无需考虑其他影响该元素的样式。
例如，图14中组件样式为："fontWeight":400,"fontSize": 24.lineHeightPx":34，按照原子类型的样式类名写法对组件样式进行匹配的过程如下：
fontWeight": 400=>font-w-400
fontsize": 24 =>font-24
"lineHeightPx": 34 =>line-height-34
组件样式匹配后，得到组件样式对应的页面代码为：
<view class="font-w-400 font-24 line-height-34"></view>
需要说明的是：对于页面结构数据中“isconpontent”为false时，输出的页面代码才会呈现组件样式style和组件文案content等。对于页面结构数据中“isconpontent”为true时，输出的页面代码为<part>。
在一个实施例中，获取页面代码后，页面代码生成方法还包括：
根据页面代码生成与页面设计图对应的应用页面；展示应用页面。
具体地，计算机设备对页面代码进行渲染处理，生成与页面设计图对应的应用页面，并在显示装置上显示应用页面。
在一个实施例中，本实施例提供一种页面代码生成方法在产品侧的应用场景，图17为页面代码生成方法的应用场景，参照图17可知，在生成页面代码时，计算机设备获取页面设计稿对应的设计稿链接，计算机设备根据设计稿链接在浏览器中展示页面设计稿以及页面设计稿的属性信息，计算机设备通过读取页面设计稿的属性信息，得到页面设计稿的顶部距离和底色值；触发图17中的“提交”控件后，计算机设备开始获取页面设计稿对应的页面设计图，并对页面设计图进行处理，并输出页面代码。
本实施例中，通过遍历页面结构数据，并根据页面结构数据中组件名称、组件标识信息确定根节点，根据页面结构数据中children数组中是否有数据，确定根节点下的子节点，根据根节点和子节点确定树形结构数据，从而得到应用页面的页面代码。上述方法通过提取页面结构数据中组件名称、组件表示信息和children数组，可以快速、高效地获取到应用页面的树形结构数据，进而生成精简的页面代码，并保证生成的应用代码与页面设计图的布局一致。
在一个实施例中，本实施例提供一种页面代码生成方法的详细步骤，具体包括以下步骤：
一、获取页面设计稿对应的设计稿链接。
二、从设计稿链接提取页面设计稿对应的访问参数。
三、根据访问参数，生成页面设计稿对应的页面设计图的访问请求。
四、根据访问请求，获取页面设计稿对应的页面设计图。
五、以页面设计图的顶部为起点、沿着页面设计图的高度方向向下延伸预设距离到达组件区域分割位置。
六、根据组件区域分割位置从页面设计图中裁出顶部区域，得到组件区域。
七、对组件区域进行灰度化处理，得到组件区域对应的灰度图。
八、确定灰度图中灰度值等于预设值的像素点，将确定的像素点对应的灰度值设置为第一预设灰度值。
九、确定灰度图中灰度值不等于预设值的像素点，将确定的像素点对应的灰度值设置为第二预设灰度值，得到组件区域的投影直方图；其中，第一预设灰度值与第二预设灰度值不同。
十、遍历投影直方图的每一行像素点。
十一、统计投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，若数量为页面设计图的一行像素数，则将相应的行作为候选分割行。
十二、若投影直方图中存在连续的多个候选分割行，则将连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
十三、基于分割位置，将组件区域分割成多个子区域。
十四、获取预设的各组件样例图。
十五、对于分割出的每个子区域，计算子区域与预设的各组件样例图之间的相似度。
十六、根据相似度确定子区域与组件样例图之间的图像匹配结果。
十七、获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图。
十八、页面结构数据模板包括页面根节点数据和页面子节点数据模板；组件数据包括组件名称、组件文案和组件样式，对于匹配成功的组件样例图对应的组件数据，从组件数据中提取组件名称、组件文案和组件样式，将组件名称、组件文案和组件样式填充至一个页面子节点数据模板，得到页面子节点数据。
十九、根据页面根节点数据和每个页面子节点数据，得到页面结构数据。
二十、根据页面结构数据中的页面根节点数据，生成根节点。
二十一、根据页面结构数据中的每个页面子节点数据，生成每个子节点。
二十二、将根节点和各子节点进行关联，得到页面代码，页面代码用于生成与页面设计图对应的应用页面。
二十三、根据页面代码生成与页面设计图对应的应用页面；展示应用页面。
本实施例中，可以根据页面设计图的布局自动生成页面代码，减少了开发人员的工作量，提高应用程序开发的效率，缩短开发周期，降低开发成本；本实施例实现了页面设计稿的自动识别以及生成页面代码的功能，大大提高了应用程序前端的开发效率；通过页面设计稿对应的设计稿链接，获取页面设计图的方法，可以获取页面设计稿对应的属性参数，为后续页面设计图分割提供多维度参考数据，提高分割精度；基于投影直方图对页面设计图进行分割，可以提高页面设计图分割的精度和效率；通过页面根节点数据和页面子节点数据模板可以避免匹配成功的组件样例图对应的组件数据包含太多干扰数据，导致页面代码生成效率以及准确性较低的问题；通过提取页面结构数据中组件名称、组件表示信息和children数组，可以快速、高效地获取到应用页面的树形结构数据，进而生成精简的页面代码，并保证生成的应用代码与页面设计图的布局一致。
应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的页面代码生成方法的页面代码生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个页面代码生成装置实施例中的具体限定可以参见上文中对于页面代码生成方法的限定，在此不再赘述。
在一个实施例中，如图18所示，提供了一种页面代码生成装置，包括：
获取模块1801，用于获取页面设计图。
分割模块1802，用于将页面设计图分割成多个子区域。
图像匹配模块1803，用于将分割出的各子区域与预设的各组件样例图进行图像匹配。
组件数据获取模块1804，用于获取图像匹配成功的组件样例图的组件标识所对应的组件数据，组件数据用于描述组件样例图。
结构生成模块1805，用于根据组件数据填充页面结构数据模板，得到页面结构数据。
代码生成模块1806，用于根据页面结构数据生成页面代码，页面代码用于生成与页面设计图对应的应用页面。
在其中一个实施例中，获取模块1801，还用于获取页面设计稿对应的设计稿链接；从设计稿链接提取页面设计稿对应的访问参数；根据访问参数，生成页面设计稿对应的页面设计图的访问请求；根据访问请求，获取页面设计稿对应的页面设计图。
在其中一个实施例中，分割模块1802，还用于对页面设计图进行灰度化处理，得到页面设计图对应的灰度图；对灰度图进行投影处理，得到页面设计图对应的投影直方图；基于投影直方图，确定页面设计图上的分割位置；基于分割位置，将页面设计图分割成多个子区域。
在其中一个实施例中，分割模块1802，还用于确定灰度图中灰度值等于预设值的像素点，将确定的像素点对应的灰度值设置为第一预设灰度值；确定灰度图中灰度值不等于预设值的像素点，将确定的像素点对应的灰度值设置为第二预设灰度值，得到页面设计图的投影直方图；其中，第一预设灰度值与第二预设灰度值不同。
在其中一个实施例中，分割模块1802，还用于遍历投影直方图的每一行像素点；统计投影直方图中每一行像素点中灰度值等于第一预设灰度值的像素点的数量，若数量为页面设计图的一行像素数，则将相应的行作为候选分割行；基于候选分割行，确定页面设计图上的分割位置。
在其中一个实施例中，分割模块1802，还用于若投影直方图中存在连续的多个候选分割行，则将连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
在其中一个实施例中，分割模块1802，还用于以页面设计图的顶部为起点、沿着页面设计图的高度方向向下延伸预设距离到达组件区域分割位置；根据组件区域分割位置从页面设计图中裁出顶部区域，得到组件区域；将组件区域分割成多个子区域。
在其中一个实施例中，图像匹配模块1803，还用于获取预设的各组件样例图；对于分割出的每个子区域，计算子区域与预设的各组件样例图之间的相似度；根据相似度确定子区域与组件样例图之间的图像匹配结果。
在其中一个实施例中，页面结构数据模板包括页面根节点数据和页面子节点数据模板；组件数据包括组件名称、组件文案和组件样式，结构生成模块1805，还用于对于匹配成功的组件样例图对应的组件数据，从组件数据中提取组件名称、组件文案和组件样式，将组件名称、组件文案和组件样式填充至一个页面子节点数据模板，得到页面子节点数据；根据页面根节点数据和每个页面子节点数据，得到页面结构数据。
在其中一个实施例中，代码生成模块1806，还用于根据页面结构数据中的页面根节点数据，生成根节点；根据页面结构数据中的每个页面子节点数据，生成每个子节点；将根节点和各子节点进行关联，得到页面代码。
在其中一个实施例中，代码生成模块1806，还用于根据页面代码生成与页面设计图对应的应用页面；展示应用页面。
上述页面代码生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图19所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output，简称I/O）和通信接口。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储组件样例图、页面结构数据和页面代码。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面代码生成方法。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图20所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC（近场通信）或其他技术实现。该计算机程序被处理器执行时以实现一种页面代码生成方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置，显示屏可以是液晶显示屏或电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图19和图20中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例的步骤。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各方法实施例的步骤。
在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例的步骤。
需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-OnlyMemory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（ReRAM）、磁变存储器（Magnetoresistive Random Access Memory，MRAM）、铁电存储器（Ferroelectric RandomAccess Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（Dynamic RandomAccessMemory，DRAM）等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (22)

1.一种页面代码生成方法，其特征在于，所述方法包括：
获取页面设计图；
将所述页面设计图分割成多个子区域；
将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；所述组件标识用于标识一个组件，且一个所述组件标识与一个组件样例图对应；所述组件数据包括组件名称、组件文案和组件样式；
对于匹配成功的组件样例图对应的组件数据，从所述组件数据中提取组件名称、组件文案和组件样式，将所述组件名称、组件文案和组件样式填充至页面结构数据模板的一个页面子节点数据模板，得到页面子节点数据；所述页面结构数据模板包括构成页面代码相对应的结构数据，其中，结构数据反映页面设计图的页面结构；
根据所述页面结构数据模板的页面根节点数据和每个页面子节点数据，得到页面结构数据；
根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
2.根据权利要求1所述的方法，其特征在于，所述获取页面设计图，包括：
获取页面设计稿对应的设计稿链接；
从所述设计稿链接提取所述页面设计稿对应的访问参数；
根据所述访问参数，生成所述页面设计稿对应的页面设计图的访问请求；
根据所述访问请求，获取所述页面设计稿对应的页面设计图。
3.根据权利要求1所述的方法，其特征在于，所述将所述页面设计图分割成多个子区域，包括：
对所述页面设计图进行灰度化处理，得到所述页面设计图对应的灰度图；
对所述灰度图进行投影处理，得到所述页面设计图对应的投影直方图；
基于所述投影直方图，确定所述页面设计图上的分割位置；
基于所述分割位置，将所述页面设计图分割成多个子区域。
4.根据权利要求3所述的方法，其特征在于，所述对所述灰度图进行投影处理，得到所述页面设计图对应的投影直方图，包括：
确定所述灰度图中灰度值等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第一预设灰度值；
确定所述灰度图中灰度值不等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第二预设灰度值，得到所述页面设计图的投影直方图；
其中，所述第一预设灰度值与所述第二预设灰度值不同。
5.根据权利要求4所述的方法，其特征在于，所述基于所述投影直方图，确定所述页面设计图上的分割位置，包括：
遍历所述投影直方图的每一行像素点；
统计所述投影直方图中每一行像素点中灰度值等于所述第一预设灰度值的像素点的数量，若所述数量为所述页面设计图的一行像素数，则将相应的行作为候选分割行；
基于所述候选分割行，确定所述页面设计图上的分割位置。
6.根据权利要求5所述的方法，其特征在于，所述基于所述候选分割行，确定所述页面设计图上的分割位置，包括：
若所述投影直方图中存在连续的多个候选分割行，则将所述连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
7.根据权利要求1所述的方法，其特征在于，所述将所述页面设计图分割成多个子区域之前，所述方法还包括：
以所述页面设计图的顶部为起点、沿着所述页面设计图的高度方向向下延伸预设距离到达组件区域分割位置；
根据所述组件区域分割位置从所述页面设计图中裁出顶部区域，得到组件区域；
所述将所述页面设计图分割成多个子区域，包括：
将所述组件区域分割成多个子区域。
8.根据权利要求1所述的方法，其特征在于，所述将分割出的各所述子区域与预设的各组件样例图进行图像匹配，包括：
获取预设的各组件样例图；
对于分割出的每个所述子区域，计算所述子区域与预设的各组件样例图之间的相似度；
根据所述相似度确定所述子区域与所述组件样例图之间的图像匹配结果。
9.根据权利要求1所述的方法，其特征在于，所述根据所述页面结构数据生成页面代码，包括：
根据所述页面结构数据中的所述页面根节点数据，生成根节点；
根据所述页面结构数据中的每个所述页面子节点数据，生成每个子节点；
将所述根节点和各所述子节点进行关联，得到页面代码。
10.根据权利要求1至9任一项所述的方法，其特征在于，所述方法还包括：
根据所述页面代码生成与所述页面设计图对应的应用页面；
展示所述应用页面。
11.一种页面代码生成装置，其特征在于，所述装置包括：
获取模块，用于获取页面设计图；
分割模块，用于将所述页面设计图分割成多个子区域；
图像匹配模块，用于将分割出的各所述子区域与预设的各组件样例图进行图像匹配；
组件数据获取模块，用于获取图像匹配成功的组件样例图的组件标识所对应的组件数据，所述组件数据用于描述所述组件样例图；所述组件标识用于标识一个组件，且一个所述组件标识与一个组件样例图对应；所述组件数据包括组件名称、组件文案和组件样式；
结构生成模块，用于对于匹配成功的组件样例图对应的组件数据，从所述组件数据中提取组件名称、组件文案和组件样式，将所述组件名称、组件文案和组件样式填充至页面结构数据模板的一个页面子节点数据模板，得到页面子节点数据；所述页面结构数据模板包括构成页面代码相对应的结构数据，其中，结构数据反映页面设计图的页面结构；根据所述页面结构数据模板的页面根节点数据和每个页面子节点数据，得到页面结构数据；
代码生成模块，用于根据所述页面结构数据生成页面代码，所述页面代码用于生成与所述页面设计图对应的应用页面。
12.根据权利要求11所述的装置，其特征在于，所述获取模块，还用于获取页面设计稿对应的设计稿链接；从所述设计稿链接提取所述页面设计稿对应的访问参数；根据所述访问参数，生成所述页面设计稿对应的页面设计图的访问请求；根据所述访问请求，获取所述页面设计稿对应的页面设计图。
13.根据权利要求11所述的装置，其特征在于，所述分割模块，还用于对所述页面设计图进行灰度化处理，得到所述页面设计图对应的灰度图；对所述灰度图进行投影处理，得到所述页面设计图对应的投影直方图；基于所述投影直方图，确定所述页面设计图上的分割位置；基于所述分割位置，将所述页面设计图分割成多个子区域。
14.根据权利要求13所述的装置，其特征在于，所述分割模块，还用于确定所述灰度图中灰度值等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第一预设灰度值；确定所述灰度图中灰度值不等于预设值的像素点，将确定的所述像素点对应的灰度值设置为第二预设灰度值，得到所述页面设计图的投影直方图；其中，所述第一预设灰度值与所述第二预设灰度值不同。
15.根据权利要求14所述的装置，其特征在于，所述分割模块，还用于遍历所述投影直方图的每一行像素点；统计所述投影直方图中每一行像素点中灰度值等于所述第一预设灰度值的像素点的数量，若所述数量为所述页面设计图的一行像素数，则将相应的行作为候选分割行；基于所述候选分割行，确定所述页面设计图上的分割位置。
16.根据权利要求15所述的装置，其特征在于，所述分割模块，还用于若所述投影直方图中存在连续的多个候选分割行，则将所述连续的多个候选分割行中的第一个候选分割行或最后一个候选分割行作为分割位置。
17.根据权利要求11所述的装置，其特征在于，所述分割模块，还用于以所述页面设计图的顶部为起点、沿着所述页面设计图的高度方向向下延伸预设距离到达组件区域分割位置；根据所述组件区域分割位置从所述页面设计图中裁出顶部区域，得到组件区域；将所述组件区域分割成多个子区域。
18.根据权利要求11所述的装置，其特征在于，所述图像匹配模块，还用于获取预设的各组件样例图；对于分割出的每个所述子区域，计算所述子区域与预设的各组件样例图之间的相似度；根据所述相似度确定所述子区域与所述组件样例图之间的图像匹配结果。
19.根据权利要求11所述的装置，其特征在于，所述结构生成模块，还用于根据所述页面结构数据中的所述页面根节点数据，生成根节点；根据所述页面结构数据中的每个所述页面子节点数据，生成每个子节点；将所述根节点和各所述子节点进行关联，得到页面代码。
20.根据权利要求11所述的装置，其特征在于，所述结构生成模块，还用于根据所述页面代码生成与所述页面设计图对应的应用页面；展示所述应用页面。
21.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至10中任一项所述的方法的步骤。
22.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至10中任一项所述的方法的步骤。
CN202310878920.2A 2023-07-18 2023-07-18 页面代码生成方法、装置、设备和存储介质 Active CN116610304B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310878920.2A CN116610304B (zh) 2023-07-18 2023-07-18 页面代码生成方法、装置、设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310878920.2A CN116610304B (zh) 2023-07-18 2023-07-18 页面代码生成方法、装置、设备和存储介质

Publications (2)

Publication Number Publication Date
CN116610304A CN116610304A (zh) 2023-08-18
CN116610304B true CN116610304B (zh) 2024-01-02

Family

ID=87675073

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310878920.2A Active CN116610304B (zh) 2023-07-18 2023-07-18 页面代码生成方法、装置、设备和存储介质

Country Status (1)

Country Link
CN (1) CN116610304B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117290627B (zh) * 2023-11-27 2024-03-08 福瑞莱环保科技（深圳）股份有限公司 一种服务器端页面组件渲染方法、系统及介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109558557A (zh) * 2018-11-23 2019-04-02 京华信息科技股份有限公司 一种基于图像识别的移动建模方法、装置及存储介质
CN109783094A (zh) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 前端页面生成方法、装置、计算机设备及存储介质
CN113760276A (zh) * 2020-10-14 2021-12-07 北京沃东天骏信息技术有限公司 一种生成页面代码的方法和装置
CN114296726A (zh) * 2021-12-24 2022-04-08 北京字节跳动网络技术有限公司 一种代码生成方法、装置、计算机设备和存储介质
CN114782955A (zh) * 2022-04-25 2022-07-22 中国平安人寿保险股份有限公司 埋点处理方法、电子设备、存储介质
CN115686506A (zh) * 2021-07-28 2023-02-03 广州腾讯科技有限公司 一种数据显示方法、装置、电子设备和存储介质
CN115756445A (zh) * 2022-09-27 2023-03-07 潍柴动力股份有限公司 一种组件生成方法和装置、电子设备、计算机存储介质
CN116185403A (zh) * 2022-12-30 2023-05-30 中国联合网络通信集团有限公司 一种代码生成方法、装置及存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7108192B2 (en) * 1999-09-17 2006-09-19 Silverbrook Research Pty Ltd Rotationally symmetric tags
US8862897B2 (en) * 2011-10-01 2014-10-14 Oracle International Corporation Increasing data security in enterprise applications by using formatting, checksums, and encryption to detect tampering of a data buffer
US10048946B2 (en) * 2016-03-24 2018-08-14 Microsoft Technology Licensing, Llc Converting visual diagrams into code
US10331781B2 (en) * 2016-07-05 2019-06-25 Google Llc Template compilation using view transforms
US20190205363A1 (en) * 2018-01-02 2019-07-04 Go Daddy Operating Company, LLC Method for creating html layouts based on visual input

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109558557A (zh) * 2018-11-23 2019-04-02 京华信息科技股份有限公司 一种基于图像识别的移动建模方法、装置及存储介质
CN109783094A (zh) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 前端页面生成方法、装置、计算机设备及存储介质
CN113760276A (zh) * 2020-10-14 2021-12-07 北京沃东天骏信息技术有限公司 一种生成页面代码的方法和装置
CN115686506A (zh) * 2021-07-28 2023-02-03 广州腾讯科技有限公司 一种数据显示方法、装置、电子设备和存储介质
CN114296726A (zh) * 2021-12-24 2022-04-08 北京字节跳动网络技术有限公司 一种代码生成方法、装置、计算机设备和存储介质
CN114782955A (zh) * 2022-04-25 2022-07-22 中国平安人寿保险股份有限公司 埋点处理方法、电子设备、存储介质
CN115756445A (zh) * 2022-09-27 2023-03-07 潍柴动力股份有限公司 一种组件生成方法和装置、电子设备、计算机存储介质
CN116185403A (zh) * 2022-12-30 2023-05-30 中国联合网络通信集团有限公司 一种代码生成方法、装置及存储介质

Also Published As

Publication number Publication date
CN116610304A (zh) 2023-08-18

Similar Documents

Publication Publication Date Title
Villán Mastering OpenCV 4 with Python: a practical guide covering topics from image processing, augmented reality to deep learning with OpenCV 4 and Python 3.7
US11093698B2 (en) Method and apparatus and computer device for automatic semantic annotation for an image
EP3433732B1 (en) Converting visual diagrams into code
Cliche et al. Scatteract: Automated extraction of data from scatter plots
Zhang et al. Viscode: Embedding information in visualization images using encoder-decoder network
CN111028305A (zh) 表情生成方法、装置、设备及存储介质
CN110110198B (zh) 一种网页信息抽取方法及装置
CN116610304B (zh) 页面代码生成方法、装置、设备和存储介质
CN114638960A (zh) 模型的训练方法、图像描述生成方法和装置、设备、介质
Manandhar et al. Learning structural similarity of user interface layouts using graph networks
CN115937887A (zh) 文档结构化信息的提取方法及装置、电子设备、存储介质
CN114399784A (zh) 一种基于cad图纸的自动识别方法及装置
WO2023093850A1 (zh) 组件识别方法、装置、电子设备及存储介质
CN111597336A (zh) 训练文本的处理方法、装置、电子设备及可读存储介质
WO2023284670A1 (zh) 图形码提取模型构建方法、识别方法、装置、设备和介质
CN113434722B (zh) 图像分类方法、装置、设备及计算机可读存储介质
CN112395834B (zh) 基于图片输入的脑图生成方法、装置、设备及存储介质
CN115373658A (zh) 一种基于Web图片的前端代码自动生成方法和装置
CN116452702B (zh) 信息图表快速设计方法、装置、计算机设备和存储介质
Lynnette et al. Cross-model image annotation platform with active learning
CN116304163B (zh) 一种图像检索方法、装置、计算机设备及介质
CN117436429B (zh) 文档导出方法、装置、计算机设备和存储介质
CN114399782B (zh) 文本图像处理方法、装置、设备、存储介质及程序产品
EP4343715A1 (en) Determining 3d models corresponding to an image
Ghaemmaghami et al. Integrated-Block: A New Combination Model to Improve Web Page Segmentation

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
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40091873

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant