一种图像自动生成前端代码的方法和装置制造方法及图纸

技术编号:43814053 阅读:50 留言:0更新日期:2024-12-27 13:28
本发明专利技术实施例公开了一种图像自动生成前端代码的方法和装置。本发明专利技术实施例中,通过获取目标图像,其中,所述目标图像为用户输入的任一图像;响应于所述目标图像为可生成用户界面UI原型图的图像,根据布局检测生成至少一个子布局代码以及图像布局线框图,并根据元素组件检测生成每个元素组件的标注信息,其中,所述标注信息中包括每个元素组件的描述信息,所述描述信息中包括位置信息、类别信息以及样式信息;将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语言模型中,生成全局代码。通过上述方法,可以实现从图像到代码的精准转换。

【技术实现步骤摘要】

本专利技术涉及计算机,更具体地,涉及一种图像自动生成前端代码的方法和装置


技术介绍

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

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

【技术保护点】

1.一种图像自动生成前端代码的方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,所述方法还包括:

3.根据权利要求1所述的方法,其特征在于,所述根据所述布局检测生成至少一个子布局代码,具体包括:

4.根据权利要求1所述的方法,其特征在于,所述根据所述布局检测生成至少一个子布局代码,具体包括:

5.根据权利要求1所述的方法,其特征在于,所述根据所述元素组件检测生成每个元素组件的标注信息,具体包括:

6.根据权利要求1所述的方法,其特征在于,所述方法还包括:

7.根据权利要求6所述的方法,其特征...

【技术特征摘要】

1.一种图像自动生成前端代码的方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,所述方法还包括:

3.根据权利要求1所述的方法,其特征在于,所述根据所述布局检测生成至少一个子布局代码,具体包括:

4.根据权利要求1所述的方法,其特征在于,所述根据所述布局检测生成至少一个子布局代码,具体包括:

5.根据权利要求1所述的方法,其特征在于,所述根据所述元素组件检测生成每个元素组件的标注信息,具体包括:

6.根据权利要求1所述的方法,其特征在于,所述方法还包括:

7.根据权利要求6所述的方法,其特征在于,所述将所述目标图像、所述至少一个子布局代码、所述图像布局线框图以及所述元素组件的标注信息输入到多模态大语...

【专利技术属性】
技术研发人员:庾金科许文豪陈祖龙蒋雅萍余代军
申请(专利权)人:阿里巴巴中国有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1