CN108304243A - 界面生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种界面生成方法、装置、计算机设备和存储介质。所述方法包括：接收上传的界面设计图像；对所述界面设计图像进行分割得到界面模块；获取与所述界面模块对应的模块代码以及与所述界面设计图像对应的基本界面代码；将所述模块代码与所述基本界面代码进行组装得到界面。采用本方法通过对界面设计图进行自动分割，从而得到对应的界面模块，从而可以获取到与界面模块对应的模块代码和与界面设计图像对应的基本界面代买，将模块代码和基本界面代码进行组装即可以得到界面，整个过程自动控制，提高了效率。

Description

界面生成方法、装置、计算机设备和存储介质

技术领域

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

背景技术

随着计算机技术的发展，前端框架层出不穷，各种框架各有优势，项目之间相互独立，因此，造成前端的项目基本的框架，结构不统一。通过编写html、js、css实现页面，对相同结构或类似的模块，通过手动复制，并将涉及的js、css放到公共文件中，实现内容的重复使用。

但这种方式需要前期对整体界面进行分析，实际执行过程中，通过手动方式，一方面效率低而且难以保证内容的一致性，另一方面重用性不强。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高界面生成效率的界面生成方法、装置、计算机设备和存储介质。

一种界面生成方法，所述方法包括：

接收上传的界面设计图像；

对所述界面设计图像进行分割得到界面模块；

获取与所述界面模块对应的模块代码以及与所述界面设计图像对应的基本界面代码；

将所述模块代码与所述基本界面代码进行组装得到界面。

在其中一个实施例中，所述对所述界面设计图像进行分割得到界面模块的步骤，包括：

识别所述界面设计图像中的文字，并记录每一文字的文字坐标；

识别所述界面设计图像中的线段，并记录每一线段的线段坐标；

根据所述文字坐标与所述线段坐标建立所述界面设计图像中的文字与对话框的关联关系，并记录与所述关联关系对应的界面模块；

根据所述界面模块对应的文字坐标和线段坐标对所述界面设计图像进行分割。

在其中一个实施例中，所述识别所述界面设计图像中的文字的步骤，包括：

查询所述界面设计图像中是否存在与文字库中的标准文字相匹配的文字；

如果不存在，则将所述界面设计图像输入至预设的机器识别模型中；

通过所述预设的机器识别模型识别所述界面设计图像中文字。

在其中一个实施例中，所述识别所述界面设计图像中的线段的步骤，包括：

根据canny边缘检测算法获取所述界面设计图像中的像素为线段像素的第一概率；

根据索贝尔算子边缘检测算法获取所述界面设计图像中的像素为线段像素的第二概率；

根据线段检测算法获取所述界面设计图像中的像素为线段像素的第三概率；

根据所述第一概率、所述第二概率以及所述第三概率计算得到综合概率；

若所述综合概率大于阈值，则将与所述综合概率对应的所述界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

在其中一个实施例中，所述根据所述文字坐标与所述线段坐标建立所述界面设计图像中的文字与对话框的关联关系的步骤，包括：

根据所述线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框；

计算所述文字坐标与所述对话框之间的距离；

若所述距离小于预设值，则建立所述对话框与所述文字坐标对应的文字的关联关系。

在其中一个实施例中，所述将所述模块代码与所述基本界面代码进行组装得到界面的步骤之后，包括：

对组装得到的界面的每一界面模块进行测试；

如果存在界面模块测试失败，则接收针对所述界面模块的模块代码的调整指令；

根据所述调整指令对所述界面模块的模块代码进行调整。

在其中一个实施例中，所述将所述模块代码与所述基本界面代码进行组装得到界面的步骤之后，包括：

将组装得到的界面进行存储；

所述接收上传的界面设计图像的步骤之后，还包括：

查询代码库中是否存在与所述界面设计图像对应的界面；

如果存在，则获取所述界面并输出；

如果不存在，则继续对所述界面设计图像进行分割得到界面模块。

一种界面生成装置，所述装置包括：

接收模块，用于接收上传的界面设计图像；

分割模块，用于对所述界面设计图像进行分割得到界面模块；

代码获取模块，用于获取与所述界面模块对应的模块代码以及与所述界面设计图像对应的基本界面代码；

组装模块，用于将所述模块代码与所述基本界面代码进行组装得到界面。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。

