使用AI為嵌入式設備創建GUI

2021-02-24

對于開發現代軟件應用程序的人（無論是嵌入式系統，移動設備還是計算機），部署令人愉悅且流暢的用戶界面是他們最大的擔憂之一。開發圖形用戶界面（GUI）最終是開發過程中的一個昂貴步驟，因為它需要出色的設計工作來創建應用程序的用戶界面/用戶體驗（UI / UX）和編碼本身，通常必須在嘗試改善系統使用中的用戶體驗時，請進行修改和返工。

本文展示了如何使用KnowCode AI減少開發和改進這些接口的時間，該工具使用深度學習來理解原型圖像并將其轉換為嵌入式設備的GUI。這種方法可以識別設計專業人員設計的布局組件，生成XML標記文件，最后將XML轉換為可在嵌入式系統，移動設備或臺式機上運行的項目。此過程僅需幾分鐘，并使用開源技術。

創建用戶界面的困難

當出現新應用程序的開發思想時，用戶界面和體驗是極其重要的元素。對于項目而言，通常需要花費大量時間進行工作，以考慮應如何向用戶展示應用程序以及此初始可執行接口的開發，這是很常見的。

換句話說，要將良好的應用程序思想轉換為源代碼時，會涉及合理的成本和時間，尤其是當我們談論的是嵌入式設備時，與傳統計算機相比，這些設備的處理能力和內存更少。

因此，KnowCode項目應運而生，其目標是減少軟件界面開發的時間，協助開發應用程序界面的初始和昂貴過程，將屏幕的設計轉換為可執行代碼和功能代碼。換句話說，這個想法是成為一個使用深度學習來了解圖像，識別設計專業人員設計的組件，將該圖像轉換為XML標記文件，然后將該文件轉換為可在其上執行的項目的工具。系統芯片，手機或計算機，并為此使用諸如TotalCross之類的開源技術。

KnowCode執行過程

KnowCode有兩個主要的執行模塊：KnowCode-AI和KnowCode-XML。KnowCode-AI基于深度神經網絡，該網絡經過訓練，輸入的數據集超過60,000張。KnowCode-XML是一個開放源代碼庫，允許開發人員使用Android XML創建GUI，并使用TotalCross SDK在Linux ARM設備上以低占用空間運行它。

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

KnowCode-AI的輸出是XML標記文件，將用作系統模塊的輸入，該文件會將XML轉換為各種設備平臺（例如Android，Linux，Linux-ARM和Windows）上的可執行文件。

為此，使用了TotalCross SDK和KnowCode-XML庫（免費和開放源代碼），從而可以在最多種類型的平臺上創建可執行項目。換句話說，KnowCode系統及其兩個模塊KnowCode-AI和KnowCode-XML，使開發人員可以從屏幕圖像開始該過程，并以可以在不同平臺上執行的項目結束，從而可以為每個平臺添加功能。屏幕，為此目的使用Java語言。

示例應用程序

如圖1所示，家用電器應用程序是一個設計，旨在演示使用KnowCode工具的完整過程。該應用程序的代碼可在GitHub上獲得。

點擊查看完整大小的圖片

最初，將屏幕的設計添加到神經網絡的測試中，圖2展示了該屏幕的出口標記，從而識別了圖像上17個組件中的14個。

點擊查看完整大小的圖片

圖2。帶有神經網絡標記的設計。

下一步是調整缺少的組件以及在屏幕上每個組件的輪廓有所不同的情況下出現的標記。圖3說明了用戶對標記進行的更正。

在圖3中，僅通過拖動鼠標并輸入其類型，就可以看到用戶調整神經網絡標記，更改檢測到的內容并進行新標記。

點擊查看完整大小的圖片

圖3.用戶對神經網絡標記的調整。

每次測試新的屏幕設計并且用戶進行標記更正時，都會生成兩個XML文件：一個文件饋入神經網絡，另一個文件是將用于生成應用程序的屏幕。      

第一個XML文件為網絡提供了在下一個培訓課程中學習做出更精確標記的可能性。該腳本使用正確的標記保存圖像和文件，以便對模型進行不斷的改進。

另一個文件是一個Android XML，它代表屏幕本身（圖4）。我們選擇此項技術是因為我們不想引入不必要的新格式。為什么不將最成熟的技術之一用于其他目的（在Linux ARM上運行）？

點擊查看完整大小的圖片

圖4. Android XML輸出。

要在設備上運行Android XML，我們只需要使用TotalCross SDK創建一個新項目，導入XML文件并導入KnowCode-XML庫以在應用程序中執行XML。

圖5（下圖）說明了完整的KnowCode流程，從獲取圖像開始到項目結束。

點擊查看完整大小的圖片

圖5. KnowCode流程。

關于次優用例

當輸入的圖像是市場上通常使用的比例（例如3：4、16：9、18：9或21：9）時，KnowCode-AI會獲得良好的效果。比例遠非如此的屏幕通常會導致網絡標記的命中率較低。盡管這不是項目后續工作的障礙，但仍需要進行更多調整，從而增加了最終UI創建時間。

結論

GUI的創建對于設計人員和開發人員以及嵌入式設備來說都是一個巨大的挑戰，隨著采用低級技術（例如C / C ++），這個問題變得更大，這會在設計原型和可在其上運行的實際應用程序之間引入巨大的TIME間隔。設備。

KnowCode帶來了一種縮小這種差距的新方法，它使用Computer Vision通過使用TotalCross，Android XML等高級，已建立的開源技術將現有系統的圖像原型或屏幕截圖轉換為真實的應用程序。這種方法最多可將與GUI開發相關的時間減少80％，同時即使在低端設備上也能保持相同的性能。