本發(fā)明涉及計(jì)算機(jī)，更具體地，涉及一種圖像自動(dòng)生成前端代碼的方法和裝置。

背景技術(shù)：

1、在網(wǎng)站、應(yīng)用程序的開(kāi)發(fā)流程中，首先需要產(chǎn)品經(jīng)理和設(shè)計(jì)師多次溝通確定設(shè)計(jì)稿，確定出設(shè)計(jì)稿后，開(kāi)發(fā)人員需要與產(chǎn)品經(jīng)理進(jìn)行多次溝通才能根據(jù)上述設(shè)計(jì)稿編輯生成較為準(zhǔn)確的前端代碼，最后根據(jù)所述前端代碼生成用戶(hù)界面(user?interface，ui)原型圖，在生成ui原型圖之后，可能還需要與設(shè)計(jì)師進(jìn)行再次溝通，如此反復(fù)，經(jīng)過(guò)多次迭代，最后生成符合產(chǎn)品經(jīng)理需求的ui原型圖；因此，生成ui原型圖的過(guò)程復(fù)雜，且時(shí)間較長(zhǎng)，并且經(jīng)過(guò)多人多次的參與，生成的ui原型圖可能無(wú)法準(zhǔn)確的對(duì)上述設(shè)計(jì)稿進(jìn)行還原。

2、現(xiàn)有技術(shù)中，為了快速的將設(shè)計(jì)稿生成ui原型圖，采用screen2code、mastergo等方法生成ui原型圖，所述screen2code、mastergo都可以將設(shè)計(jì)圖或設(shè)計(jì)稿直接轉(zhuǎn)換為html/css(cascading?style?sheets層疊樣式表)代碼，但是上述方法識(shí)別精度有限，無(wú)法處理復(fù)雜布局以及還原設(shè)計(jì)細(xì)節(jié)，導(dǎo)致生成的html/css代碼以及根據(jù)上述html/css代碼生成的ui原型圖的精度較差。

3、綜上所述，如何實(shí)現(xiàn)圖像到代碼的精準(zhǔn)轉(zhuǎn)換，是目前需要解決的問(wèn)題。

技術(shù)實(shí)現(xiàn)思路

1、有鑒于此，本發(fā)明實(shí)施例提供了一種圖像自動(dòng)生成前端代碼的方法和裝置，采用多模態(tài)大語(yǔ)言模型，可以快速實(shí)現(xiàn)圖像到代碼的精準(zhǔn)轉(zhuǎn)換。

2、第一方面，本發(fā)明實(shí)施例提供了一種圖像自動(dòng)生成前端代碼的方法，所述方法包括：

3、獲取目標(biāo)圖像，其中，所述目標(biāo)圖像為用戶(hù)輸入的任一圖像；

4、響應(yīng)于所述目標(biāo)圖像為可生成用戶(hù)界面ui原型圖的圖像，根據(jù)布局檢測(cè)生成至少一個(gè)子布局代碼以及圖像布局線(xiàn)框圖，并根據(jù)元素組件檢測(cè)生成每個(gè)元素組件的標(biāo)注信息，其中，所述標(biāo)注信息中包括每個(gè)元素組件的描述信息，所述描述信息中包括位置信息、類(lèi)別信息以及樣式信息；

5、將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖以及所述元素組件的標(biāo)注信息輸入到多模態(tài)大語(yǔ)言模型中，生成全局代碼。

6、可選的，所述方法還包括：

7、根據(jù)所述全局代碼生成所述ui原型圖。

8、可選的，所述根據(jù)所述布局檢測(cè)生成至少一個(gè)子布局代碼，具體包括：

9、根據(jù)所述布局檢測(cè)確定所述目標(biāo)圖像的至少一個(gè)子布局；

10、獲取所述至少一個(gè)子布局包括的部分元素組件的矢量圖；