上述界面生成方法、装置、计算机设备和存储介质，通过对界面设计图进行自动分割，从而得到对应的界面模块，从而可以获取到与界面模块对应的模块代码和与界面设计图像对应的基本界面代买，将模块代码和基本界面代码进行组装即可以得到界面，整个过程自动控制，提高了效率。

附图说明

图1为一个实施例中界面生成方法的应用场景图；

图2为一个实施例中界面生成方法的流程示意图；

图3为一实施例中的界面设计图像的示意图；

图4为一个实施例中界面生成装置的结构框图；

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

具体实施方式

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

本申请提供的界面生成方法，可以应用于如图1所示的应用环境中。其中，UI设计终端与界面生成终端通过网络进行通信。UI设计终端可以将用户设计完成的界面设计图像发送至界面生成终端，界面生成终端对所接收到的界面设计图像进行分割得到界面模块，并获取到终端中已经存储的或者是共享数据库中已经存储的模块代码和基本界面代码，通过该模块代码和基本界面代码进行组装得到界面。其中，终端可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。

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

S202：接收上传的界面设计图像。

具体地，界面设计图像是UI设计人员根据应用程序的功能以及视觉美化进行设计的。在设计完成后，可以将该界面设计图像发送到界面生成终端，从而界面生成终端可以基于对该界面设计图像的分析生成对应的界面。

S204：对界面设计图像进行分割得到界面模块。

具体地，结合图3，图3为一实施例中的界面设计图像的示意图，在其他的实施例中，该界面设计图像可以为其他的形式。界面生成终端在接收到该界面设计图像后，对该界面设计图像进行分割，结合图3，例如可以将该界面设计图像按照功能进行分割，得到“账号模块”、“密码模块”以及“登录按钮模块”等。

界面模块是指形成界面的最小功能单位，通过该些功能单位可以组装形成界面，且共享数据库中存储有与该最小功能单位对应的代码。

S206：获取与界面模块对应的模块代码以及与界面设计图像对应的基本界面代码。

具体地，将界面设计图像划分为多个界面模块后，则可以从共享数据库或者终端的存储空间中获取到对应的模块代码。再根据界面设计图像的名称等标识从共享数据库或者终端的存储空间中获取到对应的基本界面代码。

S208：将模块代码与基本界面代码进行组装得到界面。

具体地，若获取到模块代码和基本界面代码后，则可以将模块代码插入到基本界面代码中进行组装，从而可以得到界面的代码，从而可以实现界面的显示等。

具体地，结合图3，其中，首先UI设计人员设计该界面设计图像，并将界面设计图像传到界面生成终端中，其次界面生成终端获取到该界面设计图像后，对该界面设计图像进行分割，例如分割成“账号模块”“密码模块”“登录按钮”等，然后从代码库中获取到与这几个模块对应的模块代码，以及登录界面的基本界面代码，将模块代码添加到基本界面代码中，即可以组装形成该界面。代码库可以存储在共享数据库中，其中可以汇集公用资源(css\js\组件\模板等)，封装公共方法供以调用，这样可以提高代码重用率，通过设置参数，选择模板，即可快速实现效果，便于优化，如后期优化时，只需对已下载的模块进行优化即可，另一方面，便于团队项目管理和学习，只需针对该模块涉及的文件，即可了解相关的应用。

上述界面生成方法，通过对界面设计图进行自动分割，从而得到对应的界面模块，从而可以获取到与界面模块对应的模块代码和与界面设计图像对应的基本界面代买，将模块代码和基本界面代码进行组装即可以得到界面，整个过程自动控制，提高了效率。

在其中一个实施例中，对界面设计图像进行分割得到界面模块的步骤，可以包括：识别界面设计图像中的文字，并记录每一文字的文字坐标；识别界面设计图像中的线段，并记录每一线段的线段坐标；根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系，并记录与关联关系对应的界面模块；根据界面模块对应的文字坐标和线段坐标对界面设计图像进行分割。

具体地，在对界面设计图像进行分割的时候，需要充分考虑到界面设计图像中的文字和线条，因此可以通过文字识别对图像中的文字进行识别，并通过线段识别算法对界面设计图像中的线段进行识别，例如，结合上述图3，可以识别界面设计图像中的文字例如“注册账号”“找回密码”“登录”，并确定该些文字的坐标，然后识别图像中的线段，并获取线段的坐标，例如“账号框”的线段、“密码框”的线段、“登录按钮”的线段，并记录该些线段的坐标，根据该些线段的线段坐标和文字坐标的位置关系，建立文字和对话框的关联关系，从而可以获得到一个个的界面模块，根据该些界面模块对图像进行分割即可以得到对应的界面模块。

