部署一個令人愉快和流暢的用戶界面是那些開發(fā)現(xiàn)代軟件應(yīng)用程序的人關(guān)心的問題之一，無論是嵌入式系統(tǒng)、移動設(shè)備還是計算機(jī)。開發(fā)圖形用戶界面 (GUI) 終成為開發(fā)過程中代價高昂的一步，因為它需要良好的設(shè)計工作來創(chuàng)建應(yīng)用程序的用戶界面/用戶體驗 (UI/UX) 和編碼本身，通常必須在嘗試改善系統(tǒng)使用中的用戶體驗時進(jìn)行修改和返工。

本文展示了如何使用 KnowCode AI 減少開發(fā)和改進(jìn)這些界面的時間，KnowCode AI 是一種使用深度學(xué)習(xí)理解原型圖像并將其轉(zhuǎn)換為嵌入式設(shè)備 GUI 的工具。這種方法識別由設(shè)計人員設(shè)計的布局組件，生成 XML 標(biāo)記文件，將 XML 轉(zhuǎn)換為可在嵌入式系統(tǒng)、移動設(shè)備或臺式機(jī)上運行的項目。此過程僅需幾分鐘，并使用開源技術(shù)。

當(dāng)出現(xiàn)新應(yīng)用程序的開發(fā)想法時，用戶界面和體驗是極其重要的元素。項目通常需要花費大量時間專門思考應(yīng)如何向用戶呈現(xiàn)應(yīng)用程序以及開發(fā)此初始可執(zhí)行界面。

換句話說，將好的應(yīng)用創(chuàng)意轉(zhuǎn)化為源代碼需要合理的成本和時間，尤其是當(dāng)我們談?wù)摰氖桥c傳統(tǒng)計算機(jī)相比處理能力和內(nèi)存較少的嵌入式設(shè)備時。

因此，KnowCode 項目應(yīng)運而生，目標(biāo)是減少軟件界面的開發(fā)時間，協(xié)助開發(fā)應(yīng)用程序界面的初始且成本高昂的過程，將屏幕設(shè)計轉(zhuǎn)化為可執(zhí)行的功能代碼。換句話說，這個想法是成為一個工具，使用深度學(xué)習(xí)來理解圖像，識別設(shè)計人員設(shè)計的組件，將該圖像轉(zhuǎn)換為 XML 標(biāo)記文件，然后將該文件轉(zhuǎn)換為可以在其上執(zhí)行的項目系統(tǒng)芯片、手機(jī)或計算機(jī)，并為此使用TotalCross等開源技術(shù)。

KnowCode 有兩個主要的執(zhí)行模塊：KnowCode-AI和KnowCode-XML。KnowCode-AI 基于以超過 60,000 張圖像作為輸入的數(shù)據(jù)集訓(xùn)練的深度神經(jīng)網(wǎng)絡(luò)。KnowCode-XML 是一個開源庫，允許開發(fā)人員使用 Android XML 創(chuàng)建 GUI，并使用TotalCross SDK在 Linux ARM 設(shè)備上以低占用空間運行它。

該過程從可以使用 Figma、Adobe XD 或 Photoshop 等任何設(shè)計工具創(chuàng)建的圖像原型開始。KnowCode-AI 不附加任何設(shè)計工具，這意味著它甚至可以處理現(xiàn)有的屏幕截圖，從一種技術(shù)遷移到另一種技術(shù)。下一步是在原型圖像上運行算法，該算法將檢測屏幕上的每個元素，如 Button、TextView、ImageView 等。

KnowCode-AI 的輸出是一個 XML 標(biāo)記文件，將用作系統(tǒng)模塊的輸入，系統(tǒng)模塊會將此 XML 轉(zhuǎn)換為各種設(shè)備平臺（如 Android、Linux、Linux-ARM 和 Windows）上的可執(zhí)行文件。

