一种图像自动生成前端代码的方法和装置与流程

本发明涉及计算机，更具体地，涉及一种图像自动生成前端代码的方法和装置。

背景技术：

1、在网站、应用程序的开发流程中，首先需要产品经理和设计师多次沟通确定设计稿，确定出设计稿后，开发人员需要与产品经理进行多次沟通才能根据上述设计稿编辑生成较为准确的前端代码，最后根据所述前端代码生成用户界面(user interface，ui)原型图，在生成ui原型图之后，可能还需要与设计师进行再次沟通，如此反复，经过多次迭代，最后生成符合产品经理需求的ui原型图；因此，生成ui原型图的过程复杂，且时间较长，并且经过多人多次的参与，生成的ui原型图可能无法准确的对上述设计稿进行还原。

2、现有技术中，为了快速的将设计稿生成ui原型图，采用screen2code、mastergo等方法生成ui原型图，所述screen2code、mastergo都可以将设计图或设计稿直接转换为html/css(cascading style sheets层叠样式表)代码，但是上述方法识别精度有限，无法处理复杂布局以及还原设计细节，导致生成的html/css代码以及根据上述html/css代码生成的ui原型图的精度较差。

3、综上所述，如何实现图像到代码的精准转换，是目前需要解决的问题。

技术实现思路

1、有鉴于此，本发明实施例提供了一种图像自动生成前端代码的方法和装置，采用多模态大语言模型，可以快速实现图像到代码的精准转换。

2、第一方面，本发明实施例提供了一种图像自动生成前端代码的方法，所述方法包括：

3、获取目标图像，其中，所述目标图像为用户输入的任一图像；

4、响应于所述目标图像为可生成用户界面ui原型图的图像，根据布局检测生成至少一个子布局代码以及图像布局线框图，并根据元素组件检测生成每个元素组件的标注信息，其中，所述标注信息中包括每个元素组件的描述信息，所述描述信息中包括位置信息、类别信息以及样式信息；

5、将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语言模型中，生成全局代码。

6、可选的，所述方法还包括：

7、根据所述全局代码生成所述ui原型图。

8、可选的，所述根据所述布局检测生成至少一个子布局代码，具体包括：

9、根据所述布局检测确定所述目标图像的至少一个子布局；

10、获取所述至少一个子布局包括的部分元素组件的矢量图；

11、将所述至少一个子布局和所述至少一个子布局包括的部分元素组件的矢量图输入到多模态大语言模型，生成至少一个子布局代码。

12、可选的，所述根据所述布局检测生成至少一个子布局代码，具体包括：

13、根据所述布局检测确定所述目标图像的至少一个子布局；

14、将所述至少一个子布局输入到所述多模态大语言模型，生成至少一个子布局代码。

15、可选的，所述根据所述元素组件检测生成每个元素组件的标注信息，具体包括：

16、根据所述元素组件检测生成每个元素组件的描述信息；

17、将所述每个元素组件的描述信息保存在素材库缓存中；

18、在所述素材库缓存中获取每个元素组件的描述信息，并按照设定规则生成每个元素组件的标注信息，其中，所述标注信息为通过自然语言表示的所述描述信息。

19、可选的，所述方法还包括：

20、根据所述元素组件检测生成图像元素布局线框图。

21、可选的，所述将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语言模型中，生成全局代码，具体包括：

22、将所述目标图像、所述至少一个子布局代码、所述图像布局线框图、所述元素组件的标注信息、以及所述图像元素布局线框图输入到所述多模态大语言模型中，生成全局代码。

23、可选的，所述方法还包括：

24、获取用户反馈标注；

25、将所述用户反馈标注输入到所述多模态大语言模型中，更新所述全局代码。

26、可选的，所述方法还包括：

27、根据所述元素组件检测确定所述目标图像中的全部元素组件；

28、对所述全部元素组件中可矢量化的部分元素组件进行去背景处理和矢量化处理，生成所述部分元素组件的矢量图。

29、可选的，所述方法还包括：

30、对所述全局代码进行优化，生成优化后的全局代码。

31、第二方面，本发明实施例提供了一种图像自动生成前端代码的装置，所述装置包括：

32、获取单元，用于获取目标图像，其中，所述目标图像为用户输入的任一图像；

33、处理单元，响应于所述目标图像为可生成用户界面ui原型图的图像，用于根据布局检测生成至少一个子布局代码以及图像布局线框图，并根据元素组件检测生成每个元素组件的标注信息，其中，所述标注信息中包括每个元素组件的描述信息，所述描述信息中包括位置信息、类别信息以及样式信息；

34、生成单元，用于将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语言模型中，生成全局代码。

35、可选的，所述生成单元还用于：

36、根据所述全局代码生成所述ui原型图。

37、可选的，所述处理单元具体用于：

38、根据所述布局检测确定所述目标图像的至少一个子布局；

39、获取所述至少一个子布局包括的部分元素组件的矢量图；

40、将所述至少一个子布局和所述至少一个子布局包括的部分元素组件的矢量图输入到所述多模态大语言模型，生成至少一个子布局代码。

41、可选的，所述处理单元具体用于：

42、根据所述布局检测确定所述目标图像的至少一个子布局；

43、将所述至少一个子布局输入到所述多模态大语言模型，生成至少一个子布局代码。

44、可选的，所述处理单元具体用于：

45、根据所述元素组件检测生成每个元素组件的描述信息；

46、将所述每个元素组件的描述信息保存在素材库缓存中；

47、在所述素材库缓存中获取每个元素组件的描述信息，并按照设定规则生成每个元素组件的标注信息，其中，所述标注信息为通过自然语言表示的所述描述信息。

48、可选的，所述处理单元还用于：

49、根据所述元素组件检测生成图像元素布局线框图。

50、可选的，所述生成单元具体用于：

51、将所述目标图像、所述至少一个子布局代码、所述图像布局线框图、所述元素组件的标注信息、以及所述图像元素布局线框图输入到多模态大语言模型中，生成全局代码。

52、可选的，所述装置还包括更新单元，用于获取用户反馈标注；将所述用户反馈标注输入到所述多模态大语言模型中，更新所述全局代码。

53、可选的，所述处理单元还用于：

54、根据所述元素组件检测确定所述目标图像中的全部元素组件；

55、对所述全部元素组件中可矢量化的部分元素组件进行去背景处理和矢量化处理，生成所述部分元素组件的矢量图。

56、可选的，所述装置还包括优化单元，用于对所述全局代码进行优化，生成优化后的全局代码。

57、第三方面，本发明实施例提供了一种电子设备，包括存储器和处理器，所述存储器用于存储一条或多条计算机程序指令，其中，所述一条或多条计算机程序指令被所述处理器执行以实现如第一方面或第一方面任一种可能中任一项所述的方法。

58、第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储计算机程序指令，所述计算机程序指令在被处理器执行时实现如第一方面或第一方面任一种可能中任一项所述的方法。

59、本发明实施例中，通过获取目标图像，其中，所述目标图像为用户输入的任一图像；响应于所述目标图像为可生成用户界面ui原型图的图像，根据布局检测生成至少一个子布局代码以及图像布局线框图，并根据元素组件检测生成每个元素组件的标注信息，其中，所述标注信息中包括每个元素组件的描述信息，所述描述信息中包括位置信息、类别信息以及样式信息；将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语言模型中，生成全局代码。通过上述方法，可以通过多模态大语言模型实现从图像到代码的转换，生成速度快且转换精度高。