其中在记录完成线段坐标和文字坐标的关联关系后，根据线段坐标和文字坐标进行分割，其中可以是根据线段坐标进行分割，即只分割出对话框，也可以是根据线段坐标和文字坐标进行分割，即通过线段坐标和文字坐标得到包含该线段和文字的一个区域，并根据该区域的边缘对该界面设计图像进行分割。

上述实施例中，通过对界面设计图像中的文字和线段进行识别以对界面设计图像进行分割得到不同的界面模块，使得分割更加准确，为后续界面的形成奠定基础。

在其中一个实施例中，识别界面设计图像中的文字的步骤，可以包括：查询界面设计图像中是否存在与文字库中的标准文字相匹配的文字；如果不存在，则将界面设计图像输入至预设的机器识别模型中；通过预设的机器识别模型识别界面设计图像中文字。

具体地，为了对界面设计图像中的文字进行准确的识别，通过两步识别方式进行，一个是预存的文字库，另外一个是机器识别模型。其中预存的文字库中存储有界面设计图像中经常使用到的文字，在对界面设计图像中的文字进行识别时，可以按照预设步长首先将该界面设计图像分割为多个图像块，将每一个图像块中的文字与文字库中的文字进行匹配，如果匹配率大于预设值，则输出该文字以及文字坐标，如果不存在文字，则继续将图像块输入至机器识别模型中进行识别，直至机器识别模型识别完成，则记录机器识别模型所识别出的文字以及对应的文字坐标。

其中，文字库中是存储有小量的界面设计图像中常用文字的库，而机器识别模型中则存储有大量的文字，是界面生成终端预先根据已有的界面设计图像和文字训练得到的，或者机器学习模型可以是根据新华字典或者预设的字典库训练得到的，其中涵盖有大量的文字、符号等。之所以首先通过文字库进行识别，是为了将界面设计图像中的大部分的文字识别出来，然后通过机器识别模型进行精确的识别，由于机器识别模型的运行效率高，因此即使存在大量的识别文字也不会对效率造成影响。

上述实施例中，首先按照预设的步长对界面设计图像首先进行预分割，将分割的图像块与本地文字库中的文字进行匹配，若匹配对大于预设值，则认为该图像块中为文字，并输出对应的文字坐标，且将没有识别为文字的图像块输入至机器学习模型，以进行进一步地匹配，保证可以准确地识别出图像块中的文字。

在其中一个实施例中，识别界面设计图像中的线段的步骤，可以包括：根据canny边缘检测算法获取界面设计图像中的像素为线段像素的第一概率；根据索贝尔算子边缘检测算法获取界面设计图像中的像素为线段像素的第二概率；根据线段检测算法获取界面设计图像中的像素为线段像素的第三概率；根据第一概率、第二概率以及第三概率计算得到综合概率；若综合概率大于阈值，则将与综合概率对应的界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

具体地，canny边缘检测算法能够尽可能多地标识出界面设计图像中的实际边缘，漏检真实边缘的概率和误检非边缘的概率都尽可能小。首先canny边缘检测算法生成对应的边缘图C(X)，其中X表示界面设计图像，然后通过高斯滤波来平滑界面设计图像得到K(C(X))，然后再通过拉普拉斯平滑K(C(X))得到Kl(C(X))，得到界面设计图像中的像素为线段像素的第一概率M。

索贝尔算子边缘检测算法主要用作边缘检测。在技术上，它是一离散性差分算子，用来运算图像亮度函数的梯度之近似值。在图像的任何一点使用此算子，将会产生对应的梯度矢量或是其法矢量，索贝尔算子有两个，一个是检测水平边缘的；另一个是检测垂直边缘的，由于索贝尔算子对于像素的位置的影响做了加权，因此可以降低边缘模糊程度，因此效果更好。首先索贝尔算子边缘检测算法生成对应的边缘图S(X)，其中X表示界面设计图像，然后通过高斯滤波来平滑待标记图像得到K(S(X))，然后再通过拉普拉斯平滑K(S(X))得到Kl(S(X))，得到界面设计图像中的像素为线段像素的第二概率N。

