部署一个令人愉快和流畅的用户界面是那些开发现代软件应用程序的人关心的问题之一，无论是嵌入式系统、移动设备还是计算机。开发图形用户界面 (GUI) 终成为开发过程中代价高昂的一步，因为它需要良好的设计工作来创建应用程序的用户界面/用户体验 (UI/UX) 和编码本身，通常必须在尝试改善系统使用中的用户体验时进行修改和返工。

本文展示了如何使用 KnowCode AI 减少开发和改进这些界面的时间，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 所示，Home Appliance 应用程序是为演示使用 KnowCode 工具的完整过程而创建的设计。GitHub上提供了此应用程序的代码。

点击查看完整大小的图片

图 1. 用于测试神经网络的设计。（：TotalCross）

初，屏幕的设计被添加到神经网络的测试中，图 2 说明了相同的出口标记，结果识别出图像上 17 个组件中的 14 个。

点击查看完整大小的图片

图 2. 带有神经网络标记的设计。（：TotalCross）

下一步是调整丢失的组件和屏幕上每个组件的轮廓有一些差异的标记。图 3 说明了用户对标记进行更正。

在图 3 中，可以看到用户调整神经网络标记、更改检测到的内容并通过拖动鼠标并输入其类型来创建新标记。

点击查看完整大小的图片

图 3. 用户对神经网络标记的调整。（：TotalCross）

每次测试新的屏幕设计并且用户进行标记更正时，都会生成两个 XML 文件：一个文件为神经网络提供数据，另一个文件将用于生成应用程序的屏幕。      

个 XML 文件打开了网络学习在下一个培训课程中做出更标记的可能性。该脚本保存图像和带有正确标记的文件，以便模型不断改进。

另一个文件是代表屏幕本身的 Android XML（图 4）。我们选择这项技术是因为我们不想引入不必要的新格式。为什么不将成熟的技术之一应用于不同的目的（在 Linux ARM 上运行）？

点击查看完整大小的图片

图 4.Android XML 输出。（：TotalCross）

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

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

点击查看完整大小的图片

图 5. KnowCode 流程。（：TotalCross）

关于次优用例

KnowCode-AI在输入市场上常用的3:4、16:9、18:9或21:9等比例的屏幕图像时，效果不错。与这些比例相差很远的屏幕通常会导致网络标记的命中率很低。虽然这不影响项目的后续，但需要进行更多的调整，从而增加终 UI 的创建时间。

结论

GUI 创建对于设计人员和开发人员来说是一个巨大的挑战，对于嵌入式设备来说，这个问题甚至更大，因为采用了 C/C++ 等低级技术，在设计原型和准备好运行的实际应用程序之间引入了巨大的时间差距。设备。