基于图像检测的前端代码模板生成方法、装置和介质与流程

本公开的实施例涉及计算机领域，具体涉及基于图像检测的前端代码模板生成方法、装置和介质。

背景技术：

1、前端代码的生成包括：静态代码骨架模板与动态配置数据；其中，静态代码骨架模板为：若干页面、组件类型的代码模板，存储在云端或本地；动态配置数据为：带有其他信息(接口信息、字段信息等)的json配置数据，存储在数据库中，可通过后端接口取得。目前，对于前端代码模板的选择，通常采用的方式为：直接人工根据业务类型选择静态模板，或接收多模态输入参数，使用包括图像位置检测等技术动态匹配并整合组件模板。

2、然而，采用上述方式通常会存在以下技术问题：人工选择静态模板，灵活度较差，覆盖范围较小，每一种业务类型都必须事先写好特定的模板文件；通过图像检测技术匹配组件模板，目前多是通过计算与ui组件知识库中的组件图像相似度，得到页面的基础ui布局，但不能得到组件之间的动态交互操作与功能联动关系，生成的页面模板不能直接投入使用，还需要开发人员后续继续进行功能逻辑开发，造成代码生成工具效用下降。

3、该背景技术部分中所公开的以上信息仅用于增强对本发明构思的背景的理解，并因此，其可包含并不形成本国的本领域普通技术人员已知的现有技术的信息。

技术实现思路

1、本公开的内容部分用于以简要的形式介绍构思，这些构思将在后面的具体实施方式部分被详细描述。本公开的内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征，也不旨在用于限制所要求的保护的技术方案的范围。

2、本公开的一些实施例提出了基于图像检测的前端代码模板生成方法、装置、电子设备和计算机可读介质，来解决以上背景技术部分提到的技术问题中的一项或多项。

3、第一方面，本公开的一些实施例提供了一种基于图像检测的前端代码模板生成方法，该方法包括：对目标页面图进行图像检测，以生成页面图检测信息，其中，上述页面图检测信息包括：页面检测图；确定上述页面检测图与预先建立的基础组件图像库中的每个基础组件图像之间的图像相似度，得到图像相似度组；将上述图像相似度组中最大图像相似度对应的基础组件确定为目标基础组件；以映射对象的形式，将上述目标基础组件与对应的位置坐标信息存储至临时内存中；响应于检测到用户在用户交互页面上对于选框模式的点击操作，监听鼠标在上述用户交互页面上目标页面图的框选操作，以确定框选操作对应的圈定范围；通过截图工具，截取上述圈定范围对应的圈定图像，以及将上述圈定图像存储至上述临时内存中；确定上述圈定图像与预先建立的组件图像资源库中的每个组件图像之间的相似度，得到相似度组；根据上述相似度组，确定目标组件图像；比对上述圈定范围与上述位置坐标信息；响应于确定上述圈定范围包含上述位置坐标信息对应的坐标范围，确定上述圈定范围内涵盖的全部坐标信息与对应的组件信息；根据上述目标组件图像、上述全部坐标信息与对应的组件信息，生成对应上述目标页面图的前端页面代码模板文本。

4、第二方面，本公开的一些实施例提供了一种基于图像检测的前端代码模板生成装置，装置包括：检测单元，被配置成对目标页面图进行图像检测，以生成页面图检测信息，其中，上述页面图检测信息包括：页面检测图；第一确定单元，被配置成确定上述页面检测图与预先建立的基础组件图像库中的每个基础组件图像之间的图像相似度，得到图像相似度组；第二确定单元，被配置成将上述图像相似度组中最大图像相似度对应的基础组件确定为目标基础组件；存储单元，被配置成以映射对象的形式，将上述目标基础组件与对应的位置坐标信息存储至临时内存中；监听单元，被配置成响应于检测到用户在用户交互页面上对于选框模式的点击操作，监听鼠标在上述用户交互页面上目标页面图的框选操作，以确定框选操作对应的圈定范围；截取单元，被配置成通过截图工具，截取上述圈定范围对应的圈定图像，以及将上述圈定图像存储至上述临时内存中；第三确定单元，被配置成确定上述圈定图像与预先建立的组件图像资源库中的每个组件图像之间的相似度，得到相似度组；第四确定单元，被配置成根据上述相似度组，确定目标组件图像；比对单元，被配置成比对上述圈定范围与上述位置坐标信息；第五确定单元，被配置成响应于确定上述圈定范围包含上述位置坐标信息对应的坐标范围，确定上述圈定范围内涵盖的全部坐标信息与对应的组件信息；生成单元，被配置成根据上述目标组件图像、上述全部坐标信息与对应的组件信息，生成对应上述目标页面图的前端页面代码模板文本。

