所屬的技術人員能夠理解，本技術的各個方面可以實現(xiàn)為系統(tǒng)、方法或程序產(chǎn)品。因此，本技術的各個方面可以具體實現(xiàn)為以下形式，即：完全的硬件實施方式、完全的軟件實施方式(包括固件、微代碼等)，或硬件和軟件方面結合的實施方式，這里可以統(tǒng)稱為“電路”、“模塊”或“系統(tǒng)”。與上述方法實施例基于同一發(fā)明構思，本技術實施例中還提供了一種電子設備。在一種實施例中，該電子設備可以是服務器，如圖1所示的服務器120。在該實施例中，電子設備的結構可以如圖8所示，包括存儲器801，通訊模塊803以及一個或多個處理器802。存儲器801，用于存儲處理器802執(zhí)行的計算機程序。存儲器801可主要包括存儲程序區(qū)和存儲數(shù)據(jù)區(qū)，其中，存儲程序區(qū)可存儲操作系統(tǒng)，以及運行即時通訊功能所需的程序等；存儲數(shù)據(jù)區(qū)可存儲各種即時通訊信息和操作指令集等。存儲器801可以是易失性存儲器(volatile?memory)，例如隨機存取存儲器(random-access?memory，ram)；存儲器801也可以是非易失性存儲器(non-volatilememory)，例如只讀存儲器，快閃存儲器(flash?memory)，硬盤(hard?disk?drive，hdd)或固態(tài)硬盤(solid-state?drive，ssd)；或者存儲器801是能夠用于攜帶或存儲具有指令或數(shù)據(jù)結構形式的期望的計算機程序并能夠由計算機存取的任何其他介質，但不限于此。存儲器801可以是上述存儲器的組合。處理器802，可以包括一個或多個中央處理單元(central?processing?unit，cpu)或者為數(shù)字處理單元等等。處理器802，用于調用存儲器801中存儲的計算機程序時實現(xiàn)上述界面生成方法。通訊模塊803用于與終端設備和其他服務器進行通信。本技術實施例中不限定上述存儲器801、通訊模塊803和處理器802之間的具體連接介質。本技術實施例在圖8中以存儲器801和處理器802之間通過總線804連接，總線804在圖8中以粗線描述，其它部件之間的連接方式，僅是進行示意性說明，并不引以為限?？偩€804可以分為地址總線、數(shù)據(jù)總線、控制總線等。為便于描述，圖8中僅用一條粗線描述，但并不描述僅有一根總線或一種類型的總線。存儲器801中存儲有計算機存儲介質，計算機存儲介質中存儲有計算機可執(zhí)行指令，計算機可執(zhí)行指令用于實現(xiàn)本技術實施例的界面生成方法。處理器802用于執(zhí)行上述的界面生成方法，如圖2所示。在另一種實施例中，電子設備也可以是其他電子設備，如圖1所示的終端設備110。在該實施例中，電子設備的結構可以如圖9所示，包括：通信組件910、存儲器920、顯示單元930、攝像頭940、傳感器950、音頻電路960、藍牙模塊970、處理器980等部件。通信組件910用于與服務器進行通信。在一些實施例中，可以包括電路無線保真(wireless?fidelity，wifi)模塊，wifi模塊屬于短距離無線傳輸技術，電子設備通過wifi模塊可以幫助用戶收發(fā)信息。存儲器920可用于存儲軟件程序及數(shù)據(jù)。處理器980通過運行存儲在存儲器920的軟件程序或數(shù)據(jù)，從而執(zhí)行終端設備110的各種功能以及數(shù)據(jù)處理。存儲器920可以包括高速隨機存取存儲器，還可以包括非易失性存儲器，例如至少一個磁盤存儲器件、閃存器件、或其他易失性固態(tài)存儲器件。存儲器920存儲有使得終端設備110能運行的操作系統(tǒng)。本技術中存儲器920可以存儲操作系統(tǒng)及各種應用程序，還可以存儲執(zhí)行本技術實施例界面生成方法的計算機程序。顯示單元930還可用于顯示由用戶輸入的信息或提供給用戶的信息以及終端設備110的各種菜單的圖形用戶界面(graphical?user?interface，gui)。具體地，顯示單元930可以包括設置在終端設備110正面的顯示屏932。其中，顯示屏932可以采用液晶顯示器、發(fā)光二極管等形式來配置。顯示單元930還可用于接收輸入的數(shù)字或字符信息，產(chǎn)生與終端設備110的用戶設置以及功能控制有關的信號輸入，具體地，顯示單元930可以包括設置在終端設備110正面的觸控屏931，可收集用戶在其上或附近的觸摸操作，例如點擊按鈕，拖動滾動框等。其中，觸控屏931可以覆蓋在顯示屏932之上，也可以將觸控屏931與顯示屏932集成而實現(xiàn)終端設備110的輸入和輸出功能，集成后可以簡稱觸摸顯示屏。本技術中顯示單元930可以顯示應用程序以及對應的操作步驟。攝像頭940可用于捕獲靜態(tài)圖像，用戶可以將攝像頭940拍攝的圖像通過應用發(fā)布。攝像頭940可以是一個，也可以是多個。物體通過鏡頭生成光學圖像投射到感光元件。感光元件可以是電荷耦合器件(charge?coupled?device，ccd)或互補金屬氧化物半導體(complementary?metal-oxide-semiconductor，cmos)光電晶體管。感光元件把光信號轉換成電信號，之后將電信號傳遞給處理器980轉換成數(shù)字圖像信號。終端設備還可以包括至少一種傳感器950，比如加速度傳感器951、距離傳感器952、指紋傳感器953、溫度傳感器954。終端設備還可配置有陀螺儀、氣壓計、濕度計、溫度計、紅外線傳感器、光傳感器、運動傳感器等其他傳感器。音頻電路960、揚聲器961、傳聲器962可提供用戶與終端設備110之間的音頻接口。音頻電路960可將接收到的音頻數(shù)據(jù)轉換后的電信號，傳輸?shù)綋P聲器961，由揚聲器961轉換為聲音信號輸出。終端設備110還可配置音量按鈕，用于調節(jié)聲音信號的音量。另一方面，傳聲器962將收集的聲音信號轉換為電信號，由音頻電路960接收后轉換為音頻數(shù)據(jù)，再將音頻數(shù)據(jù)輸出至通信組件910以發(fā)送給比如另一終端設備110，或者將音頻數(shù)據(jù)輸出至存儲器920以便進一步處理。藍牙模塊970用于通過藍牙協(xié)議來與其他具有藍牙模塊的藍牙設備進行信息交互。例如，終端設備可以通過藍牙模塊970與同樣具備藍牙模塊的可穿戴電子設備(例如智能手表)建立藍牙連接，從而進行數(shù)據(jù)交互。處理器980是終端設備的控制中心，利用各種接口和線路連接整個終端的各個部分，通過運行或執(zhí)行存儲在存儲器920內的軟件程序，以及調用存儲在存儲器920內的數(shù)據(jù)，執(zhí)行終端設備的各種功能和處理數(shù)據(jù)。在一些實施例中，處理器980可包括一個或多個處理單元；處理器980還可以集成應用處理器和基帶處理器，其中，應用處理器主要處理操作系統(tǒng)、用戶界面和應用程序等，基帶處理器主要處理無線通信?？梢岳斫獾氖?，上述基帶處理器也可以不集成到處理器980中。本技術中處理器980可以運行操作系統(tǒng)、應用程序、用戶界面顯示及觸控響應，以及本技術實施例的界面生成方法。另外，處理器980與顯示單元930耦接。在一些可能的實施方式中，本技術提供的界面生成方法的各個方面還可以實現(xiàn)為一種程序產(chǎn)品的形式，其包括計算機程序，當程序產(chǎn)品在電子設備上運行時，計算機程序用于使電子設備執(zhí)行本說明書上述描述的根據(jù)本技術各種示例性實施方式的界面生成方法中的步驟，例如，電子設備可以執(zhí)行如圖2中所示的步驟。程序產(chǎn)品可以采用一個或多個可讀介質的任意組合?？勺x介質可以是可讀信號介質或者可讀存儲介質。可讀存儲介質例如可以是但不限于電、磁、光、電磁、紅外線、或半導體的系統(tǒng)、裝置或器件，或者任意以上的組合?？勺x存儲介質的更具體的例子(非窮舉的列表)包括：具有一個或多個導線的電連接、便攜式盤、硬盤、隨機存取存儲器(ram)、只讀存儲器(rom)、可擦式可編程只讀存儲器(eprom或閃存)、光纖、便攜式緊湊盤只讀存儲器(cd-rom)、光存儲器件、磁存儲器件、或者上述的任意合適的組合。本領域內的技術人員應明白，本技術的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此，本技術可采用完全硬件實施例、完全軟件實施例、或結合軟件和硬件方面的實施例的形式。而且，本技術可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(包括但不限于磁盤存儲器、cd-rom、光學存儲器等)上實施的計算機程序產(chǎn)品的形式。本技術是參照根據(jù)本技術的方法、設備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結合。可提供這些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設備的處理器以產(chǎn)生一個機器，使得通過計算機或其他可編程數(shù)據(jù)處理設備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。這些計算機程序指令也可存儲在能引導計算機或其他可編程數(shù)據(jù)處理設備以特定方式工作的計算機可讀存儲器中，使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設備上，使得在計算機或其他可編程設備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理，從而在計算機或其他可編程設備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。顯然，本領域的技術人員可以對本技術進行各種改動和變型而不脫離本技術的精神和范圍。這樣，倘若本技術的這些修改和變型屬于本技術權利要求及其等同技術的范圍之內，則本技術也意圖包含這些改動和變型在內。

