CN117931188A - 前端布局代码自动生成方法、装置、电子设备及介质 - Google Patents

Abstract

本公开提供了一种前端布局代码自动生成方法，可用于金融领域或其他领域。该方法包括：获取拟定开发的前端页面的页面图片；为所述页面图片配置全局页面样式；利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。本公开还提供了一种前端布局代码自动生成装置、电子设备、存储介质和程序产品。

Description

前端布局代码自动生成方法、装置、电子设备及介质

技术领域

本公开涉及计算机领域，可用于金融领域或其他领域，更具体地涉及一种前端布局代码自动生成方法、装置、电子设备、介质和程序产品。

背景技术

在当前的前端页面开发中，有大量的前端布局需要开发人员开发，但很多都是重复且需要消耗大量的时间进行适配。对于前端人员无法专注于开发前端业务逻辑代码，需要同时掌握例如css3、Flex、Element-ui等多个页面样式使用能力。初学者入门难度高，高级前端人员需要消耗精力到页面样式上，不能专注优化前端业务逻辑及代码性能，对于前端人员不是很友好。

总之，目前前端人员只能根据需求中的原型图进行界面开发，开发过程中存在与业务产品人员大量的沟通、返工的工作量，十分繁琐且效率低，不能直观的将页面内容进行展示，从而无法从前期就避免上述问题出现。

发明内容

鉴于上述问题，本公开提供了一种前端布局代码自动生成方法、装置、电子设备、介质和程序产品。

根据本公开的第一个方面，提供了一种前端布局代码自动生成方法，包括：获取拟定开发的前端页面的页面图片；为所述页面图片配置全局页面样式；利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。

根据本公开的实施例，所述获取拟定开发的前端页面的页面图片，包括：通过画图工具对所述拟定开发的前端页面进行绘制，生成页面图片；或者绘制原始图片，将所述原始图片通过文字识别工具进行识别，生成页面图片。

根据本公开的实施例，所述全局页面样式包括：所述页面图片的整体宽度、整体高度、最小宽度、填充信息、字体类型、字体大小和行高。

根据本公开的实施例，所述利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签，包括：利用预先训练的智能模型，识别出所述页面图片中的多个元素形状；根据所述智能模型中预设的参数配置表，将所述多个元素形状生成对应的多个目标语言标签。

根据本公开的实施例，所述多个元素形状包括常规矩形、圆角矩形、椭圆形、正方形、三角形、横线；根据所述智能模型中预设的参数配置表，将所述多个元素形状生成对应的多个目标语言标签，包括：在所述元素形状为常规矩形时，对应的目标语言标签为分区标签；在所述元素形状为圆角矩形时，对应的目标语言标签为输入框标签；在所述元素形状为椭圆形时，对应的目标语言标签为按钮标签；在所述元素形状为正方形时，对应的目标语言标签为图片标签；在所述元素形状为三角形时，对应的目标语言标签为超链接标签；在所述元素形状为横线时，对应的目标语言标签为文本标签。

根据本公开的实施例，生成所述页面图片对应的多个目标语言标签，还包括：为不同的目标语言标签配置不同的颜色。

根据本公开的实施例，将所述多个元素形状生成对应的多个目标语言标签，还包括：将所述多个元素形状生成对应的多个html标签；将所述多个html标签进行汇总；根据所述全局页面样式，对汇总后的多个html标签进行调整，生成对应的多个css标签。

本公开的第二方面提供了一种前端布局代码自动生成装置，包括：页面图片获取模块，用于获取拟定开发的前端页面的页面图片；页面样式配置模块，用于为所述页面图片配置全局页面样式；语言标签生成模块，用于利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；前端代码生成模块，用于根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。

本公开的第三方面提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个计算机程序，其中，所述一个或多个处理器执行所述一个或多个计算机程序以实现上述前端布局代码自动生成方法的步骤。

本公开的第四方面还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述前端布局代码自动生成方法的步骤。

本公开的第五方面还提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述前端布局代码自动生成方法的步骤。

