CN117539446A - 一种提高d2c工具识别及生成能力的方法和系统 - Google Patents

Abstract

本发明公开了一种提高D2C工具识别及生成能力的方法和系统，该方法包括以下步骤：接收用户上传的设计稿源文件，对设计稿源文件进行格式转换、图层解析和数据清洗；对预处理后的设计稿进行组件检测，利用深度学习模型从设计稿中检测出所有组件的信息；对检测出来的组件进行组件匹配，根据组件之间的关系和属性，将组件与组件库中的组件进行匹配；根据目标平台或语言的规范，将组件转化为前端代码，并对代码进行优化；将生成的前端代码展示给用户，并提供可视化编辑器和交互模拟器，让用户可以对生成的前端代码进行修改和预览。该方法和系统可以提高D2C工具的识别、匹配、生成和交互能力，提高前端开发效率和质量。

Description

一种提高D2C工具识别及生成能力的方法和系统

技术领域

本发明涉及一种D2C方法和系统，特别是一种提高D2C工具识别及生成能力的方法和系统。

背景技术

D2C(Design to Code)是指将设计稿作为输入，通过一系列算法转换为可维护的前端代码的技术。D2C技术可以解决前端开发中常见的问题，如设计稿还原工作繁琐、效率低下、质量不高等。D2C技术可以让前端开发者从重复性的设计稿还原工作中解放出来，专注于业务逻辑和创新性的工作。

目前，市场上已经有一些D2C工具，如imgcook、Uizard、sketch2code等。这些工具都可以实现从设计稿到前端代码的转换，但也存在一些不足之处。例如：

1.识别能力不强。只能识别出简单的基础组件，如文本、图片、按钮等，而不能识别出复杂的复合组件，如导航栏、轮播图、表单等。有些工具只能支持特定格式或来源的设计稿，如PSD或Sketch等，而不能支持其他格式或来源的设计稿，如Figma或Adobe XD等。

2.匹配能力不准。有些工具只能根据组件的位置信息进行匹配，而不能根据组件之间的关系和属性进行匹配。有些工具只能匹配出固定的组件库中的组件，而不能匹配出自定义或动态的组件。

3.生成能力不高。有些工具只能生成简单或固定的前端代码，而不能生成灵活或多样化的前端代码。有些工具只能生成特定平台或语言的前端代码，如Web或HTML等，而不能生成其他平台或语言的前端代码，如移动端或Vue等。

4.交互能力不足。有些工具只能展示生成的前端代码，而不能提供可视化编辑器和交互模拟器，让用户可以对生成的前端代码进行修改和预览。有些工具只能模拟静态或简单的交互效果，如点击或滑动等，而不能模拟动态或复杂的交互效果，如动画或表单提交等。

因此，在现有技术水平下，仍有必要提供一种提高D2C工具识别及生成能力的方法和系统，以解决上述问题。

发明内容

发明目的：本发明所要解决的技术问题是针对现有技术的不足，提供一种提高D2C工具识别及生成能力的方法和系统。

为了解决上述技术问题，本发明公开了一种提高D2C工具识别及生成能力的方法和系统。其中，所述方法包括以下步骤：

步骤1、接收用户上传的设计稿源文件，对设计稿源文件进行预处理，包括格式转换、图层解析和数据清洗；

步骤2、对预处理后的设计稿进行组件检测：利用深度学习模型从设计稿中检测出所有组件，组件的信息至少包括：类别、位置和大小；

步骤3、对检测出来的组件进行组件匹配和布局生成：根据组件信息与组件库中的组件进行匹配，再根据组件之间的关系生成布局；

步骤4、对匹配好的组件进行代码生成：根据目标平台或语言的规范，将匹配好的组件转化为前端代码，并对代码进行优化；

步骤5、将生成的前端代码展示给用户，并提供可视化编辑器和交互模拟器，让用户对生成的前端代码进行修改和预览。

进一步的，步骤1中所述的格式转换，是将设计稿源文件从不同的设计工具的输出格式转化为统一的格式。

进一步的，步骤1中所述的图层解析，是将设计稿源文件中的不同图层进行分割和识别，使用深度学习模型或投影算法从设计稿源文件中检测出不同的图层，并算出图层的位置、大小、形状和颜色。

进一步的，步骤1中所述的数据清洗，是对设计稿源文件中的数据进行处理，以消除错误、噪声、重复和缺失，所述数据清洗，至少包括：去除重复数据、填补缺失值、处理异常值和转换数据格式。