背景技術：

1、在前端開發(fā)流程中，通常是先由美工師設計出用戶界面稿，再由前端開發(fā)人員根據(jù)用戶界面稿，人工從中識別出若干個用戶界面(user?interface，ui)組件，例如按鈕、輸入框、表格、下拉菜單等，之后利用代碼還原各個ui組件的結構、樣式與交互功能。但這種開發(fā)方式使得前端開發(fā)人員需要將大量時間花費ui組件識別與代碼編寫上，不能將更多精力投入到業(yè)務理解與界面優(yōu)化當中。

2、因此，為了減輕前端開發(fā)人員的負擔，出現(xiàn)了一種圖片轉代碼技術，即根據(jù)用戶界面稿，自動生成ui組件的結構與樣式，但該方法依舊存在諸多局限性，例如，該方法并不能理解ui組件的功能，只是簡單的根據(jù)用戶界面稿所呈現(xiàn)的ui組件的外觀樣式，通過代碼將上述ui組件“畫”在界面中，但“畫出來的ui組件”本質上依舊只是一個與ui組件具有相同外觀的圖形，并不具備ui組件的功能，因此依舊需要前端開發(fā)人員手動將這些圖形對應的代碼，替換成真正的帶有交互功能的ui組件，也即，該方法依舊需要前端開發(fā)人員執(zhí)行手動替換這種大量重復的工作，降低了開發(fā)效率。

