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

Detalhes bibliográficos
Autor(a) principal: Bouças, Tiago André Alves
Data de Publicação: 2020
Tipo de documento: Dissertação
Idioma: por
Título da fonte: Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
Texto Completo: https://hdl.handle.net/1822/80740
Resumo: Dissertação de mestrado em Engenharia Informática
id RCAP_e8353d5ca17cb63ae6406c54e80288f8
oai_identifier_str oai:repositorium.sdum.uminho.pt:1822/80740
network_acronym_str RCAP
network_name_str Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
repository_id_str 7160
spelling Conversão de esboços de páginas Web para HTML usando aprendizagem automáticaArtificial intelligenceNeural networkDeepConvolutional networkRecurring networkYOLOWeb applicationInteligência artificialRede neuronalProfundaConvolucionalRecorrentesAplicação webEngenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e InformáticaDissertaçã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.Esteves, AntónioUniversidade do MinhoBouças, Tiago André Alves2020-01-092020-01-09T00:00:00Zinfo:eu-repo/semantics/publishedVersioninfo:eu-repo/semantics/masterThesisapplication/pdfhttps://hdl.handle.net/1822/80740por203024761info:eu-repo/semantics/openAccessreponame:Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)instname:Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informaçãoinstacron:RCAAP2023-07-21T12:44:16Zoai:repositorium.sdum.uminho.pt:1822/80740Portal AgregadorONGhttps://www.rcaap.pt/oai/openaireopendoar:71602024-03-19T19:41:55.249573Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos) - Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informaçãofalse
dc.title.none.fl_str_mv Conversão de esboços de páginas Web para HTML usando aprendizagem automática
title Conversão de esboços de páginas Web para HTML usando aprendizagem automática
spellingShingle Conversão de esboços de páginas Web para HTML usando aprendizagem automática
Bouças, Tiago André Alves
Artificial intelligence
Neural network
Deep
Convolutional network
Recurring network
YOLO
Web application
Inteligência artificial
Rede neuronal
Profunda
Convolucional
Recorrentes
Aplicação web
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
title_short Conversão de esboços de páginas Web para HTML usando aprendizagem automática
title_full Conversão de esboços de páginas Web para HTML usando aprendizagem automática
title_fullStr Conversão de esboços de páginas Web para HTML usando aprendizagem automática
title_full_unstemmed Conversão de esboços de páginas Web para HTML usando aprendizagem automática
title_sort Conversão de esboços de páginas Web para HTML usando aprendizagem automática
author Bouças, Tiago André Alves
author_facet Bouças, Tiago André Alves
author_role author
dc.contributor.none.fl_str_mv Esteves, António
Universidade do Minho
dc.contributor.author.fl_str_mv Bouças, Tiago André Alves
dc.subject.por.fl_str_mv Artificial intelligence
Neural network
Deep
Convolutional network
Recurring network
YOLO
Web application
Inteligência artificial
Rede neuronal
Profunda
Convolucional
Recorrentes
Aplicação web
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
topic Artificial intelligence
Neural network
Deep
Convolutional network
Recurring network
YOLO
Web application
Inteligência artificial
Rede neuronal
Profunda
Convolucional
Recorrentes
Aplicação web
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
description Dissertação de mestrado em Engenharia Informática
publishDate 2020
dc.date.none.fl_str_mv 2020-01-09
2020-01-09T00:00:00Z
dc.type.status.fl_str_mv info:eu-repo/semantics/publishedVersion
dc.type.driver.fl_str_mv info:eu-repo/semantics/masterThesis
format masterThesis
status_str publishedVersion
dc.identifier.uri.fl_str_mv https://hdl.handle.net/1822/80740
url https://hdl.handle.net/1822/80740
dc.language.iso.fl_str_mv por
language por
dc.relation.none.fl_str_mv 203024761
dc.rights.driver.fl_str_mv info:eu-repo/semantics/openAccess
eu_rights_str_mv openAccess
dc.format.none.fl_str_mv application/pdf
dc.source.none.fl_str_mv reponame:Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
instname:Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
instacron:RCAAP
instname_str Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
instacron_str RCAAP
institution RCAAP
reponame_str Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
collection Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
repository.name.fl_str_mv Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos) - Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
repository.mail.fl_str_mv
_version_ 1799132970314891264

Registros relacionados