CN115098103A - 前端代码生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种前端代码生成方法、装置、计算机设备和存储介质，涉及计算机技术领域。可用于金融科技领域或其他相关领域。所述方法包括：在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。采用本方法能够提高前端代码开发效率。

Description

前端代码生成方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种前端代码生成方法、装置、计算机设备和存储介质。

背景技术

目前在根据用户界面设计图生成前端代码的过程中，首先根据用户界面设计图确定要实现的样式，然后根据设计图自上而下、自左而右地编写界面程序，并手工编写LABEL(文字)、INPUT(输入框)、BUTTON(按钮)等元素，最后根据设计图所指定的样式和位置，手工编写LABEL、INPUT、BUTTON等元素的样式。

然而，上述前端代码生成方式依赖编辑工具，需要用户在相应的界面编辑工具中编辑界面，并拖拉组件来完成，当需要处理的界面或者界面元素较多时，开发效率较低。

因此，目前的前端代码生成技术存在开发效率低的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高开发效率的前端代码生成方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种前端代码生成方法。所述方法包括：

在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

在其中一个实施例中，所述根据所述文本元素的间距，确定所述前端设计图中的输入框元素，包括：

在所述文本元素位于所述前端设计图中的第一位置，且所述文本元素与目标文本元素的间距超过预设距离的情况下，在所述文本元素的右侧，生成所述输入框元素；所述第一位置为所述前端设计图中除第一行以外的位置，所述目标文本元素位于所述文本元素的右侧。

在其中一个实施例中，所述根据所述文本元素的内容，确定所述前端设计图中的按钮元素，包括：

在所述文本元素位于所述前端设计图中的第二位置，且所述文本元素的内容与预设内容相匹配的情况下，在所述文本元素位置处，生成所述按钮元素；所述第二位置为所述前端设计图中最后一行的位置。

在其中一个实施例中，所述根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码，包括：

根据所述前端代码的代码类型，分别确定所述文本元素、所述输入框元素和所述按钮元素对应的文本元素代码、输入框元素代码和按钮元素代码；

根据所述文本元素代码、输入框元素代码和按钮元素代码，生成所述前端代码。

在其中一个实施例中，所述方法还包括：

在所述前端设计图与所述设计图模板库中的目标设计图模板相匹配的情况下，根据与所述目标设计图模板对应的代码，生成与所述前端设计图对应的前端代码。

在其中一个实施例中，在所述前端设计图与所述设计图模板库中的目标设计图模板相匹配的情况下，根据与所述目标设计图模板对应的代码，生成与所述前端设计图对应的前端代码之前，还包括：

确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率；

对所述文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各所述设计图模板对应的模板识别率；

从所述各设计图模板中，确定出所述模板识别率超过预设阈值的设计图模板，作为所述目标设计图模板。

在其中一个实施例中，所述确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，包括：

分别将所述前端设计图和所述设计图模板中的文本替换为预设文本，得到替换后的前端设计图和替换后的设计图模板；

确定所述替换后的前端设计图和所述替换后的设计图模板之间的匹配率，得到所述文本匹配率。

在其中一个实施例中，所述确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，还包括：

分别确定所述前端设计图和所述设计图模板的基本梯度，得到前端设计图基本梯度和设计图模板基本梯度；

确定所述前端设计图基本梯度和所述设计图模板基本梯度之间的匹配率，得到所述边框匹配率。

第二方面，本申请还提供了一种前端代码生成装置。所述装置包括：

元素识别模块，用于在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

元素确定模块，用于根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

代码生成模块，用于根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

上述前端代码生成方法、装置、计算机设备、存储介质和计算机程序产品，通过在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，先识别前端设计图中的文本元素，再根据文本元素的间距，确定前端设计图中的输入框元素，根据文本元素的内容，确定前端设计图中的按钮元素，最后根据文本元素、输入框元素和按钮元素，生成与前端设计图对应的前端代码；可以通过识别前端设计图中的文本，根据文本确定前端设计图中的输入框和按钮，自动生成前端设计图中各个元素的代码，提高了前端代码的开发效率。