进一步的，步骤2中所述的深度学习模型，采用一阶段或二阶段的方法，包括Faster RCNN或Mask RCNN。

进一步的，步骤3中所述的组件匹配方法，具体包括：

利用已有的组件库，对步骤2中检测出来的组件进行识别和匹配，找出最接近的组件，即将步骤2中检测得到的组件信息与组件库中的组件进行比对，并做匹配标记，对未匹配的组件信息，采用机器学习或深度学习的技术，对该组件信息进行特征提取和分析，识别出该组件的语义类型。

进一步的，步骤3中所述的生成布局，具体包括：

对完成匹配的组件进行布局生成，即根据步骤2中检测得到的组件的位置和大小信息，采用投影和聚类算法判断组件之间的层级关系、包含关系和相邻关系，并据此进行组件布局，具体包括以下步骤：

步骤3-1、组件关系判定：根据组件的位置信息，判断两个组件之间的关系，所述关系包括：包含、重叠和分离，根据上述组件关系构建组件树；

步骤3-2、投影布局：根据组件的坐标，对组件进行行列切割，使每个组件都落到一个自适应块上，然后生成自适应块布局；

步骤3-3、组件聚类分组：根据组件之间的距离，利用密度可达的方法，将相近的组件聚合成一组，并生成相应的布局。

步骤3-1中所述的组件关系判定，具体步骤如下：

步骤3-1-1，对于任意两个组件，通过比较组件信息中的位置和大小信息，判断是否相交、相离或者包含，具体如下：

设组件A的左上角坐标为(x1,y1)，右下角坐标为(x2,y2)，组件B的左上角坐标为(x3,y3)，右下角坐标为(x4,y4)，则用以下方法判断两个组件间的关系：

如果x1>x4或者x2<x3或者y1>y4或者y2<y3，则判定组件A和组件B相离；

如果x1<＝x3且x2>＝x4且y1<＝y3且y2>＝y4，则判定组件A包含组件B；

如果x3<＝x1且x4>＝x2且y3<＝y1且y4>＝y2，则判定组件B包含组件A；

其他情况下，判定组件A和组件B相交。

步骤3-1-2，对于所有的组件，用一个二维数组来存储组件之间的关系，具体如下：

用relation[i][j]表示第i个组件和第j个组件的关系，其值为0表示相离，1表示包含，-1表示被包含，2表示相交；

步骤3-1-3，遍历所有的组件，对于每个组件找出其所有的子组件，即relation[i][j]为1的组件，并放入一个数组中；如果该数组为空，则该组件没有子组件，即为叶子节点，否则该组件有子组件，即为非叶子节点，且该数组即为该组件的子节点数组；

步骤3-1-4，使用递归函数构建组件树，具体如下：

从根节点开始，对于每个非叶子节点，递归地调用递归函数来构建它的子节点，并将子节点添加到当前节点的子节点属性中；

对于每个叶子节点则直接返回该节点。

步骤3-2中所述的投影布局，即根据构建的组件树进行行列投影，并根据投影进行布局，具体步骤如下：

步骤3-2-1，行投影：设组件树中的一个父组件，包含了n个子组件，沿着y轴方向切割，将子组件分成若干行，每一行都在父组件和子组件间增加一个中间层的行组件，每个行组件都做为一个自适应块；

步骤3-2-2，列投影：对每个行组件进行列投影，即沿着x轴方向切割，将行组件分成若干列，每一列都相当于在行组件和子组件间增加一个中间层的列组件，每个列组件也做为一个自适应块；

步骤3-2-3，形成嵌套机构：根据上述步骤得到一个由行组件和列组件交替构成的嵌套结构，每个行组件或列组件都是一个自适应块容器，其子元素都是自适应块的元素；

步骤3-2-4，根据子元素的位置和大小确定自适应块的属性，至少包括：对齐方式、排列顺序和换行策略；

步骤3-3中所述的组件聚类分组，具体步骤如下：

步骤3-3-1，确定分组参数，具体包括：

两个组件之间的最大距离，如果小于等于该距离，则两个组件为密度相连的；

一个组件的邻域内相邻的组件数量，大于等于该数量，则该组件为核心组件；

步骤3-3-2，根据上述分组参数生成簇：具体包括：