LSD线段检测算法可以识别界面设计图像中的线段，首先LSD线段检测算法生成对应的边缘图L(X)，其中X表示界面设计图像，然后通过高斯滤波来平滑界面设计图像得到K(L(X))，然后再通过拉普拉斯平滑K(L(X))得到Kl(L(X))，得到界面设计图像中的像素为线段像素的第三概率O。

具体地，根据第一概率M、第二概率N以及第三概率O计算得到综合概率P，例如可以预先设置canny边缘检测算法结果的权值m，索贝尔算子边缘检测算法结果的权值n以及LSD线段检测算法的结果的权值o，从而综合概率P＝M×m+N×n+O×o。可选地，若m＝n＝o＝1/3，综合概率P＝(M+N+O)/3。

具体地，若综合概率大于第二阈值，则认为与综合概率对应的界面设计图像中的像素为线段像素。其中第二阈值可以是预先设置的，例如其可以为80％、90％、85％等，在此不对第二阈值进行限制。

其中对界面设计图像中综合概率大于第二阈值时，可以将该界面设计图像中的像素标记为线段像素，例如可以通过黄色进行标记，这样线路越亮，该区域包含的线段的概率越高。

上述实施例中，通过canny边缘检测算法、索贝尔算子边缘检测算法以及LSD线段检测算法对界面设计图像中的线段进行识别，正确率高。

在其中一个实施例中，根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系的步骤，可以包括：根据线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框；计算文字坐标与对话框之间的距离；若距离小于预设值，则建立对话框与文字坐标对应的文字的关联关系。

具体地，由于界面设计图像中的线段一般为对话框的边缘，因此在识别出界面设计图像中的线段后，可以通过判断所识别出的线段是否存在交点将线段进行分组，从而一组的线段可以构成一个对话框。因此首先根据线段坐标进行分组，即将存在相同坐标的线段分为一组，从而可以将存在交叉关系的线段分为一组，根据一组的线段可以生成对话框，判断对话框与文字坐标的距离，例如文字到对话框的中心点的距离，若该距离小于预设值，则建立对话框与文字坐标的对应的文字的关联关系。

其中，对话框与文字坐标的距离包含两种情况，一种是文字在对话框中，例如图3中示出的“登录按钮”，此时文字与对话框的距离小于预设值；另外一种是文字不在对话框内，如图3中的“账号”和“密码”，此时需要判断文字的中心到对话框的中心的距离与预设值的大小即可。

其中所识别出来的文字也可以根据文字的距离预先进行分组，将距离小于预设值的文字则划分为一组，并根据所形成的文字组的中心位置与对话框的中心位置来建立文字与对话框的关联关系。

上述实施例中，通过判断是否存在相同坐标来确定所识别的线条的关系，并根据所确定的线条组的对话框与文字之间的距离来建立对话框与文字的关联关系，从而可以准确地将界面设计图像划分为界面模块。

在其中一个实施例中，将模块代码与基本界面代码进行组装得到界面的步骤之后，还可以包括：对组装得到的界面的每一界面模块进行测试；如果存在界面模块测试失败，则接收针对界面模块的模块代码的调整指令；根据调整指令对界面模块的模块代码进行调整。

具体地，在实际应用中，所组装得到的界面需要进行测试，以防止所组装得到的界面存在问题，例如可以对组装得到的界面的每一界面模块进行测试，以及对整个界面的整体功能进行测试，如果存在某一个界面模块测试失败，则可以输出提示，例如若图3中的账号模块测试失败，则可以直接输出账号模块测试失败，而不需要用户去一个个排查得到哪一个模块测试失败，从而可以提高工作效率，其中该提示还可以通过邮箱或微信等发生发送给对应的测试人员，测试人员针对该界面模块测试失败的原因对模块代码进行调整，即测试人员可以向界面生成终端发送模块代码调整指令，根据该模块代码调整指令对界面模块的模块代码进行调整，并继续进行测试，直至所组装得到的界面测试成功。

其中对代码的调整包括对代码的增加、改变和减少，例如可以对接收针对该界面的代码增加指令，并根据代码增加指令在该界面中添加新的模块，如上述的“记住密码”模块，“自动登录”模块等。

上述实施例中，将组装生成的界面下载下来，然后进行测试，如果某一界面模块测试失败，则接收针对该模块的代码的调整指令，根据该代码的调整指令对该模块的代码进行调整，并将调整后的界面进行存储，引入人工干预，提高界面形式的多样化。

