Show simple item record

dc.contributor.advisorAlvarado Nieto, Luz Deicyspa
dc.creatorHernández Hernández, Camilospa
dc.creatorRodríguez Gutiérrez, Jonathanspa
dc.date.accessioned2021-12-23T19:47:04Z
dc.date.available2021-12-23T19:47:04Z
dc.date.created2020-11-20spa
dc.identifier.urihttp://hdl.handle.net/11349/27938
dc.descriptionEl 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).spa
dc.description.abstractThis 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).spa
dc.format.mimetypepdfspa
dc.language.isospaspa
dc.rightsAtribución-NoComercial-SinDerivadas 4.0 Internacional*
dc.rights.urihttp://creativecommons.org/licenses/by-nc-nd/4.0/*
dc.subjectRedes Neuronalesspa
dc.subjectHtmlspa
dc.subjectCssspa
dc.subjectDesarrollo Webspa
dc.subjectGeneración de Códigospa
dc.subjectRedes Convolucionalesspa
dc.subjectDetección de Objetosspa
dc.subjectAprendizaje Automáticospa
dc.subjectGeneración de Datos Aleatoriosspa
dc.subjectFuzzer Gramaticalspa
dc.subjectExtracción de Característicasspa
dc.subjectMaquetaciónspa
dc.subjectPrototipo de sitio webspa
dc.titleCreació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 Mockupsspa
dc.subject.lembIngeniería de Sistemas - Tesis y disertaciones académicasspa
dc.subject.lembRedes neurales (Informática)spa
dc.subject.lembHTML (Lenguaje de procesamiento de texto)spa
dc.subject.lembDiseño de páginas Webspa
dc.subject.lembHojas de estilo en cascadaspa
dc.rights.accessrightsinfo:eu-repo/semantics/openAccessspa
dc.title.titleenglishCreation of a neural network architecture with a modular approach for the generation of HTML and CSS source code from Mockupsspa
dc.subject.keywordNeural Networksspa
dc.subject.keywordHtmlspa
dc.subject.keywordCssspa
dc.subject.keywordWeb Developmentspa
dc.subject.keywordCode Generationspa
dc.subject.keywordConvolutional Networksspa
dc.subject.keywordObject Detectionspa
dc.subject.keywordMachine Learningspa
dc.subject.keywordRandom Data Generationspa
dc.subject.keywordGrammar Fuzzerspa
dc.subject.keywordFeature Extractionspa
dc.subject.keywordMockupspa
dc.subject.keywordWebsite Prototypespa
dc.type.degreeMonografíaspa
dc.rights.accesoAbierto (Texto Completo)spa
dc.type.driverinfo:eu-repo/semantics/bachelorThesisspa
dc.type.coarhttp://purl.org/coar/resource_type/c_7a1fspa


Files in this item

Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail

This item appears in the following Collection(s)

Show simple item record

Atribución-NoComercial-SinDerivadas 4.0 Internacional
Except where otherwise noted, this item's license is described as Atribución-NoComercial-SinDerivadas 4.0 Internacional