附图说明

图1为一个实施例中前端代码生成方法的流程示意图；

图2为另一个实施例中前端代码生成方法的流程示意图；

图3为一个实施例中自动识别图片生成前端代码的方法的流程示意图；

图4为一个实施例中代码生成步骤的流程示意图；

图5为一个实施例中前端代码生成装置的结构框图；

图6为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的前端代码生成方法，可以应用于终端或服务器。其中，终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图1所示，提供了一种前端代码生成方法，以该方法应用于终端为例进行说明，包括以下步骤：

步骤S110，在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别前端设计图中的文本元素。

其中，前端设计图可以为前端用户界面的设计图。

其中，设计图模板可以为前端设计图的模板。

具体实现中，可以将前端设计图直接绘制在终端上，还可以将前端设计图绘制在图纸上，对图纸进行扫描或者拍照，得到前端设计图的图片，将该图片输入至终端。终端可以预先存储多个设计图模板，形成设计图模板库，其中，每一个设计图模板与一段代码相对应，该代码为设计图模板的生成代码。终端将获取到的前端设计图与设计图模板库中的每一个设计图模板相比对，若设计图模板库中存在与前端设计图相匹配的设计图模板，则将该设计图模板所对应的代码作为前端设计图的生成代码。否则，若设计图模板库中不存在与前端设计图相匹配的设计图模板，即前端设计图与设计图模板库中的设计图模板均不匹配，则通过光学字符识别技术对前端设计图进行识别，得到前端设计图中的各个文本元素。

例如，可以通过OCR(Optical Character Recognition，光学字符识别)，识别前端设计图中的文本，生成文本要素LABEL。

步骤S120，根据文本元素的间距，确定前端设计图中的输入框元素，以及根据文本元素的内容，确定前端设计图中的按钮元素。

具体实现中，终端可以获取文本元素在前端设计图中的位置、文本元素的内容，以及前端设计图中相邻文本元素之间的距离，根据文本元素在前端设计图中的位置和相邻文本元素之间的距离，可以确定前端设计图中的输入框元素，根据文本元素在前端设计图中的位置和文本元素的内容，可以确定前端设计图中的按钮元素。

例如，前端设计图中有文本A和B，B与A相邻且位于A的右侧，若A不在前端设计图的第一行，且A与B的间距超过阈值T，则可以确定A与B之间存在一个输入框要素INPUT。前端设计图中还有文本C，若C位于前端设计图的最后一行，且C的内容为指定内容，则可以确定文本C所在的位置存在一个按钮要素BUTTON。其中，指定内容可以为确定、提交、重置、返回或查询。

步骤S130，根据文本元素、输入框元素和按钮元素，生成与前端设计图对应的前端代码。

其中，前端代码可以为前端设计图的生成代码。

具体实现中，终端可以获取文本元素、输入框元素和按钮元素的颜色及样式，将颜色及样式加载在文本元素、输入框元素和按钮元素上，生成前端设计图对应的前端代码。

例如，可以对要素LABEL、INPUT和BUTTON的颜色和样式进行加载，得到前端设计图的生成代码。

上述前端代码生成方法，通过在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，先识别前端设计图中的文本元素，再根据文本元素的间距，确定前端设计图中的输入框元素，根据文本元素的内容，确定前端设计图中的按钮元素，最后根据文本元素、输入框元素和按钮元素，生成与前端设计图对应的前端代码；可以通过识别前端设计图中的文本，根据文本确定前端设计图中的输入框和按钮，自动生成前端设计图中各个元素的代码，提高了前端代码的开发效率。