对每个组件进行遍历，判断是否为核心组件；如果是，则以该核心组件为中心，找出其所有密度相连的组件，形成一个簇，否则跳过该组件，继续遍历；

步骤3-3-3，对每个簇进行布局生成，具体包括：

根据簇内组件的位置和大小，选择布局方式，至少包括：弹性布局、网格布局和绝对定位布局。

进一步的，步骤4中所述的代码生成，具体包括：使用DSL或模板，将匹配好的组件转化为标准化的前端代码。

进一步的，步骤4中所述的对代码进行优化，包括：使用代码规范、格式化、压缩和混淆工具对生成的前端代码进行检查、修复、美化、缩减和加密操作。

一种提高D2C工具识别及生成能力的系统，包括以下模块：

预处理模块，用于接收用户上传的设计稿源文件，对设计稿源文件进行格式转换、图层解析和数据清洗；

组件检测模块，用于对预处理后的设计稿进行组件检测，利用深度学习模型从设计稿源文件中检测出所有组件的信息；

组件匹配模块，用于对检测出来的组件进行组件匹配，根据组件之间的关系和属性，将组件与组件库中的组件进行匹配；

代码生成模块，用于对匹配出来的组件进行代码生成，根据目标平台或语言的规范，将组件转化为前端代码，并对代码进行优化；

展示交互模块，用于将生成的前端代码展示给用户，并提供可视化编辑器和交互模拟器，让用户对生成的前端代码进行修改和预览；

所述的组件匹配模块，还包括一个组件关系判定子模块，用于对任意两个组件，根据它们的位置信息判断二者的关系，所述关系至少包括：包含、重叠和分离，并根据组件之间的距离和密度，使用聚类算法将相近的组件分为一组。

有益效果：

(一)通过使用深度学习模型或算法进行组件检测和组件匹配，可以提高识别和匹配的准确度和鲁棒性，处理好设计稿的多样性和复杂性，使生成的代码与设计稿更加一致或更加符合用户需求。

(二)通过使用DSL模板进行代码生成，可以提高代码的质量和可维护性，遵循好代码的风格和规范，避免出现冗余、重复、错误等问题，使生成的代码更加清晰、简洁、易读。

(三)通过支持多种目标平台或语言的代码生成，可以提高代码的灵活性和适用性，满足不同的业务需求和场景，使生成的代码更加通用、可移植、可扩展。

(四)通过使用可视化界面或工具进行交互处理，可以提高用户的体验和满意度，提供更好的展示、反馈、修改、评估等功能，使用户在使用D2C工具时感觉更加便捷、舒适、信任。

附图说明

下面结合附图和具体实施方式对本发明做更进一步的具体说明，本发明的上述和/或其他方面的优点将会变得更加清楚。

图1是本发明所述方法的流程图。

图2是本发明所述系统的结构图。

图3是本发明所述系统的示意图。

图4是一个实施例中的待生成的界面设计草图。

图5是采用本发明生成的树节点布局结构示意图。

具体实施方式

本发明所述方法包括以下步骤：

1.接收用户上传或输入的设计稿源文件；

2.对设计稿源文件进行预处理，包括格式转换、图层解析、数据清洗操作；

3.对预处理后的设计稿进行组件检测，利用深度学习模型或算法从设计稿中检测出所有的组件，并给出它们的位置、大小、形状、颜色等信息；

4.对检测出来的组件进行组件匹配，利用检测的组件信息与组件库中的组件进行匹配，找出最相似或最符合的组件，并给出匹配结果，对于未匹配的组件采用机器学习或深度学习的技术，识别出组件的语义类型并转化成网页基础标签组件；

5.根据组件之间的相对位置、大小信息，使用投影和聚类算法判断方法生成布局结果；

6.对匹配结果进行代码生成，利用DSL或模板将匹配结果转化为目标平台或语言的前端代码，并给出生成结果；

7.对生成结果进行交互处理，利用可视化界面或工具向用户展示生成结果，并接收用户对生成结果的反馈、修改或评估，并根据用户需求进行相应调整。

本发明所述系统包括以下模块：

1.设计稿接收模块，用于接收用户上传或输入的设计稿源文件；

2.设计稿预处理模块，用于对设计稿源文件进行预处理，包括格式转换、图层解析、数据清洗等操作；

3.组件检测模块，用于对预处理后的设计稿进行组件检测，利用深度学习模型或算法从设计稿中检测出所有的组件，并给出它们的位置、大小、形状、颜色等信息；

