Creación de una arquitectura de redes neuronales con un enfoque modular para la generación de código fuente HTML y CSS a partir de Mockups
Fecha
Fecha
2020-11-20
Director
Colaboradores
Título de la revista
ISSN de la revista
Título del volumen
Editor
Altmetric
Descripción
El presente trabajo busca desarrollar una arquitectura de redes neuronales capaz de traducir una captura de interfaz gráfica a código HTML y CSS. Esto con el fin de automatizar la mencionada actividad, ya que la elaboración manual de esta trae consigo ciertas desventajas (Capítulo 1 y 2). A pesar de que (Beltramelli, 2017), (Wallner, 2018) y (silverstar94, 2019) han propuesto redes neuronales como una prueba de concepto para el mismo fin; con este proyecto se propone una arquitectura con un enfoque modular y la capacidad de generar un mayor número de etiquetas en comparación con los anteriores trabajos (Capítulo 6). Para realizar el entrenamiento y evaluación de las redes se usaron datos artificiales y páginas web extraídas de internet (Capítulo 8 y 9) posteriormente en el caso de HTML fueron seleccionadas 3 arquitecturas Pix2Code, YOLOv3 y RetinaNet para la predicción de elementos (Capítulo 10). Por otra parte, para CSS se agruparon propiedades de acuerdo con las similitudes de sus efectos, definiendo gramáticas, construyendo datasets con base en estas y entrenando para la predicción de los estilos seleccionados (Capítulo 11). Como resultado principal se encontró que la mejor arquitectura para la detección de elementos HTML es YOLOv3. En el caso de CSS las arquitecturas con el codificador VGG16 y entrenadas con un batch de tamaño 16 obtuvieron el mejor desempeño. Por último las mejores arquitecturas obtenidas fueron integradas usando Rust para efectuar la generación de código fuente HTML y propiedades CSS, recibiendo como entrada una imagen de 1280x1280 píxeles (Capítulo 12).
Resumen
This work aims to develop a neural network architecture capable of translating a graphical interface screenshot into HTML and CSS code, in order to automate the mentioned activity, since the manual elaboration of this one brings certain disadvantages (Chapter 1 and 2). Although (Beltramelli, 2017), (Wallner, 2018) and (silverstar94, 2019) have proposed neural networks as a proof of concept for the same purpose, this project proposes an architecture with a modular approach and the ability to generate a greater number of tags compared to previous work (Chapter 6). To carry out the training and evaluation of the networks, artificial data and web pages extracted from the Internet were used (Chapter 8 and 9). Later, in the case of HTML, Pix2Code, YOLOv3 and RetinaNet architectures were selected for the prediction of elements (Chapter 10). On the other hand, CSS properties were grouped according to the similarities of their effects, defining grammars, building datasets based on them and training for the prediction of the selected styles (Chapter 11). As a main result, it was found that the best architecture for the detection of HTML elements is YOLOv3. In the case of CSS, architectures with the VGG16 encoder and trained with a batch size of 16 obtained the best performance. Finally, the best architectures obtained were integrated using Rust to perform the generation of HTML source code and CSS properties, receiving as input an image of 1280x1280 pixels (Chapter 12).
Palabras clave
Redes Neuronales, Html, Css, Desarrollo Web, Generación de Código, Redes Convolucionales, Detección de Objetos, Aprendizaje Automático, Generación de Datos Aleatorios, Fuzzer Gramatical, Extracción de Características, Maquetación, Prototipo de sitio web