在一个实施例中，上述步骤S120，可以具体包括：在文本元素位于前端设计图中的第一位置，且文本元素与目标文本元素的间距超过预设距离的情况下，在文本元素的右侧，生成输入框元素；第一位置为前端设计图中除第一行以外的位置，目标文本元素位于文本元素的右侧。

具体实现中，在当前文本元素位于前端设计图中除第一行以外的位置的情况下，可以检测当前文本元素与右侧相邻文本元素之间的距离是否超过预设距离，若超过预设距离，可以在当前文本元素右侧生成一个输入框元素，否则，若未超过预设距离，则不生成输入框元素，并继续针对下一个文本元素执行上述检测。

其中，可以对预设距离进行调整。具体地，可以根据文本元素的内容来调整预设距离，当识别到针对文本元素内容需要填写的内容较多时，增大预设距离，当识别到针对文本元素内容需要填写的内容较少时，缩小预设距离；还可以根据待设计用户界面的分辨率调整预设距离，当待设计用户界面的分辨率较高时，缩小预设距离，当待设计用户界面的分辨率较低时，增大预设距离。

例如，前端设计图第一行通常为标题，标题中不包含输入框，因此可以先检测当前文本A是否位于前端设计图的第一行，若位于第一行，则确定不生成输入框要素，否则，若不位于第一行，则进一步测量当前文本A与右侧相邻文本B之间的距离AB，并设置距离阈值T，若AB>T，则可以在A和B之间生成一个输入框要素INPUT，否则，若AB≤T，则不生成输入框要素。

本实施例中，通过在文本元素位于前端设计图中的第一位置，且文本元素与目标文本元素的间距超过预设距离的情况下，在文本元素的右侧，生成输入框元素，可以自动确定前端设计图中的输入框，提高代码开发效率。

在一个实施例中，上述步骤S120，具体还可以包括：在文本元素位于前端设计图中的第二位置，且文本元素的内容与预设内容相匹配的情况下，在文本元素位置处，生成按钮元素；第二位置为前端设计图中最后一行的位置。

其中，预设内容可以为确定、提交、重置、返回或者查询中的至少一种。

具体实现中，在当前文本元素位于前端设计图中最后一行的情况下，可以检测当前文本元素的内容是否为预设内容，若为预设内容，则可以在当前文本元素所在的位置生成按钮元素BUTTON，否则，若不为预设内容，则不生成按钮元素。

例如，当前文本C位于前端设计图最后一行，且检测到C的内容为“确定”，则可以在C所在位置生成按钮要素BUTTON，否则，若C的内容不为预设内容，则不生成按钮要素。

本实施例中，通过在文本元素位于前端设计图中的第二位置，且文本元素的内容与预设内容相匹配的情况下，在文本元素位置处，生成按钮元素，可以自动确定前端设计图中的按钮，提高代码开发效率。

在一个实施例中，上述步骤S130，可以具体包括：根据前端代码的代码类型，分别确定文本元素、输入框元素和按钮元素对应的文本元素代码、输入框元素代码和按钮元素代码；根据文本元素代码、输入框元素代码和按钮元素代码，生成前端代码。

其中，代码类型可以为HTML(Hyper Text Markup Language，超文本标记语言)、IFTide或者Unicorn Mobile UI。其中，IFTide可以是基于react-native(一种跨平台移动应用开发框架)研发的前端框架。Unicorn Mobile UI可以是基于VUE(一种网络日志编辑工具)研发的前端框架。

具体实现中，可以预先根据不同的代码类型，确定各元素所对应的代码，将元素和代码之间的对应关系存储在数据表中。在确定前端设计图中的文本元素、输入框元素和按钮元素之后，可以根据代码类型，在数据表中查找文本元素、输入框元素和按钮元素所对应的代码，得到文本元素代码、输入框元素代码和按钮元素代码，根据文本元素代码、输入框元素代码和按钮元素代码，得到前端设计图的生成代码。