4.组件匹配模块，用于对检测出来的组件进行组件匹配，利用深度学习模型或算法将组件与组件库中的组件进行匹配，找出最相似或最符合的组件，并给出匹配结果；并利用组件关系判定算法生成布局结构成果；

5.代码生成模块，用于对匹配结果进行代码生成，利用DSL或模板将匹配结果转化为目标平台或语言的前端代码，并给出生成结果；

6.交互处理模块，用于对生成结果进行交互处理，利用可视化界面或工具向用户展示生成结果，并接收用户对生成结果的反馈、修改或评估，并根据用户需求进行相应调整，形成组件库和设计资产库资源，反馈D2C系统。

实施例：

本实施例以Sketch设计稿为例，说明本发明所述方法和系统的具体实施过程。如图1所示，本发明所述方法包括以下步骤：

步骤1、接收用户上传或输入的Sketch设计稿源文件；

步骤2、对Sketch设计稿源文件进行预处理，包括格式转换、图层解析、数据清洗等操作；

在步骤2中，对设计稿源文件进行预处理时，可以使用以下步骤和方法：

步骤2-1、格式转换指将设计稿源文件从不同的设计工具(如PSD、Sketch、Figma等)转化为统一的格式，以便后续的处理。一种常用的格式转换方法是使用Sketch插件或网页将设计稿源文件转化为D2C Schema格式，D2C Schema格式是一种轻量级的数据交换格式，可以方便地表示设计稿中的图层、属性、样式等信息。另一种格式转换方法是使用webassembly调用浏览器暴露的skia接口，直接解析Sketch文件。

步骤2-2、图层解析指将设计稿中的不同图层进行分割和识别，以便后续的组件检测和匹配。一种常用的图层解析方法是使用深度学习模型或算法，如Mask R-CNN3，从设计稿中检测出不同的图层，并给出它们的位置、大小、形状、颜色等信息。另一种图层解析方法是使用投影算法，将设计稿中的图层按行列切割，让每个图层都落到一个flex item上。

步骤2-3、数据清洗指对设计稿中的数据进行处理，以消除错误、噪声、重复、缺失等问题，提高数据的准确性和可靠性。数据清洗通常包括以下几个操作：

(1)去除重复数据：对于设计稿中同一图层中相同的图元类型且检测内容相似文本或图片，删除数据中的重复图元，将此图元标记为迭代组件并记录迭代次数。

(2)填补缺失值：原始数据中可能会出现数据值缺失，即数据集中存在无数据的数据单元格。在数据分析时会影响结果，需要将缺失的数据值进行补全。可人工手动一次性补全缺失值，或者用其它数据替代，如平均数、众数、中位数，或者假设为0。

(3)处理异常值：对于设计稿中的图层进行异常判断，如该图层中没有图元数据，则进行删除处理；

(4)转换数据格式：即将数据转化为适合分析和建模的格式，如数值型、文本型、逻辑型等。转换数据格式的方法有分列、设置单元格格式、使用函数等。

步骤3、对预处理后的Sketch设计稿进行组件检测，利用深度学习模型或算法从Sketch设计稿中检测出所有的组件，并给出它们的位置、大小、形状、颜色等信息；

步骤4、对检测出来的组件进行组件匹配，利用深度学习模型或算法将组件与组件库中的组件进行匹配，找出最相似或最符合的组件，并给出匹配结果，再通过组件关系判定方法对组件布局进行重新生成；

在步骤4中，基于组件库匹配的方法是利用已有的组件库，如Ant Design、ElementUI等，对设计稿中的图层进行识别和匹配，找出最接近的组件，并生成相应的代码，以Vue技术栈中Element UI为例，首先基于Element UI规范创建设计资产库，提供了一系列可复用的设计元素，如图标、色板、字体、通用控件等，以及相应的设计规范和资源库；然后基于设计资产库进行界面设计，将步骤3检测的组件信息与Element UI组件进行比对匹配标记，对未匹配的图层信息采用机器学习或深度学习的技术，对该图层进行内容、样式、形状等特征的提取和分析，识别出图层的语义类型，如标题、按钮、图片等，并生成相应的HTML标签数据；

在步骤4中，对检测出来的组件进行布局生成，根据组件之间的相对位置、大小信息，采用投影和聚类算法判断组件之间的层级关系、包含关系、相邻关系等，提高布局匹配的准确度。具体可以使用以下步骤：