在其中一个实施例中，将模块代码与基本界面代码进行组装得到界面的步骤之后，可以包括：将组装得到的界面进行存储。从而接收上传的界面设计图像的步骤之后，还可以包括：查询代码库中是否存在与界面设计图像对应的界面；如果存在，则获取界面并输出；如果不存在，则继续对界面设计图像进行分割得到界面模块。

具体地，为了实现代码库的扩充，可以将生成的界面进行存储，从而在接收到界面设计图像后，可以查询代码库中是否存在与该界面设计图像对应的已有界面，如果存在，则可以直接获取到该界面并输出，如果仅是对已有界面的部分改动，例如增加或减少，则仅需要对增加的模块或减少的模块的模块代码进行改动，使得效率提高。其中查询代码库中是否存在与该界面设计图像对应的已有界面的步骤，可以是通过界面名称进行查询，或者可以将接收到的界面设计图像与已有界面的界面设计图像进行比对，若匹配率大于预设值，则至获取到不相匹配的部分，并从代码库中获取到该不相匹配的部分的代码，将获取到的不相匹配的部分的代码插入到从代码库中获取的界面中以得到新的界面。

其中，如果上传的UI界面设计图像与代码库中存在的界面的区别仅在于增加了一个界面模块，则只需要获取到该界面模块在界面设计图像中的坐标，并根据该界面模块的名称从代码库中获取模块代码，将所获取的模块代码根据所述界面模块在界面设计图像中的坐标插入到与界面设计图像对应的界面中以生成新的界面即可。

上述实施例中，将新生成的代码插入到代码库中实现了代码库的扩充，且在后续接收到界面生成代码时，可以直接与代码库中的现有界面进行匹配，若匹配成功，则可以直接从代码库中获取到该界面，不需要再对界面设计图像进行分割等，提高了界面生成效率。

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

在一个实施例中，如图4所示，提供了一种界面生成装置，包括：接收模块100、分割模块200、代码获取模块300和组装模块400，其中：

接收模块100，用于接收上传的界面设计图像。

分割模块200，用于对界面设计图像进行分割得到界面模块。

代码获取模块300，用于获取与界面模块对应的模块代码以及与界面设计图像对应的基本界面代码。

组装模块400，用于将模块代码与基本界面代码进行组装得到界面。

在其中一个实施例中，分割模块200可以包括：

第一识别单元，用于识别界面设计图像中的文字，并记录每一文字的文字坐标。

第二识别单元，用于识别界面设计图像中的线段，并记录每一线段的线段坐标。

关联关系建立单元，用于根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系，并记录与关联关系对应的界面模块。

分割单元，用于根据界面模块对应的文字坐标和线段坐标对界面设计图像进行分割。

在其中一个实施例中，第一识别单元可以包括：

查询子单元，用于查询界面设计图像中是否存在与文字库中的标准文字相匹配的文字。

输入子单元，用于如果不存在，则将界面设计图像输入至预设的机器识别模型中。

机器识别子单元，用于通过预设的机器识别模型识别界面设计图像中文字。

在其中一个实施例中，第二识别单元可以包括：

第一检测子单元，用于根据canny边缘检测算法获取界面设计图像中的像素为线段像素的第一概率。

第二检测子单元，用于根据索贝尔算子边缘检测算法获取界面设计图像中的像素为线段像素的第二概率。

第三检测子单元，用于根据线段检测算法获取界面设计图像中的像素为线段像素的第三概率。

概率计算子单元，用于根据第一概率、第二概率以及第三概率计算得到综合概率。

生成子单元，用于若综合概率大于阈值，则将与综合概率对应的界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

在其中一个实施例中，关联关系建立单元可以包括：

对话框生成子单元，用于根据线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框。

距离计算子单元，用于计算文字坐标与对话框之间的距离。

关联关系建立子单元，用于若距离小于预设值，则建立对话框与文字坐标对应的文字的关联关系。

在其中一个实施例中，装置还可以包括：

测试模块，用于在将模块代码与基本界面代码进行组装得到界面之后，对组装得到的界面的每一界面模块进行测试。

调整指令接收模块，用于如果存在界面模块测试失败，则接收针对界面模块的模块代码的调整指令。

调整模块，用于根据调整指令对界面模块的模块代码进行调整。

在其中一个实施例中，装置还可以包括：

存储模块，用于在将模块代码与基本界面代码进行组装得到界面之后，将组装得到的界面进行存储。