例如，对于代码类型HTML，可以确定LABEL、INPUT和BUTTON对应的代码分别为label、Input和button；对于代码类型IFTide，可以确定LABEL、INPUT和BUTTON对应的代码分别为Label、TextField和Button；对于代码类型Unicorn Mobile UI，可以确定LABEL、INPUT和BUTTON对应的代码分别为unm-label、unm-textfield和unm-button，将上述映射关系存储在数据表中。在确定前端设计图中的文本元素、输入框元素和按钮元素之后，若用户选择代码类型HTML，则可以针对文本元素、输入框元素和按钮元素，分别输出代码label、Input和button。

本实施例中，通过根据前端代码的代码类型，分别确定文本元素、输入框元素和按钮元素对应的文本元素代码、输入框元素代码和按钮元素代码，根据文本元素代码、输入框元素代码和按钮元素代码，生成前端代码，可以根据前端设计图中的元素自动生成代码，提高代码生成效率。

在一个实施例中，上述前端代码生成方法，具体还可以包括：在前端设计图与设计图模板库中的目标设计图模板相匹配的情况下，根据与目标设计图模板对应的代码，生成与前端设计图对应的前端代码。

具体实现中，可以针对前端设计图，确定设计图模板库中每一个设计图模板的识别率，将识别率超过预设阈值的设计图模板确定为目标设计图模板，目标设计图模板与前端设计图相匹配，将目标设计图模板对应的代码，确定为前端设计图对应的前端代码。否则，若设计图模板库中设计图模板的识别率均不超过预设阈值，则判定未检测到目标设计图模板，即前端设计图与设计图模板库中的设计图模板均不匹配，此时可以按照步骤S110-S130所述的前端代码生成方法，生成前端代码。

本实施例中，通过在前端设计图与设计图模板库中的目标设计图模板相匹配的情况下，根据与目标设计图模板对应的代码，生成与前端设计图对应的前端代码，可以通过在设计图模板库中查找设计图模板来获取前端设计图的生成代码，进一步提高代码开发效率。

在一个实施例中，上述前端代码生成方法，具体还可以包括：确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率；对文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各设计图模板对应的模板识别率；从各设计图模板中，确定出模板识别率超过预设阈值的设计图模板，作为目标设计图模板。

其中，文本匹配率可以为用户界面中文本所对应的像素相匹配的概率。

其中，边框匹配率可以为用户界面中边框所对应的像素相匹配的概率。

其中，整体匹配率可以为用户界面所对应的像素相匹配的概率。

具体实现中，可以统计前端设计图中所有文本的像素数，并将前端设计图与设计图模板相比对，统计文本重合的像素数，将文本重合的像素数与所有文本的像素数之间的比值，确定为文本匹配率。还可以统计前端设计图中所有边框的像素数，并将前端设计图与设计图模板相比对，统计边框重合的像素数，将边框重合的像素数与所有边框的像素数之间的比值，确定为边框匹配率。还可以对前端设计图和设计图模板进行二值化和尺寸缩放，得到尺寸相同的处理后前端设计图和处理后设计图模板，统计处理后前端设计图(或者处理后设计图模板)的总像素数，并将处理后前端设计图和处理后设计图模板相比对，统计重合像素数，将重合像素数与总像素数之间的比值，确定为整体匹配率。对文本匹配率、边框匹配率和整体匹配率进行加权求和，可以得到模板识别率。若设计图模板的模板识别率超过预设阈值，可以将该设计图模板确定为目标设计图模板，否则，若设计图模板的模板识别率未超过预设阈值，则不为目标设计图模板。

本实施例中，通过确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，对文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各设计图模板对应的模板识别率，从各设计图模板中，确定出模板识别率超过预设阈值的设计图模板，作为目标设计图模板，可以通过识别率判断设计图模板是否与前端设计图相匹配，便于从设计图模板库中自动、快速地检测出目标设计图模板，进而根据目标设计图模板得到前端设计图的生成代码，提高代码生成效率。