步骤4-1、基础组件关系判定：根据组件的位置信息，判断两个组件之间的关系，如包含、重叠、分离等，然后根据这些关系构建组件树；

步骤4-2、投影算法：根据组件的坐标，对组件进行行列切割，使每个组件都落到一个flex item上，然后生成flex布局；

步骤4-3、聚类算法：根据组件之间的距离，利用密度可达的概念，将相近的组件聚合成一组，然后生成相应的布局。

在步骤4-1中，基础组件关系判定的方法是一种根据组件的位置信息，判断两个组件之间的关系，如包含、重叠、分离等，然后根据这些关系构建组件树的方法。这种方法的优点是简单直观，缺点是可能会产生过多的绝对定位和margin。具体步骤如下：

(1)对于任意两个组件，可以通过比较它们的坐标和尺寸，判断它们是否相交、相离或者包含。例如，如果A的左上角坐标为(x1,y1)，右下角坐标为(x2,y2)，B的左上角坐标为(x3,y3)，右下角坐标为(x4,y4)，那么可以用以下公式判断它们的关系：

①如果x1>x4或者x2<x3或者y1>y4或者y2<y3，那么A和B相离；

②如果x1<＝x3且x2>＝x4且y1<＝y3且y2>＝y4，那么A包含B；

③如果x3<＝x1且x4>＝x2且y3<＝y1且y4>＝y2，那么B包含A；

④其他情况下，A和B相交。

(2)对于所有的组件，可以用一个二维数组来存储它们之间的关系，例如relation[i][j]表示第i个组件和第j个组件的关系，其中0表示相离，1表示包含，-1表示被包含，2表示相交；

(3)然后用一个循环来遍历所有的组件，对于每个组件找出它所有的子组件，即relation[i][j]为1的组件，并将它们放入一个数组中。如果这个数组为空，说明该组件没有子组件，那么它就是一个叶子节点；如果这个数组不为空，说明该组件有子组件，那么它就是一个非叶子节点，并且这个数组就是它的子节点数组；

(4)最后用一个递归函数来构建组件树，从根节点开始，对于每个非叶子节点，我们递归地调用该函数来构建它的子节点，并将它们添加到该节点的children属性中。对于每个叶子节点直接返回该节点。

以如图4所示的的界面设计草图为例，使用上述函数方法逐步生成组件树布局：

根据组件坐标信息可以得到组件关系的二维数组如下：

relation[i][j]	组件A	组件B	组件C	组件D	组件E	组件F
							组件A	-	1	1	1	1	1
组件B	-1	-	0	0	0	0
							组件C	-1	0	-	0	0	0
组件D	-1	0	0	-	1	2
							组件E	-1	0	0	-1	-	0
组件F	-1	0	0	2	0	-

(1)第一步根据二维项不包含-1获取根组件列表，依次对每个根组件执行下一步。通过规则得到例子中的根组件为组件A；

(2)第二步根据组件二维项等于1获取包含组件列表，列表存在则执行下一步。通过规则得到组件A包含列表为组件B、组件C、组件D、组件E和组件F；

(3)第三步创建组件节点，利用组件数据创建组件节点，将二维关系数组中有关该组件的项置为空，并将节点插入到父节点children属性的数组中，如果为根组件则将节点插入至新的根组件列表中。按照规则将组件A插入根组件列表中，同时将二维关系数组中组件A的项置为空，得到新的关系数组如下：

relation[i][j]	组件A	组件B	组件C	组件D	组件E	组件F
							组件A	-	-	-	-	-	-
组件B	-	-	0	0	0	0
							组件C	-	0	-	0	0	0
组件D	-	0	0	-	1	2
							组件E	-	0	0	-1	-	0
组件F	-	0	0	2	0	-

(4)第四步过滤子组件，根据组件二维项不包含-1获取不存在父节点的组件列表，依次对子组件进行第二至第四步的操作，直到递归执行结束。此时通过新的关系数组筛选掉包含-1项的组件E，得到子组件列表为组件B、组件C、组件D、组件F，递归执行得到如图5所示的树节点布局结构。

在步骤4-2中，投影flex化算法是一种根据组件的坐标，对组件进行行列切割，使每个组件都落到一个flex item上，然后生成flex布局的算法。具体实现步骤如下：

(1)对于一个父组件，它包含了n个子组件，首先对它进行行投影，也就是沿着y轴方向切割，将子组件分成若干行，每一行都相当于在父组件和子组件间增加一层row组件，每个row都可以做flex；

