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

本文介绍了如何使用KnowCode AI减少开发和改进这些接口的时间,该工具使用深度学习来理解原型图像并将其转换为嵌入式设备的GUI。这种方法可以识别设计专业人员设计的布局组件,生成XML标记文件,最后将XML转换为可在嵌入式系统,移动设备或台式机上运行的项目。此过程仅需几分钟,并使用开源技术。

创建用户界面的困难

当出现新应用程序的开发思想时,用户界面和体验是极其重要的元素。对于项目而言,通常需要花费大量时间进行工作,以考虑应如何向用户展示应用程序以及此初始可执行接口的开发,这是很常见的。

换句话说,要将良好的应用程序思想转换为源代码时,会涉及合理的成本和时间,尤其是当我们谈论的是嵌入式设备时,与传统计算机相比,这些设备的处理能力和内存更少。

因此,KnowCode项目应运而生,其目标是减少软件界面开发的时间,协助开发应用程序界面的初始且成本高昂的过程,将屏幕的设计转换为可执行代码和功能代码。换句话说,这个想法是成为一个使用深度学习来理解图像,识别由设计专家设计的组件,将该图像转换为XML标记文件,然后将该文件转换为可在其上执行的项目的工具。系统芯片,手机或计算机,并使用开源技术(例如 总跨度 for this purpose.

KnowCode执行过程

KnowCode有两个主要的执行模块: 知识编码KnowCode-XML。 KnowCode-AI基于深度神经网络,该网络经过训练,输入的数据集超过60,000张。 KnowCode-XML是一个开放源代码库,允许开发人员使用Android XML创建GUI并在具有以下功能的Linux ARM设备上以较低的占用空间运行GUI: 总跨度 SDK.

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

知识编码的输出是一个XML标记文件,将用作系统模块的输入,该文件会将XML转换为各种设备平台(例如Android,Linux,Linux-ARM和Windows)上的可执行文件。

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

示例应用程序

如图1所示,家用电器应用程序是一个设计,旨在演示使用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)

关于次优用例

当输入的图像是市场上常用比例的屏幕图像(例如3:4、16:9、18:9或21:9)时,KnowCode-AI将具有良好的效果。与这些比例相距很远的屏幕通常会导致网络标记的命中率较低。尽管这不是项目后续工作的障碍,但仍需要进行更多调整,从而增加了最终UI的创建时间。

结论

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

KnowCode带来了一种缩小这种差距的新方法,它使用Computer Vision通过使用TotalCross,Android XML等高级,已建立的开源技术将现有系统的图像原型或屏幕截图转换为真实的应用程序。这种方法最多可将与GUI开发相关的时间减少80%,同时即使在低端设备上也能保持相同的性能。如果您想尝试KnowCode AI的结果,只需将您的GUI原型发送到 [email protected] 我们将向您发送可执行文件和应用程序的源代码。

我们欢迎您的意见和建议。 =)


布鲁诺·穆尼兹(Bruno Muniz) 是的首席执行官 总跨度。作为一名超过12年的企业家,TotalCross是他的第四家公司’成立。 Bruno在软件开发方面拥有15年以上的经验,尤其是在移动应用程序方面。他有一个硕士’拥有计算机科学学位,是一名创业爱好者,并且对巴西的创业领域颇有兴趣。 Bruno认为自己是OpenSource新手,但始终在学习= P
雅格·奎萨多(Iaggo Quezado) 是TotalCross的开发人员。他是一名程序员,游戏玩家和科学计算机专业的学生,​​喜欢长时间的游戏和编程课程,就像他房间的RGB一样明亮。
帕特里克·马丁斯 是TotalCross的一名程序员,专注于机器学习,数据科学和计算机视觉。他是计算机工程专业的学生,​​制造商和水族馆专家。

相关内容:

要获得更多嵌入式产品, 订阅嵌入式’的每周电子邮件通讯.

发表评论

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.