在一个实施例中，上述确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率的步骤，可以具体包括：分别将前端设计图和设计图模板中的文本替换为预设文本，得到替换后的前端设计图和替换后的设计图模板；确定替换后的前端设计图和替换后的设计图模板之间的匹配率，得到文本匹配率。

具体实现中，可以将前端设计图和设计图模板中的文本均替换成预设文本，并将得到的文本绘制在新的白色背景图片上，得到替换后的前端设计图和替换后的设计图模板，统计替换后的前端设计图中所有文本的像素数，并将替换后的前端设计图与替换后的设计图模板相比对，统计文本重合的像素数，将文本重合的像素数与所有文本的像素数之间的比值，确定为文本匹配率。

例如，可以将前端设计图和设计图模板中的文字统一替换为“A”，数字统一替换为“8”，并重新绘制到白色背景图片上，得到替换后的前端设计图和替换后的设计图模板。

本实施例中，通过分别将前端设计图和设计图模板中的文本替换为预设文本，得到替换后的前端设计图和替换后的设计图模板，确定替换后的前端设计图和替换后的设计图模板之间的匹配率，得到文本匹配率，可以便于将前端设计图与设计图模板相比对，便于确定文本匹配率，而且能够增加文本匹配率的可靠性。

在一个实施例中，上述确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率的步骤，具体还可以包括：分别确定前端设计图和设计图模板的基本梯度，得到前端设计图基本梯度和设计图模板基本梯度；确定前端设计图基本梯度和设计图模板基本梯度之间的匹配率，得到边框匹配率。

其中，基本梯度可以为图形膨胀的结果减去腐蚀的结果。

具体实现中，可以分别确定前端设计图和设计图模板的基本梯度，将得到的前端设计图基本梯度确定为前端设计图的边框，将得到的设计图模板基本梯度确定为设计图模板的边框。统计前端设计图基本梯度的总像素数，并将前端设计图基本梯度与设计图模板基本梯度相比对，统计重合像素数，将重合像素数与总像素数之间的比值，确定为边框匹配率。

本实施例中，通过分别确定前端设计图和设计图模板的基本梯度，得到前端设计图基本梯度和设计图模板基本梯度，确定前端设计图基本梯度和设计图模板基本梯度之间的匹配率，得到边框匹配率，可以便于将前端设计图与设计图模板相比对，便于确定边框匹配率，并且能够增加边框匹配率的可靠性。

在一个实施例中，上述确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率的步骤，具体还可以包括：对前端设计图和设计图模板进行二值化处理，得到二值化后的前端设计图和二值化后的设计图模板；对二值化后的前端设计图和二值化后的设计图模板进行缩放处理，得到缩放后的前端设计图和缩放后的设计图模板；确定缩放后的前端设计图和缩放后的设计图模板之间的匹配率，得到整体匹配率。

具体实现中，可以先对前端设计图和设计图模板进行二值化处理，例如，可以将图片的灰度值转化为0或者255，再将二值化后的前端设计图和二值化后的设计图模板缩放至同样尺寸，得到缩放后的前端设计图和缩放后的设计图模板。统计缩放后前端设计图的总像素数，并将缩放后前端设计图与缩放后设计图模板基本梯度相比对，统计重合像素数，将重合像素数与总像素数之间的比值，确定为整体匹配率。

本实施例中，通过对前端设计图和设计图模板进行二值化处理，得到二值化后的前端设计图和二值化后的设计图模板，可以减少颜色对图片比对的干扰，对二值化后的前端设计图和二值化后的设计图模板进行缩放处理，得到缩放后的前端设计图和缩放后的设计图模板，可以减少分辨率对比对的干扰，确定缩放后的前端设计图和缩放后的设计图模板之间的匹配率，得到整体匹配率，能够增加整体匹配率的准确性。

在一个实施例中，如图2所示，提供了一种前端代码生成方法，以该方法应用于终端为例进行说明，包括以下步骤：