本公开实施例提出的前端布局代码自动生成方法，在获取到拟定开发的前端页面的页面图片时，首先为页面图片配置全局页面样式，然后使用智能模型对页面图片进行分析，得到多个目标语言标签。最后根据全局页面样式和预设的前端布局框架，生成对应前端页面的页面布局的目标语言代码，例如html、csS代码。本方法帮助前端开发人员专注开发前端业务逻辑，仅需投入少量精力在页面样式开发上。也就帮助前端开发人员大量减少了页面布局开发的工作量，降低了前端界面的开发能力门槛。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的前端布局代码自动生成方法及装置的应用场景；

图2示意性示出了根据本公开实施例的前端布局代码自动生成方法的流程图；

图3示意性示出了根据本公开实施例获取页面图片的流程图；

图4示意性示出了根据本公开实施例生成多个目标语言标签的流程图；

图5示意性示出了根据图4生成多个html标签的原理图；

图6示意性示出了根据本公开实施例生成html标签和css标签的流程图；

图7示意性示出了根据本公开实施例的前端布局代码自动生成装置的结构框图；

图8示意性示出了根据本公开实施例的适于实现前端布局代码自动生成方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的***”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的***等)。

附图中示出了一些方框图和/或流程图。应理解，方框图和/或流程图中的一些方框或其组合可以由计算机程序指令来实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，从而这些指令在由该处理器执行时可以创建用于实现这些方框图和/或流程图中所说明的功能/操作的装置。本公开的技术可以硬件和/或软件(包括固件、微代码等)的形式来实现。另外，本公开的技术可以采取存储有指令的计算机可读存储介质上的计算机程序产品的形式，该计算机程序产品可供指令执行***使用或者结合指令执行***使用。