查询模块，用于在接收上传的界面设计图像之后，查询代码库中是否存在与界面设计图像对应的界面。

组装模块还用于如果存在，则获取界面并输出；如果不存在，则继续对界面设计图像进行分割得到界面模块。

关于界面生成装置的具体限定可以参见上文中对于界面生成方法的限定，在此不再赘述。上界面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

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

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

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时可以实现以下步骤：接收上传的界面设计图像；对界面设计图像进行分割得到界面模块；获取与界面模块对应的模块代码以及与界面设计图像对应的基本界面代码；将模块代码与基本界面代码进行组装得到界面。

在一个实施例中，处理器执行计算机程序时所实现的对界面设计图像进行分割得到界面模块的步骤，可以包括：识别界面设计图像中的文字，并记录每一文字的文字坐标；识别界面设计图像中的线段，并记录每一线段的线段坐标；根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系，并记录与关联关系对应的界面模块；根据界面模块对应的文字坐标和线段坐标对界面设计图像进行分割。

在一个实施例中，处理器执行计算机程序时所实现的识别界面设计图像中的文字的步骤，可以包括：查询界面设计图像中是否存在与文字库中的标准文字相匹配的文字；如果不存在，则将界面设计图像输入至预设的机器识别模型中；通过预设的机器识别模型识别界面设计图像中文字。

在一个实施例中，处理器执行计算机程序时所实现的识别界面设计图像中的线段的步骤，可以包括：根据canny边缘检测算法获取界面设计图像中的像素为线段像素的第一概率；根据索贝尔算子边缘检测算法获取界面设计图像中的像素为线段像素的第二概率；根据线段检测算法获取界面设计图像中的像素为线段像素的第三概率；根据第一概率、第二概率以及第三概率计算得到综合概率；若综合概率大于阈值，则将与综合概率对应的界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

在一个实施例中，处理器执行计算机程序时所实现的根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系的步骤，可以包括：根据线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框；计算文字坐标与对话框之间的距离；若距离小于预设值，则建立对话框与文字坐标对应的文字的关联关系。

在一个实施例中，处理器执行计算机程序时所实现的将模块代码与基本界面代码进行组装得到界面的步骤之后，可以包括：对组装得到的界面的每一界面模块进行测试；如果存在界面模块测试失败，则接收针对界面模块的模块代码的调整指令；根据调整指令对界面模块的模块代码进行调整。

在一个实施例中，处理器执行计算机程序时所实现的将模块代码与基本界面代码进行组装得到界面的步骤之后，可以包括：将组装得到的界面进行存储；处理器执行计算机程序时所实现的接收上传的界面设计图像的步骤之后，还包括：查询代码库中是否存在与界面设计图像对应的界面；如果存在，则获取界面并输出；如果不存在，则继续对界面设计图像进行分割得到界面模块。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：接收上传的界面设计图像；对界面设计图像进行分割得到界面模块；获取与界面模块对应的模块代码以及与界面设计图像对应的基本界面代码；将模块代码与基本界面代码进行组装得到界面。

在一个实施例中，计算机程序被处理器执行时所实现的对界面设计图像进行分割得到界面模块的步骤，可以包括：识别界面设计图像中的文字，并记录每一文字的文字坐标；识别界面设计图像中的线段，并记录每一线段的线段坐标；根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系，并记录与关联关系对应的界面模块；根据界面模块对应的文字坐标和线段坐标对界面设计图像进行分割。

在一个实施例中，计算机程序被处理器执行时所实现的识别界面设计图像中的文字的步骤，可以包括：查询界面设计图像中是否存在与文字库中的标准文字相匹配的文字；如果不存在，则将界面设计图像输入至预设的机器识别模型中；通过预设的机器识别模型识别界面设计图像中文字。

在一个实施例中，计算机程序被处理器执行时所实现的识别界面设计图像中的线段的步骤，可以包括：根据canny边缘检测算法获取界面设计图像中的像素为线段像素的第一概率；根据索贝尔算子边缘检测算法获取界面设计图像中的像素为线段像素的第二概率；根据线段检测算法获取界面设计图像中的像素为线段像素的第三概率；根据第一概率、第二概率以及第三概率计算得到综合概率；若综合概率大于阈值，则将与综合概率对应的界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