步骤S210，确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率；

步骤S220，对文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各设计图模板对应的模板识别率；

步骤S230，从各设计图模板中，确定出模板识别率超过预设阈值的设计图模板，作为目标设计图模板；

步骤S231，根据目标设计图模板对应的代码，生成前端设计图对应的前端代码；

步骤S240，在各设计图模板对应的模板识别率均不超过预设阈值的情况下，识别前端设计图中的文本元素；

步骤S241，根据文本元素的间距确定前端设计图中的输入框元素，根据文本元素的内容确定前端设计图中的按钮元素；

步骤S242，根据文本元素、输入框元素和按钮元素，生成前端设计图对应的前端代码。

本实施例中，通过确定前端设计图与设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，对文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各设计图模板对应的模板识别率，可以增加模板识别率的准确性；从各设计图模板中，确定出模板识别率超过预设阈值的设计图模板，作为目标设计图模板，根据目标设计图模板对应的代码，生成前端设计图对应的前端代码，可以根据设计图模板直接确定代码，提高代码开发效率；在各设计图模板对应的模板识别率均不超过预设阈值的情况下，识别前端设计图中的文本元素，根据文本元素的间距确定前端设计图中的输入框元素，根据文本元素的内容确定前端设计图中的按钮元素，根据文本元素、输入框元素和按钮元素，生成前端设计图对应的前端代码，可以在查找不到相匹配的设计图模板时，通过文本识别自动生成前端代码，进一步提高代码开发效率。

为了便于本领域技术人员深入理解本申请实施例，以下将结合一个具体示例进行说明。

图3提供了一个自动识别图片生成前端代码的方法的流程示意图。设置需要转换的元素包括LABEL(文本)、INPUT(输入框)和BUTTON(按钮)，根据图3，自动识别图片生成前端代码的方法可以包括以下步骤：

1、根据UI(User Interface，用户界面)设计图匹配页面模板库，如果存在相似的，则取页面模板对应的代码；

2、如果页面模板库中不存在相似的，则根据UI设计图通过OCR识别图片要素；

3、将得到的要素(文字)生成LABEL；

4、如果(文字)不是第一行且(文字)右边超出指定距离才出现文字则在右边自动按(输入框)生成INPUT；

5、如果(文字)在最后一行且内容为指定文本(确定、提交、重置、返回、查询)的，则将得到的要素(按钮)生成BUTTON；

6、将得到的要素坐标位置和颜色样式，生成LABEL、INPUT、BUTTON中的样式；

7、除了HTML外，通过语言转换模块还支持IFTide和Unicorn Mobile UI框架的转换，根据选择的转换类型，输出对应类型的代码。

需要说明的是，上述自动识别图片生成前端代码的方法可以支持参数调整，具体包括：

1、如果(文字)不是第一行且(文字)右边超出指定距离才出现文字，则在右边自动按(输入框)生成INPUT。此处的距离支持手动调整，一方面为了根据不同的界面文本跟输入框的距离不同而灵活设置，另一方面为了支持不同图片分辨率大小不同。

2、如果(文字)在最后一行且内容为指定文本(确定、提交、重置、返回、查询)的，则将得到的要素(按钮)生成BUTTON。此处的按钮文本支持录入，兼容不同按钮文本。

3、模板识别率参数可以支持配置，识别率范围可以是0.7～1，识别率越大，表示图片相似度越高。

4、文字匹配率、边框匹配率和整体匹配率参数支持配置，三者之和为1。

还需要说明的是，上述自动识别图片生成前端代码的方法中匹配页面模板的步骤可以具体包括：

1、页面模板包含确认页、详情页、表单页、首页、列表页、协议页、结果页，能够覆盖常用的页面。

2、图片里的文字通过替换为相同的文字，比如“A”，数字则统一替换为8。而模板里的文字也统一按这个规则显示。将所得文字绘制到一张新的白色背景图上，页面模板图使用同样的方法得到文字图，通过图片对比得出文字匹配率。

