Abstract:
User Interface Design process includes the part from an imagination that begins on a piece of paper or whiteboard where designers share thoughts. User Interface designers use a technique of paper prototyping in low-fidelity sketches to implement the conceptual design. Once a design is drawn, it is usually captured within a photograph, converted to high-level mockup, and manually translated into a working client-side code by developers which takes a lot of effort and delays the design process. Recently, various studies have been done to automate the process by using automatic code generation. However, most of the studies on generating code from low fidelity designs were conducted using classical computer vision techniques and depend on a heuristically-designed visual understanding of graphical user interface rules. Thus, in this work, we present a system for automatic code generation that combines recent advances in computer vision and deep learning for translating a UI design sketch into a GUI skeleton code. The proposed model has two main components: component recognition and code generation. The deep learning learns to extract visual features in UI images, their spatial layouts, and the generator can generate GUI skeletons based on the information from the detection model. The code generation layer calculates the position of each component on the input image to generate the proper layout. The proposed system implemented using Tensorflow object detection with python and tested using samples of sketched UI image datasets collected from randomly selected individuals. Extensive experiments have been done to evaluate the accuracy of the component recognition model. The results show that the performance of Faster R-CNN Inception ResNet v2 is the best on the test dataset with a mAP score of 95.5%, followed by Faster RCNN Inception with a mAP of 91.2% and SSD with a mAP of 87.5%. The code generation model designed with pixel-based code generation techniques using front end frameworks and layout algorithms. The generality of the system has been evaluated with different input containing various layout structures.