5、第三方面，本公开的一些实施例提供了一种电子设备，包括：一个或多个处理器；存储装置，其上存储有一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现上述第一方面任一实现方式所描述的方法。

6、第四方面，本公开的一些实施例提供了一种计算机可读介质，其上存储有计算机程序，其中，程序被处理器执行时实现上述第一方面任一实现方式所描述的方法。

7、本公开的上述各个实施例具有如下有益效果：通过本公开的一些实施例的基于图像检测的前端代码模板生成方法，改进传统的使用静态模板自动生成代码的方案，接收用户传入的需求原型图或ui设计图，在预生成的组件模板知识库中整合代码模板。此外，设计一套存储了组件代码与ui图像映射关系的资源库，该资源库同时存储了多种前端封装的复杂组件，并和这些组件呈现出的ui外观图像建立映射。用户通过图像选择工具在输入图像上继续圈定缩小范围，比对该资源库中存储的组件图像，在相似度排名较高的前几个复杂组件图像中选择一种，从而对该区域的代码模板进行更精确的替换，以提升通过模板自动生成代码结果的准确度和有效性。首先，对目标页面图进行图像检测，以生成页面图检测信息。其中，上述页面图检测信息包括：页面检测图。由此，便于检测出上述目标页面图中需要替换的图像。接着，确定上述页面检测图与预先建立的基础组件图像库中的每个基础组件图像之间的图像相似度，得到图像相似度组；将上述图像相似度组中最大图像相似度对应的基础组件确定为目标基础组件；以映射对象的形式，将上述目标基础组件与对应的位置坐标信息存储至临时内存中；响应于检测到用户在用户交互页面上对于选框模式的点击操作，监听鼠标在上述用户交互页面上目标页面图的框选操作，以确定框选操作对应的圈定范围；通过截图工具，截取上述圈定范围对应的圈定图像，以及将上述圈定图像存储至上述临时内存中；确定上述圈定图像与预先建立的组件图像资源库中的每个组件图像之间的相似度，得到相似度组；根据上述相似度组，确定目标组件图像。比对上述圈定范围与上述位置坐标信息。由此，可以比对该资源库中存储的组件图像，在相似度排名较高的前几个复杂组件图像中选择一种，从而对该区域的代码模板进行更精确的替换，以提升通过模板自动生成代码结果的准确度和有效性。最后，响应于确定上述圈定范围包含上述位置坐标信息对应的坐标范围，确定上述圈定范围内涵盖的全部坐标信息与对应的组件信息；根据上述目标组件图像、上述全部坐标信息与对应的组件信息，生成对应上述目标页面图的前端页面代码模板文本。由此，改进了传统的使用静态模板自动生成代码的方案，接收用户传入的需求原型图或ui设计图，在预生成的组件模板知识库中整合代码模板。

技术特征：

1.一种基于图像检测的前端代码模板生成方法，包括：

2.根据权利要求1所述的方法，其中，所述根据所述目标组件图像、所述全部坐标信息与对应的组件信息，生成对应所述目标页面图的前端页面代码模板文本，包括：

3.根据权利要求1所述的方法，其中，所述根据所述相似度组，确定目标组件图像，包括：

4.根据权利要求1所述的方法，其中，在所述确定所述圈定图像与预先建立的组件图像资源库中的每个组件图像之间的相似度，得到相似度组之前，所述方法还包括：

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

6.根据权利要求1所述的方法，其中，所述对目标页面图进行图像检测，以生成页面图检测信息，包括：

7.一种基于图像检测的前端代码模板生成装置，包括：

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

9.一种计算机可读介质，其上存储有计算机程序，其中，所述程序被处理器执行时实现如权利要求1-6中任一所述的方法。

技术总结
本公开的实施例公开了基于图像检测的前端代码模板生成方法、装置和介质。该方法的一具体实施方式包括：对目标页面图进行图像检测，以生成页面图检测信息；将图像相似度组中最大图像相似度对应的基础组件确定为目标基础组件；监听鼠标在用户交互页面上目标页面图的框选操作，以确定框选操作对应的圈定范围；通过截图工具，截取圈定范围对应的圈定图像；确定目标组件图像；确定圈定范围内涵盖的全部坐标信息与对应的组件信息；根据目标组件图像、全部坐标信息与对应的组件信息，生成前端页面代码模板文本。该实施方式改进了传统的使用静态模板自动生成代码的方案，接收用户传入的需求原型图或UI设计图，在预生成的组件模板知识库中整合代码模板。

技术研发人员：郑依然,黄葳,薛福明
受保护的技术使用者：国联证券股份有限公司
技术研发日：
技术公布日：2024/12/5