在一个实施例中，计算机程序被处理器执行时所实现的根据文字坐标与线段坐标建立界面设计图像中的文字与对话框的关联关系的步骤，可以包括：根据线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框；计算文字坐标与对话框之间的距离；若距离小于预设值，则建立对话框与文字坐标对应的文字的关联关系。

在一个实施例中，计算机程序被处理器执行时所实现的将模块代码与基本界面代码进行组装得到界面的步骤之后，可以包括：对组装得到的界面的每一界面模块进行测试；如果存在界面模块测试失败，则接收针对界面模块的模块代码的调整指令；根据调整指令对界面模块的模块代码进行调整。

在一个实施例中，计算机程序被处理器执行时所实现的将模块代码与基本界面代码进行组装得到界面的步骤之后，可以包括：将组装得到的界面进行存储；计算机程序被处理器执行时所实现的接收上传的界面设计图像的步骤之后，还包括：查询代码库中是否存在与界面设计图像对应的界面；如果存在，则获取界面并输出；如果不存在，则继续对界面设计图像进行分割得到界面模块。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

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

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

Claims (10)

1.一种界面生成方法，所述方法包括：

接收上传的界面设计图像；

对所述界面设计图像进行分割得到界面模块；

获取与所述界面模块对应的模块代码以及与所述界面设计图像对应的基本界面代码；

将所述模块代码与所述基本界面代码进行组装得到界面。

2.根据权利要求1所述的方法，其特征在于，所述对所述界面设计图像进行分割得到界面模块的步骤，包括：

识别所述界面设计图像中的文字，并记录每一文字的文字坐标；

识别所述界面设计图像中的线段，并记录每一线段的线段坐标；

根据所述文字坐标与所述线段坐标建立所述界面设计图像中的文字与对话框的关联关系，并记录与所述关联关系对应的界面模块；

根据所述界面模块对应的文字坐标和线段坐标对所述界面设计图像进行分割。

3.根据权利要求2所述的方法，其特征在于，所述识别所述界面设计图像中的文字的步骤，包括：

查询所述界面设计图像中是否存在与文字库中的标准文字相匹配的文字；

如果不存在，则将所述界面设计图像输入至预设的机器识别模型中；

通过所述预设的机器识别模型识别所述界面设计图像中文字。

4.根据权利要求2或3所述的方法，其特征在于，所述识别所述界面设计图像中的线段的步骤，包括：

根据canny边缘检测算法获取所述界面设计图像中的像素为线段像素的第一概率；

根据索贝尔算子边缘检测算法获取所述界面设计图像中的像素为线段像素的第二概率；

根据线段检测算法获取所述界面设计图像中的像素为线段像素的第三概率；

根据所述第一概率、所述第二概率以及所述第三概率计算得到综合概率；

若所述综合概率大于阈值，则将与所述综合概率对应的所述界面设计图像中的像素标记为线段像素，并根据线段像素生成线段。

5.根据权利要求4所述的方法，其特征在于，所述根据所述文字坐标与所述线段坐标建立所述界面设计图像中的文字与对话框的关联关系的步骤，包括：

根据所述线段坐标获取存在相同坐标的线段，并根据存在相同坐标的线段生成对话框；

计算所述文字坐标与所述对话框之间的距离；

若所述距离小于预设值，则建立所述对话框与所述文字坐标对应的文字的关联关系。

6.根据权利要求1至3任一项所述的方法，其特征在于，所述将所述模块代码与所述基本界面代码进行组装得到界面的步骤之后，包括：

对组装得到的界面的每一界面模块进行测试；

如果存在界面模块测试失败，则接收针对所述界面模块的模块代码的调整指令；

根据所述调整指令对所述界面模块的模块代码进行调整。

7.根据权利要求1至3任一项所述的方法，其特征在于，所述将所述模块代码与所述基本界面代码进行组装得到界面的步骤之后，包括：

将组装得到的界面进行存储；

所述接收上传的界面设计图像的步骤之后，还包括：

查询代码库中是否存在与所述界面设计图像对应的界面；

如果存在，则获取所述界面并输出；

如果不存在，则继续对所述界面设计图像进行分割得到界面模块。

8.一种界面生成装置，其特征在于，所述装置包括：

接收模块，用于接收上传的界面设计图像；

分割模块，用于对所述界面设计图像进行分割得到界面模块；

代码获取模块，用于获取与所述界面模块对应的模块代码以及与所述界面设计图像对应的基本界面代码；

组装模块，用于将所述模块代码与所述基本界面代码进行组装得到界面。

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

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