3、通过生成图片和页面模板图的基本梯度勾勒出图片的边缘部分，再对比两个图片的基本梯度得出边框匹配率。

4、通过二值化算法将图片转为灰度图，模板图片同样通过二值化算法转为灰度图。减少颜色对图片匹配的干扰。

5、将图片和模板图片缩放成同样大小比例，减少分辨率对识别率的影响，通过图片对比得出整体匹配率。

6、计算识别率，文字匹配率*0.2+边框匹配率*0.2+整体匹配率*0.6＝识别率。其中，文字匹配率、边框匹配率和整体匹配率所占比重为默认参数值，支持自定义调整，三者比重加起来为1。识别的要素主要是文本、输入框，分别用文字匹配率和边框匹配率对应，因此比重各占0.2，而整体匹配率代表整张图片的相似度，比重至少占一半，因此比重设置为0.6。此比重的设置能够更大的提高识别准确率。

7、通过图片对比，如果识别率达到指定系数(模板识别率参数)，则认为该模板与图片相似，将该模板的代码作为输出。

图4提供了一个代码生成步骤的流程示意图。根据图4，可以判断代码类型，代码类型可以包括HTML、IFTide和Unicorn Mobile UI，根据不同的代码类型，分别生成LABEL、INPUT和BUTTON所对应的代码。

上述自动识别图片生成前端代码的方法，解决了手工编写前端代码实现界面效率低、容易错的问题，克服了界面多人力不足的困难，前端代码生成工具支持根据需求文档里的图片，不依赖图片是否包含多个图层，即可自动生成前端代码；支持IFTide和UnicornMobile UI框架的转换，根据选择的转换框架类型，输出对应类型的代码。支持匹配页面模板库输出代码。减少重复性工作，提高研发效率，研发人员可以更专注于核心逻辑处理。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的前端代码生成方法的前端代码生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个前端代码生成装置实施例中的具体限定可以参见上文中对于前端代码生成方法的限定，在此不再赘述。

在一个实施例中，如图5所示，提供了一种前端代码生成装置，包括：元素识别模块310、元素确定模块320和代码生成模块330，其中：

元素识别模块310，用于在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

元素确定模块320，用于根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

代码生成模块330，用于根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

在一个实施例中，上述元素确定模块320，还用于在所述文本元素位于所述前端设计图中的第一位置，且所述文本元素与目标文本元素的间距超过预设距离的情况下，在所述文本元素的右侧，生成所述输入框元素；所述第一位置为所述前端设计图中除第一行以外的位置，所述目标文本元素位于所述文本元素的右侧。

在一个实施例中，上述元素确定模块320，还用于在所述文本元素位于所述前端设计图中的第二位置，且所述文本元素的内容与预设内容相匹配的情况下，在所述文本元素位置处，生成所述按钮元素；所述第二位置为所述前端设计图中最后一行的位置。

在一个实施例中，上述代码生成模块330，还用于根据所述前端代码的代码类型，分别确定所述文本元素、所述输入框元素和所述按钮元素对应的文本元素代码、输入框元素代码和按钮元素代码；根据所述文本元素代码、输入框元素代码和按钮元素代码，生成所述前端代码。

在一个实施例中，上述前端代码生成装置，还包括：

代码对应模块，用于在所述前端设计图与所述设计图模板库中的目标设计图模板相匹配的情况下，根据与所述目标设计图模板对应的代码，生成与所述前端设计图对应的前端代码。

在一个实施例中，上述前端代码生成装置，还包括：

匹配率确定模块，用于确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率；

识别率计算模块，用于对所述文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各所述设计图模板对应的模板识别率；

目标模板确定模块，用于从所述各设计图模板中，确定出所述模板识别率超过预设阈值的设计图模板，作为所述目标设计图模板。