技術實現(xiàn)思路

1、本技術實施例提供一種界面生成方法、裝置、電子設備和存儲介質，用以提高界面生成的效率。

2、本技術實施例提供的一種界面生成方法，包括：

3、基于初始代碼呈現(xiàn)初始界面；所述初始界面包含多個樣式圖形，每個樣式圖形是基于不同的功能組件的外觀繪制的，所述每個樣式圖形對應所述初始代碼中的一個第一代碼塊；

4、對于所述初始界面中的每個樣式圖形，將所述樣式圖形輸入至預先訓練的組件識別模型，確定所述樣式圖形對應的功能組件，以及確定所述樣式圖形在所述初始界面中的位置信息；

5、對于所述初始界面中的每個樣式圖形，基于所述樣式圖形的位置信息，確定所述樣式圖形各自對應的第一代碼塊；并基于所述樣式圖形對應的功能組件的第二代碼塊，對所述樣式圖形在所述初始代碼中對應的第一代碼塊進行替換，獲得目標代碼；所述第二代碼塊是預先編寫的，所述第二代碼塊用于實現(xiàn)所述功能組件的交互功能和組件外觀；

6、基于所述目標代碼生成包含多個功能組件的目標界面。

7、本技術實施例提供的一種界面生成裝置，包括：

8、呈現(xiàn)單元，用于基于初始代碼呈現(xiàn)初始界面；所述初始界面包含多個樣式圖形，每個樣式圖形是基于不同的功能組件的外觀繪制的，所述每個樣式圖形對應所述初始代碼中的一個第一代碼塊；

9、第一確定單元，用于對于所述初始界面中的每個樣式圖形，將所述樣式圖形輸入至預先訓練的組件識別模型，確定所述樣式圖形對應的功能組件，以及確定所述樣式圖形在所述初始界面中的位置信息；

10、第二確定單元，用于對于所述初始界面中的每個樣式圖形，基于所述樣式圖形的位置信息，確定所述樣式圖形各自對應的第一代碼塊；并基于所述樣式圖形對應的功能組件的第二代碼塊，對所述樣式圖形在所述初始代碼中對應的第一代碼塊進行替換，獲得目標代碼；所述第二代碼塊是預先編寫的，所述第二代碼塊用于實現(xiàn)所述功能組件的交互功能和組件外觀；