11、將所述至少一個(gè)子布局和所述至少一個(gè)子布局包括的部分元素組件的矢量圖輸入到多模態(tài)大語(yǔ)言模型，生成至少一個(gè)子布局代碼。

12、可選的，所述根據(jù)所述布局檢測(cè)生成至少一個(gè)子布局代碼，具體包括：

13、根據(jù)所述布局檢測(cè)確定所述目標(biāo)圖像的至少一個(gè)子布局；

14、將所述至少一個(gè)子布局輸入到所述多模態(tài)大語(yǔ)言模型，生成至少一個(gè)子布局代碼。

15、可選的，所述根據(jù)所述元素組件檢測(cè)生成每個(gè)元素組件的標(biāo)注信息，具體包括：

16、根據(jù)所述元素組件檢測(cè)生成每個(gè)元素組件的描述信息；

17、將所述每個(gè)元素組件的描述信息保存在素材庫(kù)緩存中；

18、在所述素材庫(kù)緩存中獲取每個(gè)元素組件的描述信息，并按照設(shè)定規(guī)則生成每個(gè)元素組件的標(biāo)注信息，其中，所述標(biāo)注信息為通過(guò)自然語(yǔ)言表示的所述描述信息。

19、可選的，所述方法還包括：

20、根據(jù)所述元素組件檢測(cè)生成圖像元素布局線(xiàn)框圖。

21、可選的，所述將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖以及所述元素組件的標(biāo)注信息輸入到多模態(tài)大語(yǔ)言模型中，生成全局代碼，具體包括：

22、將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖、所述元素組件的標(biāo)注信息、以及所述圖像元素布局線(xiàn)框圖輸入到所述多模態(tài)大語(yǔ)言模型中，生成全局代碼。

23、可選的，所述方法還包括：

24、獲取用戶(hù)反饋標(biāo)注；

25、將所述用戶(hù)反饋標(biāo)注輸入到所述多模態(tài)大語(yǔ)言模型中，更新所述全局代碼。

26、可選的，所述方法還包括：

27、根據(jù)所述元素組件檢測(cè)確定所述目標(biāo)圖像中的全部元素組件；

28、對(duì)所述全部元素組件中可矢量化的部分元素組件進(jìn)行去背景處理和矢量化處理，生成所述部分元素組件的矢量圖。

29、可選的，所述方法還包括：

30、對(duì)所述全局代碼進(jìn)行優(yōu)化，生成優(yōu)化后的全局代碼。

31、第二方面，本發(fā)明實(shí)施例提供了一種圖像自動(dòng)生成前端代碼的裝置，所述裝置包括：

32、獲取單元，用于獲取目標(biāo)圖像，其中，所述目標(biāo)圖像為用戶(hù)輸入的任一圖像；

33、處理單元，響應(yīng)于所述目標(biāo)圖像為可生成用戶(hù)界面ui原型圖的圖像，用于根據(jù)布局檢測(cè)生成至少一個(gè)子布局代碼以及圖像布局線(xiàn)框圖，并根據(jù)元素組件檢測(cè)生成每個(gè)元素組件的標(biāo)注信息，其中，所述標(biāo)注信息中包括每個(gè)元素組件的描述信息，所述描述信息中包括位置信息、類(lèi)別信息以及樣式信息；

34、生成單元，用于將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖以及所述元素組件的標(biāo)注信息輸入到多模態(tài)大語(yǔ)言模型中，生成全局代碼。

35、可選的，所述生成單元還用于：

36、根據(jù)所述全局代碼生成所述ui原型圖。

37、可選的，所述處理單元具體用于：

38、根據(jù)所述布局檢測(cè)確定所述目標(biāo)圖像的至少一個(gè)子布局；

39、獲取所述至少一個(gè)子布局包括的部分元素組件的矢量圖；

40、將所述至少一個(gè)子布局和所述至少一個(gè)子布局包括的部分元素組件的矢量圖輸入到所述多模態(tài)大語(yǔ)言模型，生成至少一個(gè)子布局代碼。

