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

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).

• Autores: Hernández Hernández, Camilo; Rodríguez Gutiérrez, Jonathan
• Tipo de recurso: Trabajo de grado de pregrado
• Fecha de publicación: 2020
• Institución: Universidad Distrital Francisco José de Caldas
• Repositorio: RIUD: repositorio U. Distrital
• Idioma: spa
• OAI Identifier: oai:repository.udistrital.edu.co:11349/27938
• Acceso en línea: http://hdl.handle.net/11349/27938
• Palabra 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; Ingeniería de Sistemas - Tesis y disertaciones académicas; Redes neurales (Informática); HTML (Lenguaje de procesamiento de texto); Diseño de páginas Web; Hojas de estilo en cascada; Neural Networks; Html; Css; Web Development; Code Generation; Convolutional Networks; Object Detection; Machine Learning; Random Data Generation; Grammar Fuzzer; Feature Extraction; Mockup; Website Prototype
• License: Atribución-NoComercial-SinDerivadas 4.0 Internacional