使用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％，同时即使在低端设备上也能保持相同的性能。