使用(yòng)AI為(wèi)嵌入式设备创建GUI

2021-02-24

对于开发现代软件应用(yòng)程序的人（无论是嵌入式系统，移动设备还是计算机），部署令人愉悦且流畅的用(yòng)户界面是他(tā)们最大的担忧之一。开发图形用(yòng)户界面（GUI）最终是开发过程中的一个昂贵步骤，因為(wèi)它需要出色的设计工作来创建应用(yòng)程序的用(yòng)户界面/用(yòng)户體(tǐ)验（UI / UX）和编码本身，通常必须在尝试改善系统使用(yòng)中的用(yòng)户體(tǐ)验时，请进行修改和返工。

本文(wén)展示了如何使用(yòng)KnowCode AI减少开发和改进这些接口的时间，该工具使用(yòng)深度學(xué)习来理(lǐ)解原型图像并将其转换為(wèi)嵌入式设备的GUI。这种方法可(kě)以识别设计专业人员设计的布局组件，生成XML标记文(wén)件，最后将XML转换為(wèi)可(kě)在嵌入式系统，移动设备或台式机上运行的项目。此过程仅需几分(fēn)钟，并使用(yòng)开源技术。

创建用(yòng)户界面的困难

当出现新(xīn)应用(yòng)程序的开发思想时，用(yòng)户界面和體(tǐ)验是极其重要的元素。对于项目而言，通常需要花(huā)费大量时间进行工作，以考虑应如何向用(yòng)户展示应用(yòng)程序以及此初始可(kě)执行接口的开发，这是很(hěn)常见的。

换句话说，要将良好的应用(yòng)程序思想转换為(wèi)源代码时，会涉及合理(lǐ)的成本和时间，尤其是当我们谈论的是嵌入式设备时，与传统计算机相比，这些设备的处理(lǐ)能(néng)力和内存更少。

因此，KnowCode项目应运而生，其目标是减少软件界面开发的时间，协助开发应用(yòng)程序界面的初始和昂贵过程，将屏幕的设计转换為(wèi)可(kě)执行代码和功能(néng)代码。换句话说，这个想法是成為(wèi)一个使用(yòng)深度學(xué)习来了解图像，识别设计专业人员设计的组件，将该图像转换為(wèi)XML标记文(wén)件，然后将该文(wén)件转换為(wèi)可(kě)在其上执行的项目的工具。系统芯片，手机或计算机，并為(wèi)此使用(yòng)诸如TotalCross之类的开源技术。

KnowCode执行过程

KnowCode有(yǒu)两个主要的执行模块：KnowCode-AI和KnowCode-XML。KnowCode-AI基于深度神经网络，该网络经过训练，输入的数据集超过60,000张。KnowCode-XML是一个开放源代码库，允许开发人员使用(yòng)Android XML创建GUI，并使用(yòng)TotalCross SDK在Linux ARM设备上以低占用(yòng)空间运行它。

该过程从可(kě)以使用(yòng)任何设计工具（例如Figma，Adobe XD或Photoshop）创建的图像原型开始。KnowCode-AI没有(yǒu)附加到任何设计工具，这意味着它甚至可(kě)以处理(lǐ)现有(yǒu)的屏幕截图，以从一种技术迁移到另一种技术。下一步是在原型图像上运行算法，该算法将检测屏幕上的每个元素，例如Button，TextView，ImageView等。

KnowCode-AI的输出是XML标记文(wén)件，将用(yòng)作系统模块的输入，该文(wén)件会将XML转换為(wèi)各种设备平台（例如Android，Linux，Linux-ARM和Windows）上的可(kě)执行文(wén)件。

為(wèi)此，使用(yòng)了TotalCross SDK和KnowCode-XML库（免费和开放源代码），从而可(kě)以在最多(duō)种类型的平台上创建可(kě)执行项目。换句话说，KnowCode系统及其两个模块KnowCode-AI和KnowCode-XML，使开发人员可(kě)以从屏幕图像开始该过程，并以可(kě)以在不同平台上执行的项目结束，从而可(kě)以為(wèi)每个平台添加功能(néng)。屏幕，為(wèi)此目的使用(yòng)Java语言。

示例应用(yòng)程序

如图1所示，家用(yòng)電(diàn)器应用(yòng)程序是一个设计，旨在演示使用(yòng)KnowCode工具的完整过程。该应用(yòng)程序的代码可(kě)在GitHub上获得。

点击查看完整大小(xiǎo)的图片

最初，将屏幕的设计添加到神经网络的测试中，图2展示了该屏幕的出口标记，从而识别了图像上17个组件中的14个。

点击查看完整大小(xiǎo)的图片

图2。带有(yǒu)神经网络标记的设计。

下一步是调整缺少的组件以及在屏幕上每个组件的轮廓有(yǒu)所不同的情况下出现的标记。图3说明了用(yòng)户对标记进行的更正。

在图3中，仅通过拖动鼠标并输入其类型，就可(kě)以看到用(yòng)户调整神经网络标记，更改检测到的内容并进行新(xīn)标记。

点击查看完整大小(xiǎo)的图片

图3.用(yòng)户对神经网络标记的调整。

每次测试新(xīn)的屏幕设计并且用(yòng)户进行标记更正时，都会生成两个XML文(wén)件：一个文(wén)件馈入神经网络，另一个文(wén)件是将用(yòng)于生成应用(yòng)程序的屏幕。      

第一个XML文(wén)件為(wèi)网络提供了在下一个培训课程中學(xué)习做出更精确标记的可(kě)能(néng)性。该脚本使用(yòng)正确的标记保存图像和文(wén)件，以便对模型进行不断的改进。

另一个文(wén)件是一个Android XML，它代表屏幕本身（图4）。我们选择此项技术是因為(wèi)我们不想引入不必要的新(xīn)格式。為(wèi)什么不将最成熟的技术之一用(yòng)于其他(tā)目的（在Linux ARM上运行）？

点击查看完整大小(xiǎo)的图片

图4. Android XML输出。

要在设备上运行Android XML，我们只需要使用(yòng)TotalCross SDK创建一个新(xīn)项目，导入XML文(wén)件并导入KnowCode-XML库以在应用(yòng)程序中执行XML。

图5（下图）说明了完整的KnowCode流程，从获取图像开始到项目结束。

点击查看完整大小(xiǎo)的图片

图5. KnowCode流程。

关于次优用(yòng)例

当输入的图像是市场上通常使用(yòng)的比例（例如3：4、16：9、18：9或21：9）时，KnowCode-AI会获得良好的效果。比例遠(yuǎn)非如此的屏幕通常会导致网络标记的命中率较低。尽管这不是项目后续工作的障碍，但仍需要进行更多(duō)调整，从而增加了最终UI创建时间。

结论

GUI的创建对于设计人员和开发人员以及嵌入式设备来说都是一个巨大的挑战，随着采用(yòng)低级技术（例如C / C ++），这个问题变得更大，这会在设计原型和可(kě)在其上运行的实际应用(yòng)程序之间引入巨大的TIME间隔。设备。

KnowCode带来了一种缩小(xiǎo)这种差距的新(xīn)方法，它使用(yòng)Computer Vision通过使用(yòng)TotalCross，Android XML等高级，已建立的开源技术将现有(yǒu)系统的图像原型或屏幕截图转换為(wèi)真实的应用(yòng)程序。这种方法最多(duō)可(kě)将与GUI开发相关的时间减少80％，同时即使在低端设备上也能(néng)保持相同的性能(néng)。