(2)然后对每个row进行列投影，也就是沿着x轴方向切割，将子组件分成若干列，每一列都相当于在row和子组件间增加一层column组件，每个column也可以做flex；

(3)这样就得到了一个由row和column交替构成的嵌套结构，每个row或column都是一个flex容器，它们的子元素都是flex item；

(4)在这个过程中还可以根据子元素的位置和大小确定一些flex属性，比如align-items,justify-content,flex-wrap等，这些属性可以更好地还原设计稿的布局效果；

在步骤4-3中，基于聚类算法的分组方法是一种利用密度可达的概念，将相近的组件聚合成一组，然后生成相应的布局的方法。具体实现步骤如下：

(1)首先需要确定两个参数：epsilon和minPts。epsilon是指两个组件之间的最大距离，如果小于或等于这个距离，就认为它们是密度相连的。minPts是指一个组件的邻域内至少要有多少个组件，才能认为它是一个核心组件；

(2)然后对每个组件进行遍历，判断它是否是一个核心组件。如果是，就以它为中心，找出它的所有密度相连的组件，形成一个簇。如果不是，就跳过它，继续遍历下一个组件；

(3)最后对每个簇进行布局生成。根据簇内组件的位置和大小，我们可以选择合适的布局方式，如flex、grid、absolute等。

步骤5、对匹配结果进行代码生成，为了支持生成不同DSL(domain specificlanguage，领域专用语言)的代码，将结果统一抽象成类Virtual DOM的节点描述数据，然后将节点描述数据处理成DSL代码，再将DSL代码转化为目标平台或语言的前端代码，以Vue技术栈为例，将匹配的结果生成基于Vue语法树的DSL数据，再通过Vue解析器将DSL数据转化为Vue的界面代码。

步骤6、对生成结果进行交互处理，利用可视化界面或工具向用户展示生成结果，并接收用户对生成结果的反馈、修改或评估，并根据用户需求进行相应调整，并且在可视化编辑界面中，用户可以对生成的组件代码进行重新调整，具体操作如下：

步骤6-1、通过拖拽可视化编辑界面中的元素调整其大小及位置，对生成的组件按需进行调整；

步骤6-2、通过可视化编辑界面选中元素，修改该元素的class属性，使其更加贴合实际使用场景，如在设计稿中该图元的属性为list，而实际的使用场景为商品条目的列表，此时可将生成代码中的元素class属性修改为product-list；

步骤6-3、对生成的界面中的局部节点进行标记为组件，标记为组件之后可对节点内部的状态和数据进行设置，描述组件的入参、设置组件的生命周期等操作，并在最终生成代码的时候以组件形式生成；

步骤6-4、对生成的界面中的元素进行交互能力定制，在可视化编辑界面中选中需要绑定交互能力的元素，对其进行交互行为和交互逻辑的定制；

步骤6-5、用户可以对生成的界面结果进行评价、分类及标注，将标记为组件的代码加入组件库资源中，用于提升组件的识别和匹配率。

如图2所示，本发明所述系统包括以下模块：

1.设计稿接收模块，用于接收用户上传或输入的Sketch设计稿源文件；

2.设计稿预处理模块，用于对Sketch设计稿源文件进行预处理，包括格式转换、图层解析、数据清洗等操作；

3.组件检测模块，用于对预处理后的Sketch设计稿进行组件检测，利用深度学习模型或算法从Sketch设计稿中检测出所有的组件，并给出它们的位置、大小、形状、颜色等信息；

4.组件匹配模块，用于对检测出来的组件进行组件匹配，利用深度学习模型或算法将组件与组件库中的组件进行匹配，找出最相似或最符合的组件，并给出匹配结果；

5.代码生成模块，用于对匹配结果进行代码生成，利用DSL代码将匹配结果转化为目标平台或语言的前端代码，并给出生成结果；

6.交互处理模块，用于对生成结果进行交互处理，利用可视化界面或工具向用户展示生成结果，并接收用户对生成结果的反馈、修改或评估，并根据用户需求进行相应调整。

如图3所示，本发明所述系统的示意图如下：

1.用户通过Sketch插件或网页上传或输入Sketch设计稿源文件；

2.系统通过设计稿接收模块和设计稿预处理模块接收和预处理Sketch设计稿源文件；