在一个实施例中，上述匹配率确定模块，还用于分别将所述前端设计图和所述设计图模板中的文本替换为预设文本，得到替换后的前端设计图和替换后的设计图模板；确定所述替换后的前端设计图和所述替换后的设计图模板之间的匹配率，得到所述文本匹配率。

在一个实施例中，上述匹配率确定模块，还用于分别确定所述前端设计图和所述设计图模板的基本梯度，得到前端设计图基本梯度和设计图模板基本梯度；确定所述前端设计图基本梯度和所述设计图模板基本梯度之间的匹配率，得到所述边框匹配率。

上述前端代码生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种前端代码生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (11)

1.一种前端代码生成方法，其特征在于，所述方法包括：

在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

2.根据权利要求1所述的方法，其特征在于，所述根据所述文本元素的间距，确定所述前端设计图中的输入框元素，包括：

在所述文本元素位于所述前端设计图中的第一位置，且所述文本元素与目标文本元素的间距超过预设距离的情况下，在所述文本元素的右侧，生成所述输入框元素；所述第一位置为所述前端设计图中除第一行以外的位置，所述目标文本元素位于所述文本元素的右侧。

3.根据权利要求1所述的方法，其特征在于，所述根据所述文本元素的内容，确定所述前端设计图中的按钮元素，包括：

在所述文本元素位于所述前端设计图中的第二位置，且所述文本元素的内容与预设内容相匹配的情况下，在所述文本元素位置处，生成所述按钮元素；所述第二位置为所述前端设计图中最后一行的位置。

4.根据权利要求1所述的方法，其特征在于，所述根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码，包括：

根据所述前端代码的代码类型，分别确定所述文本元素、所述输入框元素和所述按钮元素对应的文本元素代码、输入框元素代码和按钮元素代码；

根据所述文本元素代码、输入框元素代码和按钮元素代码，生成所述前端代码。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述前端设计图与所述设计图模板库中的目标设计图模板相匹配的情况下，根据与所述目标设计图模板对应的代码，生成与所述前端设计图对应的前端代码。

6.根据权利要求5所述的方法，其特征在于，在所述前端设计图与所述设计图模板库中的目标设计图模板相匹配的情况下，根据与所述目标设计图模板对应的代码，生成与所述前端设计图对应的前端代码之前，还包括：

确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率；

对所述文本匹配率、边框匹配率和整体匹配率进行加权求和，得到各所述设计图模板对应的模板识别率；

从所述各设计图模板中，确定出所述模板识别率超过预设阈值的设计图模板，作为所述目标设计图模板。

7.根据权利要求6所述的方法，其特征在于，所述确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，包括：

分别将所述前端设计图和所述设计图模板中的文本替换为预设文本，得到替换后的前端设计图和替换后的设计图模板；

确定所述替换后的前端设计图和所述替换后的设计图模板之间的匹配率，得到所述文本匹配率。

8.根据权利要求6所述的方法，其特征在于，所述确定所述前端设计图与所述设计图模板库中各设计图模板之间的文本匹配率、边框匹配率和整体匹配率，还包括：

分别确定所述前端设计图和所述设计图模板的基本梯度，得到前端设计图基本梯度和设计图模板基本梯度；

确定所述前端设计图基本梯度和所述设计图模板基本梯度之间的匹配率，得到所述边框匹配率。

9.一种前端代码生成装置，其特征在于，所述装置包括：

元素识别模块，用于在前端设计图与设计图模板库中的设计图模板均不匹配的情况下，识别所述前端设计图中的文本元素；

元素确定模块，用于根据所述文本元素的间距，确定所述前端设计图中的输入框元素，以及根据所述文本元素的内容，确定所述前端设计图中的按钮元素；

代码生成模块，用于根据所述文本元素、所述输入框元素和所述按钮元素，生成与所述前端设计图对应的前端代码。

10.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-8中任一项所述的方法的步骤。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-8中任一项所述的方法的步骤。

Images