使用AI為嵌入式設備創(chuàng )建GUI

2021-02-24

對于開(kāi)發(fā)現代軟件應用程序的人（無(wú)論是嵌入式系統，移動(dòng)設備還是計算機），部署令人愉悅且流暢的用戶(hù)界面是他們最大的擔憂(yōu)之一。開(kāi)發(fā)圖形用戶(hù)界面（GUI）最終是開(kāi)發(fā)過(guò)程中的一個(gè)昂貴步驟，因為它需要出色的設計工作來(lái)創(chuàng )建應用程序的用戶(hù)界面/用戶(hù)體驗（UI / UX）和編碼本身，通常必須在嘗試改善系統使用中的用戶(hù)體驗時(shí)，請進(jìn)行修改和返工。

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

創(chuàng )建用戶(hù)界面的困難

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

換句話(huà)說(shuō)，要將良好的應用程序思想轉換為源代碼時(shí)，會(huì )涉及合理的成本和時(shí)間，尤其是當我們談?wù)摰氖乔度胧皆O備時(shí)，與傳統計算機相比，這些設備的處理能力和內存更少。

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

KnowCode執行過(guò)程

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

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

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

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

示例應用程序

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

點(diǎn)擊查看完整大小的圖片

最初，將屏幕的設計添加到神經(jīng)網(wǎng)絡(luò )的測試中，圖2展示了該屏幕的出口標記，從而識別了圖像上17個(gè)組件中的14個(gè)。

點(diǎn)擊查看完整大小的圖片

圖2。帶有神經(jīng)網(wǎng)絡(luò )標記的設計。

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

在圖3中，僅通過(guò)拖動(dòng)鼠標并輸入其類(lèi)型，就可以看到用戶(hù)調整神經(jīng)網(wǎng)絡(luò )標記，更改檢測到的內容并進(jìn)行新標記。

點(diǎn)擊查看完整大小的圖片

圖3.用戶(hù)對神經(jīng)網(wǎng)絡(luò )標記的調整。

每次測試新的屏幕設計并且用戶(hù)進(jìn)行標記更正時(shí)，都會(huì )生成兩個(gè)XML文件：一個(gè)文件饋入神經(jīng)網(wǎng)絡(luò )，另一個(gè)文件是將用于生成應用程序的屏幕。      

第一個(gè)XML文件為網(wǎng)絡(luò )提供了在下一個(gè)培訓課程中學(xué)習做出更精確標記的可能性。該腳本使用正確的標記保存圖像和文件，以便對模型進(jìn)行不斷的改進(jìn)。

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

點(diǎn)擊查看完整大小的圖片

圖4. Android XML輸出。

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

圖5（下圖）說(shuō)明了完整的KnowCode流程，從獲取圖像開(kāi)始到項目結束。

點(diǎn)擊查看完整大小的圖片

圖5. KnowCode流程。

關(guān)于次優(yōu)用例

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

結論

GUI的創(chuàng )建對于設計人員和開(kāi)發(fā)人員以及嵌入式設備來(lái)說(shuō)都是一個(gè)巨大的挑戰，隨著(zhù)采用低級技術(shù)（例如C / C ++），這個(gè)問(wèn)題變得更大，這會(huì )在設計原型和可在其上運行的實(shí)際應用程序之間引入巨大的TIME間隔。設備。

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