A Model for Automatic Code Generation from High Fidelity Graphical User Interface Mockups using Deep Learning Techniques

Abstract

Graphical user interface (GUI) is the most prevalent type of user interfaces (UI) due to its visual nature, which allows direct manipulation and interaction with the software. Mockup-based design is a frequently used workflow for constructing GUI. In this workflow, the anticipated UI design process typically progresses through multiple steps, culminating in the creation of a higher fidelity mockup and subsequent implementation of that mockup into code. The design process involves repeating those multiple steps because of the ongoing changes in requirements, which can make the process tedious and necessitate modifications to the GUI code. Additionally, the process of implementing and converting a design into GUI code itself is laborious and time-consuming task that can prevent developers from dedicating the bulk of their time implementing the software's functionality and logic, making it a costly endeavor. Automating the code generation process using GUI design images can be a solution to mitigate these issues and allow more time to be allocated towards building the application's functionality. In this research paper, deep learning object detectors are employed to detect the predominant UI elements and their spatial arrangement in a high-fidelity UI mockup image. This approach generates an intermediate representation, including the layout hierarchy of the user interface leading to the automation of the front-end code generation process for the mockup. The proposed approach demonstrates its effectiveness through experimental results, achieving a recognition mean average precision (mAP) of 91.37% for atomic elements and 87.40% for container elements in the mockup image. Additionally, similarity metrics are employed to assess the visual resemblance between the generated mockups and the original ones.