在本公开的技术方案中，所涉及的用户信息(包括但不限于用户个人信息、用户图像信息、用户设备信息，例如位置信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、存储、使用、加工、传输、提供、公开和应用等处理，均遵守相关法律法规和标准，采取了必要保密措施，不违背公序良俗，并提供有相应的操作入口，供用户选择授权或者拒绝。

在利用个人信息进行自动化决策的场景下，本公开实施例提供的方法、设备和***均为用户提供相应的操作入口，供用户选择同意或者拒绝自动化决策结果；若用户选择拒绝，则进入专家决策流程。此处的表述“自动化决策”是指通过计算机程序自动分析、评估个人的行为***的人员进行决策的活动。

本公开的实施例提供一种前端布局代码自动生成方法，包括：获取拟定开发的前端页面的页面图片；为所述页面图片配置全局页面样式；利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。

在详细描述本公开的具体实施例之前，首先对技术术语进行阐释，以便于更好地理解本公开。

css3：前端层叠样式表，描述了如何在屏幕、纸张或其他媒体上显示html元素。

Flex：当前比较流行的弹性布局，可以为盒状模型提供最大的灵活性。

Element-ui：是由国内某公司开发并开源的一套为开发者、设计师和产品经理准备的桌面端组件库。

html标签：超文本标记语言，代表页面中各个元素。

Style：html标签属性，可通过设置Style内容来确定各个元素样式及位置。

Python：一种开发语言，在模型领域运用广泛，有较好的生态环境。

智能模型：通过Python代码开发智能模型，并通过大量的训练，最终该模型可识别画图中的特殊标志符将画图文件转化为html文件。

图片ocr：比较成熟的技术，可将图片中的内容翻译成用户想要的文字内容，在本次的方法中，即将画图的图片转化为智能模型的入参。

图1示意性示出了根据本公开实施例的前端布局代码自动生成方法及装置的应用场景。需要注意的是，图1所示仅为可以应用本公开实施例的应用场景的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、***、环境或场景。

如图1所示，根据该实施例的应用场景100可以包括终端设备101、102、103、网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的前端布局代码自动生成方法一般可以由服务器105执行。相应地，本公开实施例所提供的前端布局代码自动生成装置一般可以设置于服务器105中。本公开实施例所提供的前端布局代码自动生成方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的前端布局代码自动生成装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的应用场景，通过图2～图6对本公开实施例的前端布局代码自动生成方法进行详细描述。

图2示意性示出了根据本公开实施例的前端布局代码自动生成方法的流程图。

如图2所示，该实施例的前端布局代码自动生成方法可以包括操作S210～操作S240，该前端布局代码自动生成方法可以由上述服务器105执行。

在操作S210，获取拟定开发的前端页面的页面图片。

该页面图片例如可以是png图片。

在操作S220，为页面图片配置全局页面样式。

该全局页面样式作为整体最外层的页面样式，可确保符合项目布局设计。

在操作S230，利用预先训练的智能模型，生成页面图片对应的多个目标语言标签。

该智能模型例如可以是通过Python代码开发的模型。该目标语言标签例如可以是html标签或css标签。

在操作S240，根据全局页面样式和预设的前端布局框架，将多个目标语言标签进行汇总，生成对应前端页面的页面布局的目标语言代码，其中，目标语言包含html语言和css语言。

该前端布局框架例如可以是Flex或Element-ui。

通过本公开的实施例，在获取到拟定开发的前端页面的页面图片时，首先为页面图片配置全局页面样式，然后使用智能模型对页面图片进行分析，得到多个目标语言标签。最后根据全局页面样式和预设的前端布局框架，生成对应前端页面的页面布局的目标语言代码，例如html、css代码。通过这种方式，帮助前端开发人员专注开发前端业务逻辑，仅需投入少量精力在页面样式开发上。也就帮助前端开发人员大量减少了页面布局开发的工作量，降低了前端界面的开发能力门槛。

图3示意性示出了根据本公开实施例获取页面图片的流程图。

如图3所示，在本公开实施例中，上述操作S210获取拟定开发的前端页面的页面图片，可以包括操作S311或者操作S312。

在操作S311，通过画图工具对拟定开发的前端页面进行绘制，生成页面图片。

在操作S312，绘制原始图片，将原始图片通过文字识别工具进行识别，生成页面图片。

也就是说，获取到的前端页面的页面图片，既可以由使用者(例如业务人员或者产品人员)使用电脑中的画图工具进行绘图而生成，还可以直接由使用者通过手绘画图再通过文字识别工具ocr而生成。

在本公开实施例中，上述操作S220的全局页面样式包括：页面图片的整体宽度、整体高度、最小宽度、填充信息、字体类型、字体大小和行高。例如，可以通过设置如下Style内容，为页面图片配置全局页面样式：

图4示意性示出了根据本公开实施例生成多个目标语言标签的流程图。

如图4所示，在本公开实施例中，上述操作S230利用预先训练的智能模型，生成页面图片对应的多个目标语言标签，可以进一步包括操作S431～操作S432。

在操作S431，利用预先训练的智能模型，识别出页面图片中的多个元素形状。

在操作S432，根据智能模型中预设的参数配置表，将多个元素形状生成对应的多个目标语言标签。

该智能模型例如可以是通过Python代码开发的模型，模型中可以由使用者预先设定的参数配置表，以进行参数配置。

通过本公开的实施例，智能模型的处理分为元素形状识别和标签转换两大步骤。该智能模型允许使用者自行进行参数配置，以满足不同的业务场景需求。

图5示意性示出了根据图4生成多个html标签的原理图。

具体而言，如图5所示，上述操作S431的多个元素形状包括常规矩形、圆角矩形、椭圆形、正方形、三角形、横线；上述操作S432根据智能模型中预设的参数配置表，将多个元素形状生成对应的多个目标语言标签，包括：

在元素形状为常规矩形时，对应的目标语言标签为分区标签；

在元素形状为圆角矩形时，对应的目标语言标签为输入框标签；

在元素形状为椭圆形时，对应的目标语言标签为按钮标签；

在元素形状为正方形时，对应的目标语言标签为图片标签；

在元素形状为三角形时，对应的目标语言标签为超链接标签；

在元素形状为横线时，对应的目标语言标签为文本标签。

请继续参阅图5，以目标语言标签是html标签为例，参数配置表可以如下设置：

(1)矩形代表容器，对应html标签为＜div>；

(2)圆角矩形代表输入框，对应html标签为＜input>；

(3)椭圆代表按钮，对应html标签为＜button>；

(4)正方形代表图片，正方形内文字描述为图片地址，对应html标签为＜img>；

(5)三角代表超链接，三角内文字描述为超链接地址，对应html标签为＜a>；

(6)横线代表段落文本，横线上文本描述为文本内容，对应html标签为＜p>。

在一些实施例中，上述操作S432将多个元素形状生成对应的多个目标语言标签，还包括：为不同的目标语言标签配置不同的颜色。也就是说，使用者还可配置不同图案的颜色对应不同的标签内容。

图6示意性示出了根据本公开实施例生成html标签和css标签的流程图。

如图6所示，在本公开实施例中，上述操作S432将多个元素形状生成对应的多个目标语言标签，还可以进一步包括操作S601～操作S603。

在操作S601，将多个元素形状生成对应的多个html标签。

在操作S602，将多个html标签进行汇总。

在操作S603，根据全局页面样式，对汇总后的多个html标签进行调整，生成对应的多个css标签。

例如，在生成html标签和css标签时，先将各个元素形状生成对应的html标签，再根据各个元素形状的比例大小(例如长度和宽度)，按照全局页面样式中预先定义的整体宽度、整体高度、最小宽度等要求，按整体比例生成各个元素形状对应的css标签。

接下来，根据全局页面样式和预设的前端布局框架(例如现今比较流行的Flex或Element-ui)，自动生成对应前端页面的页面布局的html、css代码。

例如，通过前端布局框架flex的布局技术，可根据所预定的最外框体大小，自适应内部组件大小。最终输出的html、css代码可供前端开发人员使用。当然，后续还可根据业务相关额外需求进行改造。

综上所述，本公开实施例提出的前端布局代码自动生成方法，前端人员可通过画图的方式将页面开发出来，并免去了页面布局的工作量。大大的提升了前端开发效率，降低了前端开发人员入门门槛。并且，还允许使用者自行进行参数配置，以满足不同的业务场景需求。

以上只是示例性说明，本公开不限于此。例如，在一些实施例中，还可以通过设计一个软件程序，将画图、样式配置、模型集成，用户可以直接在程序UI界面中进行设计，最终产出html、css代码。

基于上述前端布局代码自动生成方法，本公开还提供了一种前端布局代码自动生成装置。以下将结合图7对该装置进行详细描述。

图7示意性示出了根据本公开实施例的前端布局代码自动生成装置的结构框图。

如图7所示，该实施例的前端布局代码自动生成装置700包括页面图片获取模块710、页面样式配置模块720、语言标签生成模块730和前端代码生成模块740。

页面图片获取模块710，用于获取拟定开发的前端页面的页面图片。在一实施例中，页面图片获取模块710可以用于执行前文描述的操作S210，在此不再赘述。

页面样式配置模块720，用于为页面图片配置全局页面样式。在一实施例中，页面样式配置模块720可以用于执行前文描述的操作S220，在此不再赘述。

语言标签生成模块730，用于利用预先训练的智能模型，生成页面图片对应的多个目标语言标签。在一实施例中，语言标签生成模块730可以用于执行前文描述的操作S230，在此不再赘述。

前端代码生成模块740，用于根据全局页面样式和预设的前端布局框架，将多个目标语言标签进行汇总，生成对应前端页面的页面布局的目标语言代码，其中，目标语言包含html语言和css语言。在一实施例中，前端代码生成模块740可以用于执行前文描述的操作S240，在此不再赘述。

根据本公开的实施例，页面图片获取模块710、页面样式配置模块720、语言标签生成模块730和前端代码生成模块740中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，页面图片获取模块710、页面样式配置模块720、语言标签生成模块730和前端代码生成模块740中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上***、基板上的***、封装上的***、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，页面图片获取模块710、页面样式配置模块720、语言标签生成模块730和前端代码生成模块740中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图8示意性示出了根据本公开实施例的适于实现前端布局代码自动生成方法的电子设备的方框图。

如图8所示，根据本公开实施例的电子设备800包括处理器801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。处理器801例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器801还可以包括用于缓存用途的板载存储器。处理器801可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 803中，存储有电子设备800操作所需的各种程序和数据。处理器801、ROM802以及RAM 803通过总线804彼此相连。处理器801通过执行ROM 802和/或RAM 803中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 802和RAM 803以外的一个或多个存储器中。处理器801也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备800还可以包括输入/输出(I/O)接口805，输入/输出(I/O)接口805也连接至总线804。电子设备800还可以包括连接至I/O接口805的以下部件中的一项或多项：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/***中所包含的；也可以是单独存在，而未装配入该设备/装置/***中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的前端布局代码自动生成方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 802和/或RAM 803和/或ROM 802和RAM 803以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机***中运行时，该程序代码用于使计算机***实现本公开实施例所提供的前端布局代码自动生成方法。

在该计算机程序被处理器801执行时执行本公开实施例的***/装置中限定的上述功能。根据本公开的实施例，上文描述的***、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分809被下载和安装，和/或从可拆卸介质811被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被处理器801执行时，执行本公开实施例的***中限定的上述功能。根据本公开的实施例，上文描述的***、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (11)

1.一种前端布局代码自动生成方法，包括：

获取拟定开发的前端页面的页面图片；

为所述页面图片配置全局页面样式；

利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；

根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。

2.根据权利要求1所述的方法，其中，所述获取拟定开发的前端页面的页面图片，包括：

通过画图工具对所述拟定开发的前端页面进行绘制，生成页面图片；或者

绘制原始图片，将所述原始图片通过文字识别工具进行识别，生成页面图片。

3.根据权利要求1所述的方法，其中，所述全局页面样式包括：

所述页面图片的整体宽度、整体高度、最小宽度、填充信息、字体类型、字体大小和行高。

4.根据权利要求1所述的方法，其中，所述利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签，包括：

利用预先训练的智能模型，识别出所述页面图片中的多个元素形状；

根据所述智能模型中预设的参数配置表，将所述多个元素形状生成对应的多个目标语言标签。

5.根据权利要求4所述的方法，其中，所述多个元素形状包括常规矩形、圆角矩形、椭圆形、正方形、三角形、横线；

根据所述智能模型中预设的参数配置表，将所述多个元素形状生成对应的多个目标语言标签，包括：

在所述元素形状为常规矩形时，对应的目标语言标签为分区标签；

在所述元素形状为圆角矩形时，对应的目标语言标签为输入框标签；

在所述元素形状为椭圆形时，对应的目标语言标签为按钮标签；

在所述元素形状为正方形时，对应的目标语言标签为图片标签；

在所述元素形状为三角形时，对应的目标语言标签为超链接标签；

在所述元素形状为横线时，对应的目标语言标签为文本标签。

6.根据权利要求1所述的方法，其中，生成所述页面图片对应的多个目标语言标签，还包括：

为不同的目标语言标签配置不同的颜色。

7.根据权利要求1所述的方法，其中，将所述多个元素形状生成对应的多个目标语言标签，还包括：

将所述多个元素形状生成对应的多个html标签；

将所述多个html标签进行汇总；

根据所述全局页面样式，对汇总后的多个html标签进行调整，生成对应的多个css标签。

8.一种前端布局代码自动生成装置，包括：

页面图片获取模块，用于获取拟定开发的前端页面的页面图片；

页面样式配置模块，用于为所述页面图片配置全局页面样式；

语言标签生成模块，用于利用预先训练的智能模型，生成所述页面图片对应的多个目标语言标签；

前端代码生成模块，用于根据所述全局页面样式和预设的前端布局框架，将所述多个目标语言标签进行汇总，生成对应所述前端页面的页面布局的目标语言代码，其中，所述目标语言包含html语言和css语言。

9.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个计算机程序，

其特征在于，所述一个或多个处理器执行所述一个或多个计算机程序以实现根据权利要求1～7中任一项所述方法的步骤。

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

11.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现根据权利要求1～7中任一项所述方法的步骤。