Converting web pages mockups to HTML using machine learning

Converting Web pages mockups to code is a task that developers typically perform. Due to the time required to accomplish this task, the time available to devote to application logic is reduced. So, the main goal of the present work was to develop deep learning models to automatically convert mockups of Web graphical interfaces into HTML, CSS and Bootstrap code. The trained model must be deployed as a Web application. Two deep learning models were built, resulting from two different approaches to integrate in the Web application. The first approach uses a hybrid architecture with a convolutional neuronal network (CNN) and two recurrent networks (RNNs), following the encoder-decoder architecture commonly adopted in image captioning. The second approach is focused on the spatial component of the problem being addressed, and includes the YOLO network and a layout algorithm. Testing with the same dataset, the prediction’s correction achieved with the first approach was 71.30%, while the se cond approach reached 88.28%. The first contribution of the present paper is the development of a rich dataset with Web pages GUI sketches and their captions. There was no dataset with sufficiently complex GUI sketches before we start this work. A second contribution was applying YOLO to detect and localize HTML elements, and the development of a layout algorithm that allows us to convert the YOLO result into code. It is a completely different approach from what is found in the related work. Finally, we achieved with YOLO-based architecture a prediction’s correction higher than reported in the literature.FCT - Fundação para a Ciência e Tecnologia within the R&D Units Project Scope: UIDB/00319/202

Conversão de esboços de páginas Web para HTML usando aprendizagem automática

Dissertação de mestrado em Engenharia InformáticaIn the last decades, there has been an exponential development in the area of computing, which includes Artificial Intelligence (AI). The development of AI translates into the emergence of programs that replicate the ability to make decisions, perceive and solve problems in a similar way to humans. Today, artificial intelligence is already part of various areas of society, such as security, health, or virtual assistants. This dissertation aimed to develop a Web application that converts graphical interface sketches, elaborated with the Balsamiq Mockups application, into HTML, CSS and Bootstrap code. Converting a Web page sketch into code is a task that developers typically perform. Due to the time consuming of this task, it becomes impossible to devote more time to the application logic. On the other hand, it is a repetitive and tedious task. Two deep neural network models were built, divided into two distinct approaches. The first approach, presenting poor results, uses a convolutional network and two recurring networks, according to an encoder-decoder architecture, similar to image captioning. It also uses a DSL language and a compiler that transforms DSL into code. The second approach is completely different and it is more focused on the spatial component of the addressed task. It uses YOLO model and a layout algorithm that converts the output of YOLO into code. In the same test set, the first approach achieves 71.30% accuracy, while in the second approach it yields 88.28% accuracy. The Web application, which allows the user to upload images and automatically generate HTML, CSS and Bootstrap code, is supported by the YOLO based model as it gives better results.Nas últimas décadas assistiu-se a um desenvolvimento exponencial na área da computação, na qual está incluída a inteligência artificial. O desenvolvimento da inteligência artificial traduz-se no aparecimento de programas que replicam a capacidade de decisão, perceção e resolução de problemas do ser humano. Atualmente, a inteligência artificial já faz parte de várias áreas da sociedade, como a segurança, a saúde ou os assistentes virtuais. A presente dissertação tinha como objetivo desenvolver uma aplicação Web que permitisse converter esboços de interfaces gráficas, elaborados com a aplicação Balsamiq Mockups, em código HTML, CSS e Bootstrap. A conversão de esboços de páginas Web em código e uma tarefa normalmente realizada pelos programadores. Devido ao tempo necessário para realizar esta tarefa, reduz-se o tempo disponível para dedicar a lógica da aplicação. Por outro lado, a aplicação a desenvolver eliminaria boa parte de uma tarefa repetitiva e tediosa. Construíram-se dois modelos de aprendizagem profunda, resultado de duas abordagens distintas. A primeira abordagem, com piores resultados, utiliza uma rede neuronal convolucional e duas redes recorrentes segundo uma arquitetura codificador-descodificador, semelhante ao que se costuma adotar na legendagem de imagens. Utiliza ainda uma linguagem DSL e um compilador que transforma a DSL em código HTML, CSS e Bootstrap. A segunda abordagem, completamente diferente e mais focada na componente espacial do problema a resolver, consiste na utilização do YOLO é um algoritmo de layout que converte a saída do YOLO em código HTML, CSS e Bootstrap. No mesmo conjunto de teste e de acordo com as métricas desenvolvidas para avaliar os modelos, a primeira abordagem resulta em 71.30% de correção, enquanto que a segunda abordagem permitiu alcançar resultados muito superiores (88.28%). A aplicação Web permite ao utilizador carregar imagens e gerar automaticamente o código HTML, CSS e Bootstrap. A aplicação é suportada pelo modelo que resultou da segunda abordagem e que apresenta melhores resultados