3.系统通过组件检测模块和组件匹配模块对Sketch设计稿进行组件检测和组件匹配，并给出匹配结果；

4.系统通过代码生成模块对匹配结果进行代码生成，并根据组件的使用场景给出生成结果；

5.系统通过交互处理模块对生成结果进行交互处理，并向用户展示生成结果，并接收用户对生成结果的反馈、修改或评估，并根据用户需求进行调整，其包括元素大小位置更改、元素交互逻辑定制等。

具体实现中，本申请提供计算机存储介质以及对应的数据处理单元，其中，该计算机存储介质能够存储计算机程序，所述计算机程序通过数据处理单元执行时可运行本发明提供的一种提高D2C工具识别及生成能力的方法和系统的发明内容以及各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，ROM)或随机存储记忆体(random access memory，RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术方案可借助计算机程序以及其对应的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以计算机程序即软件产品的形式体现出来，该计算机程序软件产品可以存储在存储介质中，包括若干指令用以使得一台包含数据处理单元的设备(可以是个人计算机，服务器，单片机，MUU或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本发明提供了一种提高D2C工具识别及生成能力的方法和系统的思路及方法，具体实现该技术方案的方法和途径很多，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。本实施例中未明确的各组成部分均可用现有技术加以实现。

Claims (10)

1.一种提高D2C工具识别及生成能力的方法，其特征在于，包括以下步骤：

步骤1、接收用户上传的设计稿源文件，对设计稿源文件进行预处理，包括格式转换、图层解析和数据清洗；

步骤2、对预处理后的设计稿进行组件检测：利用深度学习模型从设计稿中检测出所有组件，组件的信息至少包括：类别、位置和大小；

步骤3、对检测出来的组件进行组件匹配和布局生成：根据组件信息与组件库中的组件进行匹配，再根据组件之间的关系生成布局；

步骤4、对匹配好的组件进行代码生成：根据目标平台或语言的规范，将匹配好的组件转化为前端代码，并对代码进行优化；

步骤5、将生成的前端代码展示给用户，并提供可视化编辑器和交互模拟器，让用户对生成的前端代码进行修改和预览。

2.根据权利要求1所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤1中所述的格式转换，是将设计稿源文件从不同的设计工具的输出格式转化为统一的格式。

3.根据权利要求2所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤1中所述的图层解析，是将设计稿源文件中的不同图层进行分割和识别，使用深度学习模型或投影算法从设计稿源文件中检测出不同的图层，并算出图层的位置、大小、形状和颜色。

4.根据权利要求3所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤1中所述的数据清洗，是对设计稿源文件中的数据进行处理，以消除错误、噪声、重复和缺失，所述数据清洗，至少包括：去除重复数据、填补缺失值、处理异常值和转换数据格式。

5.根据权利要求4所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤2中所述的深度学习模型，采用一阶段或二阶段的方法，包括Faster RCNN或Mask RCNN。

6.根据权利要求5所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤3中所述的组件匹配方法，具体包括：

利用已有的组件库，对步骤2中检测出来的组件进行识别和匹配，找出最接近的组件，即将步骤2中检测得到的组件信息与组件库中的组件进行比对，并做匹配标记，对未匹配的组件信息，采用机器学习或深度学习的技术，对该组件信息进行特征提取和分析，识别出该组件的语义类型。

7.根据权利要求6所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤3中所述的生成布局，具体包括：

对完成匹配的组件进行布局生成，即根据步骤2中检测得到的组件的位置和大小信息，采用投影和聚类算法判断组件之间的层级关系、包含关系和相邻关系，并据此进行组件布局，具体包括以下步骤：

步骤3-1、组件关系判定：根据组件的位置信息，判断两个组件之间的关系，所述关系包括：包含、重叠和分离，根据上述组件关系构建组件树；

步骤3-2、投影布局：根据组件的坐标，对组件进行行列切割，使每个组件都落到一个自适应块上，然后生成自适应块布局；

步骤3-3、组件聚类分组：根据组件之间的距离，利用密度可达的方法，将相近的组件聚合成一组，并生成相应的布局；

步骤3-1中所述的组件关系判定，具体步骤如下：

步骤3-1-1，对于任意两个组件，通过比较组件信息中的位置和大小信息，判断是否相交、相离或者包含，具体如下：

设组件A的左上角坐标为(x1,y1)，右下角坐标为(x2,y2)，组件B的左上角坐标为(x3,y3)，右下角坐标为(x4,y4)，则用以下方法判断两个组件间的关系：

如果x1>x4或者x2<x3或者y1>y4或者y2<y3，则判定组件A和组件B相离；

如果x1<＝x3且x2>＝x4且y1<＝y3且y2>＝y4，则判定组件A包含组件B；

如果x3<＝x1且x4>＝x2且y3<＝y1且y4>＝y2，则判定组件B包含组件A；

其他情况下，判定组件A和组件B相交；

步骤3-1-2，对于所有的组件，用一个二维数组来存储组件之间的关系，具体如下：

用relation[i][j]表示第i个组件和第j个组件的关系，其值为0表示相离，1表示包含，-1表示被包含，2表示相交；

步骤3-1-3，遍历所有的组件，对于每个组件找出其所有的子组件，即relation[i][j]为1的组件，并放入一个数组中；如果该数组为空，则该组件没有子组件，即为叶子节点，否则该组件有子组件，即为非叶子节点，且该数组即为该组件的子节点数组；

步骤3-1-4，使用递归函数构建组件树，具体如下：

从根节点开始，对于每个非叶子节点，递归地调用递归函数来构建它的子节点，并将子节点添加到当前节点的子节点属性中；

对于每个叶子节点则直接返回该节点；

步骤3-2中所述的投影布局，即根据构建的组件树进行行列投影，并根据投影进行布局，具体步骤如下：

步骤3-2-1，行投影：设组件树中的一个父组件，包含了n个子组件，沿着y轴方向切割，将子组件分成若干行，每一行都在父组件和子组件间增加一个中间层的行组件，每个行组件都做为一个自适应块；

步骤3-2-2，列投影：对每个行组件进行列投影，即沿着x轴方向切割，将行组件分成若干列，每一列都相当于在行组件和子组件间增加一个中间层的列组件，每个列组件也做为一个自适应块；

步骤3-2-3，形成嵌套机构：根据上述步骤得到一个由行组件和列组件交替构成的嵌套结构，每个行组件或列组件都是一个自适应块容器，其子元素都是自适应块的元素；

步骤3-2-4，根据子元素的位置和大小确定自适应块的属性，至少包括：对齐方式、排列顺序和换行策略；

步骤3-3中所述的组件聚类分组，具体步骤如下：

步骤3-3-1，确定分组参数，具体包括：

两个组件之间的最大距离，如果小于等于该距离，则两个组件为密度相连的；

一个组件的邻域内相邻的组件数量，大于等于该数量，则该组件为核心组件；

步骤3-3-2，根据上述分组参数生成簇：具体包括：

对每个组件进行遍历，判断是否为核心组件；如果是，则以该核心组件为中心，找出其所有密度相连的组件，形成一个簇，否则跳过该组件，继续遍历；

步骤3-3-3，对每个簇进行布局生成，具体包括：

根据簇内组件的位置和大小，选择布局方式，至少包括：弹性布局、网格布局和绝对定位布局。

8.根据权利要求7所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤4中所述的代码生成，具体包括：使用DSL或模板，将匹配好的组件转化为标准化的前端代码。

9.根据权利要求8所述的一种提高D2C工具识别及生成能力的方法，其特征在于，步骤4中所述的对代码进行优化，包括：使用代码规范、格式化、压缩和混淆工具对生成的前端代码进行检查、修复、美化、缩减和加密操作。

10.一种提高D2C工具识别及生成能力的系统，其特征在于，包括以下模块：

预处理模块，用于接收用户上传的设计稿源文件，对设计稿源文件进行格式转换、图层解析和数据清洗；

组件检测模块，用于对预处理后的设计稿进行组件检测，利用深度学习模型从设计稿源文件中检测出所有组件的信息；

组件匹配模块，用于对检测出来的组件进行组件匹配，根据组件之间的关系和属性，将组件与组件库中的组件进行匹配；

代码生成模块，用于对匹配出来的组件进行代码生成，根据目标平台或语言的规范，将组件转化为前端代码，并对代码进行优化；

展示交互模块，用于将生成的前端代码展示给用户，并提供可视化编辑器和交互模拟器，让用户对生成的前端代码进行修改和预览；

所述的组件匹配模块，还包括一个组件关系判定子模块，用于对任意两个组件，根据它们的位置信息判断二者的关系，所述关系至少包括：包含、重叠和分离，并根据组件之间的距离和密度，使用聚类算法将相近的组件分为一组。