11、生成單元，用于基于所述目標代碼生成包含多個功能組件的目標界面。

12、可選的，所述第一確定單元具體用于：

13、基于識別框對所述樣式圖形進行框選；

14、確定所述識別框的邊緣點位在所述初始界面中的第一坐標信息，并基于各第一坐標信息獲取所述識別框的中心點位的第二坐標信息；

15、將所述各第一坐標信息與所述第二坐標信息，作為所述樣式圖形在所述初始界面中的位置信息。

16、可選的，所述每個樣式圖形包含多個樣式元素，所述每個樣式圖形中，各樣式元素各自對應的第一子代碼塊之間存在層級關系；上級樣式元素對應的第一子代碼塊中包含下級樣式元素對應的第一子代碼塊。

17、可選的，所述第二確定單元具體用于：

18、基于所述各第一坐標信息，獲取所述樣式圖形的圖形尺寸信息；

19、基于預設的探針與所述第二坐標信息，按照由下到上的層級順序，依次獲取所述樣式圖形包含的各樣式元素各自對應的第一子代碼塊，以及所述各樣式元素各自的元素尺寸信息；

20、基于所述層級順序，依次對比所述各樣式元素各自的元素尺寸信息，與所述樣式圖形的圖形尺寸信息之間的差值，并基于各差值確定目標樣式元素；

21、將所述目標樣式元素對應的第一子代碼塊，作為所述樣式圖形對應的第一代碼塊。

22、可選的，所述第二確定單元具體用于：

23、將所述探針當前探測到的樣式元素作為候選樣式元素，對比所述候選樣式元素的候選元素尺寸信息與所述樣式圖形的圖形尺寸信息；

24、若所述候選元素尺寸信息，與所述圖形尺寸信息之間的差值不大于預設閾值，則將所述候選樣式元素作為所述目標樣式元素；

25、若所述候選元素尺寸信息，與所述圖形尺寸信息之間的差值大于預設閾值，則將下一個樣式元素作為所述探針探測到的候選樣式元素。

26、可選的，所述裝置還包括：

27、顯示單元，用于在確定所述樣式圖形在所述初始界面中的位置信息之后，在基于所述樣式圖形的位置信息，確定所述樣式圖形各自對應的第一代碼塊之前，基于所述樣式圖形的位置信息，以及所述樣式圖形對應的功能組件的組件類型，在所述樣式圖形的相應位置生成與所述組件類型相對應的提示浮層，以突出顯示所述樣式圖形。

28、本技術實施例提供的一種電子設備，包括處理器和存儲器，其中，所述存儲器存儲有計算機程序，當所述計算機程序被所述處理器執(zhí)行時，使得所述處理器執(zhí)行上述任意一種界面生成方法的步驟。

29、本技術實施例提供一種計算機可讀存儲介質，其包括計算機程序，當所述計算機程序在電子設備上運行時，所述計算機程序用于使所述電子設備執(zhí)行上述任意一種界面生成方法的步驟。

30、本技術實施例提供一種計算機程序產(chǎn)品，所述計算機程序產(chǎn)品包括計算機程序，所述計算機程序存儲在計算機可讀存儲介質中；當電子設備的處理器從計算機可讀存儲介質讀取所述計算機程序時，所述處理器執(zhí)行所述計算機程序，使得所述電子設備執(zhí)行上述任意一種界面生成方法的步驟。

31、本技術有益效果如下：

32、本技術實施例提供了一種界面生成方法、裝置、電子設備和存儲介質，本技術可以對初始界面中的僅有外觀但不具備功能的樣式圖形進行識別，以確定每個樣式圖形對應的功能組件，以及確定樣式圖形在初始界面中的位置信息；之后，基于樣式圖形的位置信息，找到各樣式圖形各自對應的第一代碼塊，并基于樣式圖形對應的功能組件的第二代碼塊，對樣式圖形在初始代碼中對應的第一代碼塊進行替換，獲得目標代碼；最終基于目標代碼生成包含多個功能組件的目標界面；由于本技術可以自動識別樣式組件的外觀，并基于組件位置實現(xiàn)組件的自動替換，整個過程省時省力，解決了相關技術中人為識別組件帶來的低效率問題，且能提升組件替換的準確率。

33、本技術的其它特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本技術而了解。本技術的目的和其他優(yōu)點可通過在所寫的說明書、權利要求書、以及附圖中所特別指出的結構來實現(xiàn)和獲得。