Please use this identifier to cite or link to this item: https://hdl.handle.net/1822/80740

Full metadata record
DC FieldValueLanguage
dc.contributor.advisorEsteves, Antóniopor
dc.contributor.authorBouças, Tiago André Alvespor
dc.date.accessioned2022-11-21T10:21:13Z-
dc.date.available2022-11-21T10:21:13Z-
dc.date.issued2020-01-09-
dc.date.submitted2019-12-
dc.identifier.urihttps://hdl.handle.net/1822/80740-
dc.descriptionDissertação de mestrado em Engenharia Informáticapor
dc.description.abstractIn 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.por
dc.description.abstractNas ú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.por
dc.language.isoporpor
dc.rightsopenAccesspor
dc.rights.urihttp://creativecommons.org/licenses/by-nc/4.0/por
dc.subjectArtificial intelligencepor
dc.subjectNeural networkpor
dc.subjectDeeppor
dc.subjectConvolutional networkpor
dc.subjectRecurring networkpor
dc.subjectYOLOpor
dc.subjectWeb applicationpor
dc.subjectInteligência artificialpor
dc.subjectRede neuronalpor
dc.subjectProfundapor
dc.subjectConvolucionalpor
dc.subjectRecorrentespor
dc.subjectAplicação webpor
dc.titleConversão de esboços de páginas Web para HTML usando aprendizagem automáticapor
dc.typemasterThesiseng
dc.identifier.tid203024761por
thesis.degree.grantorUniversidade do Minhopor
sdum.degree.grade17 valorespor
sdum.uoeiEscola de Engenhariapor
dc.subject.fosEngenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informáticapor
Appears in Collections:BUM - Dissertações de Mestrado
DI - Dissertações de Mestrado

Files in This Item:
File Description SizeFormat 
Tiago Andre Alves Boucas.pdf3,82 MBAdobe PDFView/Open

This item is licensed under a Creative Commons License Creative Commons

Partilhe no FacebookPartilhe no TwitterPartilhe no DeliciousPartilhe no LinkedInPartilhe no DiggAdicionar ao Google BookmarksPartilhe no MySpacePartilhe no Orkut
Exporte no formato BibTex mendeley Exporte no formato Endnote Adicione ao seu ORCID