41、可選的，所述處理單元具體用于：

42、根據(jù)所述布局檢測(cè)確定所述目標(biāo)圖像的至少一個(gè)子布局；

43、將所述至少一個(gè)子布局輸入到所述多模態(tài)大語(yǔ)言模型，生成至少一個(gè)子布局代碼。

44、可選的，所述處理單元具體用于：

45、根據(jù)所述元素組件檢測(cè)生成每個(gè)元素組件的描述信息；

46、將所述每個(gè)元素組件的描述信息保存在素材庫(kù)緩存中；

47、在所述素材庫(kù)緩存中獲取每個(gè)元素組件的描述信息，并按照設(shè)定規(guī)則生成每個(gè)元素組件的標(biāo)注信息，其中，所述標(biāo)注信息為通過(guò)自然語(yǔ)言表示的所述描述信息。

48、可選的，所述處理單元還用于：

49、根據(jù)所述元素組件檢測(cè)生成圖像元素布局線(xiàn)框圖。

50、可選的，所述生成單元具體用于：

51、將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖、所述元素組件的標(biāo)注信息、以及所述圖像元素布局線(xiàn)框圖輸入到多模態(tài)大語(yǔ)言模型中，生成全局代碼。

52、可選的，所述裝置還包括更新單元，用于獲取用戶(hù)反饋標(biāo)注；將所述用戶(hù)反饋標(biāo)注輸入到所述多模態(tài)大語(yǔ)言模型中，更新所述全局代碼。

53、可選的，所述處理單元還用于：

54、根據(jù)所述元素組件檢測(cè)確定所述目標(biāo)圖像中的全部元素組件；

55、對(duì)所述全部元素組件中可矢量化的部分元素組件進(jìn)行去背景處理和矢量化處理，生成所述部分元素組件的矢量圖。

56、可選的，所述裝置還包括優(yōu)化單元，用于對(duì)所述全局代碼進(jìn)行優(yōu)化，生成優(yōu)化后的全局代碼。

57、第三方面，本發(fā)明實(shí)施例提供了一種電子設(shè)備，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器用于存儲(chǔ)一條或多條計(jì)算機(jī)程序指令，其中，所述一條或多條計(jì)算機(jī)程序指令被所述處理器執(zhí)行以實(shí)現(xiàn)如第一方面或第一方面任一種可能中任一項(xiàng)所述的方法。

58、第四方面，本發(fā)明實(shí)施例提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其上存儲(chǔ)計(jì)算機(jī)程序指令，所述計(jì)算機(jī)程序指令在被處理器執(zhí)行時(shí)實(shí)現(xiàn)如第一方面或第一方面任一種可能中任一項(xiàng)所述的方法。

59、本發(fā)明實(shí)施例中，通過(guò)獲取目標(biāo)圖像，其中，所述目標(biāo)圖像為用戶(hù)輸入的任一圖像；響應(yīng)于所述目標(biāo)圖像為可生成用戶(hù)界面ui原型圖的圖像，根據(jù)布局檢測(cè)生成至少一個(gè)子布局代碼以及圖像布局線(xiàn)框圖，并根據(jù)元素組件檢測(cè)生成每個(gè)元素組件的標(biāo)注信息，其中，所述標(biāo)注信息中包括每個(gè)元素組件的描述信息，所述描述信息中包括位置信息、類(lèi)別信息以及樣式信息；將所述目標(biāo)圖像、所述至少一個(gè)子布局代碼、所述圖像布局線(xiàn)框圖以及所述元素組件的標(biāo)注信息輸入到多模態(tài)大語(yǔ)言模型中，生成全局代碼。通過(guò)上述方法，可以通過(guò)多模態(tài)大語(yǔ)言模型實(shí)現(xiàn)從圖像到代碼的轉(zhuǎn)換，生成速度快且轉(zhuǎn)換精度高。