為此，使用了和開源的 TotalCross SDK 和 KnowCode-XML 庫，它們可以在多樣化的平臺類型上創(chuàng)建可執(zhí)行項目。換句話說，KnowCode 系統(tǒng)及其兩個模塊，KnowCode-AI 和 KnowCode-XML，允許開發(fā)人員以屏幕圖像開始程序，以可以在不同平臺上執(zhí)行的項目結(jié)束，準(zhǔn)備為每個模塊添加功能屏幕，為此目的使用 Java 語言。

如圖 1 所示，Home Appliance 應(yīng)用程序是為演示使用 KnowCode 工具的完整過程而創(chuàng)建的設(shè)計。GitHub上提供了此應(yīng)用程序的代碼。

點擊查看完整大小的圖片
圖 1. 用于測試神經(jīng)網(wǎng)絡(luò)的設(shè)計。（）

初，屏幕的設(shè)計被添加到神經(jīng)網(wǎng)絡(luò)的測試中，圖 2 說明了相同的出口標(biāo)記，結(jié)果識別出圖像上 17 個組件中的 14 個。

點擊查看完整大小的圖片
圖 2. 帶有神經(jīng)網(wǎng)絡(luò)標(biāo)記的設(shè)計。（）

下一步是調(diào)整丟失的組件和屏幕上每個組件的輪廓有一些差異的標(biāo)記。圖 3 說明了用戶對標(biāo)記進(jìn)行更正。

在圖 3 中，可以看到用戶調(diào)整神經(jīng)網(wǎng)絡(luò)標(biāo)記、更改檢測到的內(nèi)容并通過拖動鼠標(biāo)并輸入其類型來創(chuàng)建新標(biāo)記。

點擊查看完整大小的圖片
圖 3. 用戶對神經(jīng)網(wǎng)絡(luò)標(biāo)記的調(diào)整。（）

每次測試新的屏幕設(shè)計并且用戶進(jìn)行標(biāo)記更正時，都會生成兩個 XML 文件：一個文件為神經(jīng)網(wǎng)絡(luò)提供數(shù)據(jù)，另一個文件將用于生成應(yīng)用程序的屏幕。      

個 XML 文件打開了網(wǎng)絡(luò)學(xué)習(xí)在下一個培訓(xùn)課程中做出更標(biāo)記的可能性。該腳本保存圖像和帶有正確標(biāo)記的文件，以便模型不斷改進(jìn)。

另一個文件是代表屏幕本身的 Android XML（圖 4）。我們選擇這項技術(shù)是因為我們不想引入不必要的新格式。為什么不將成熟的技術(shù)之一應(yīng)用于不同的目的（在 Linux ARM 上運行）？

點擊查看完整大小的圖片
圖 4.Android XML 輸出。（）

要在設(shè)備上運行 Android XML，我們只需使用 TotalCross SDK 創(chuàng)建一個新項目，導(dǎo)入 XML 文件并導(dǎo)入 KnowCode-XML 庫以在應(yīng)用程序中執(zhí)行 XML。

圖 5（下圖）展示了從獲取圖像開始到項目結(jié)束的完整 KnowCode 流程。

點擊查看完整大小的圖片
圖 5. KnowCode 流程。（）

KnowCode-AI在輸入市場上常用的3:4、16:9、18:9或21:9等比例的屏幕圖像時，效果不錯。與這些比例相差很遠(yuǎn)的屏幕通常會導(dǎo)致網(wǎng)絡(luò)標(biāo)記的命中率很低。雖然這不影響項目的后續(xù)，但需要進(jìn)行更多的調(diào)整，從而增加終 UI 的創(chuàng)建時間。

GUI 創(chuàng)建對于設(shè)計人員和開發(fā)人員來說是一個巨大的挑戰(zhàn)，對于嵌入式設(shè)備來說，這個問題甚至更大，因為采用了 C/C++ 等低級技術(shù)，在設(shè)計原型和準(zhǔn)備好運行的實際應(yīng)用程序之間引入了巨大的時間差距。設(shè)備。