Utilize este identificador para referenciar este registo: https://hdl.handle.net/1822/70677

Registo completo
Campo DCValorIdioma
dc.contributor.authorBouças, Tiagopor
dc.contributor.authorEsteves, Antóniopor
dc.date.accessioned2021-03-10T16:56:48Z-
dc.date.available2021-03-10T16:56:48Z-
dc.date.issued2020-
dc.identifier.citationBouças, T. and Esteves, A. (2020). Converting Web Pages Mockups to HTML using Machine Learning.In Proceedings of the 16th International Conference on Web Information Systems and Technologies - Volume 1: WEBIST, ISBN 978-989-758-478-7, pages 217-224por
dc.identifier.isbn978-989-758-478-7-
dc.identifier.urihttps://hdl.handle.net/1822/70677-
dc.description.abstractConverting Web pages mockups to code is a task that developers typically perform. Due to the time required to accomplish this task, the time available to devote to application logic is reduced. So, the main goal of the present work was to develop deep learning models to automatically convert mockups of Web graphical interfaces into HTML, CSS and Bootstrap code. The trained model must be deployed as a Web application. Two deep learning models were built, resulting from two different approaches to integrate in the Web application. The first approach uses a hybrid architecture with a convolutional neuronal network (CNN) and two recurrent networks (RNNs), following the encoder-decoder architecture commonly adopted in image captioning. The second approach is focused on the spatial component of the problem being addressed, and includes the YOLO network and a layout algorithm. Testing with the same dataset, the prediction’s correction achieved with the first approach was 71.30%, while the se cond approach reached 88.28%. The first contribution of the present paper is the development of a rich dataset with Web pages GUI sketches and their captions. There was no dataset with sufficiently complex GUI sketches before we start this work. A second contribution was applying YOLO to detect and localize HTML elements, and the development of a layout algorithm that allows us to convert the YOLO result into code. It is a completely different approach from what is found in the related work. Finally, we achieved with YOLO-based architecture a prediction’s correction higher than reported in the literature.por
dc.description.sponsorshipFCT - Fundação para a Ciência e Tecnologia within the R&D Units Project Scope: UIDB/00319/2020por
dc.language.isoengpor
dc.publisherSCITEPRESSpor
dc.rightsopenAccesspor
dc.subjectDeep Learningpor
dc.subjectConvolutional Neural Networkpor
dc.subjectRecurrent Neural Networkpor
dc.subjectYOLOpor
dc.subjectWeb Page Mockuppor
dc.titleConverting web pages mockups to HTML using machine learningpor
dc.typeconferencePaperpor
dc.peerreviewedyespor
dc.relation.publisherversionhttps://www.scitepress.org/Link.aspx?doi=10.5220/0010116302170224por
oaire.citationStartPage217por
oaire.citationEndPage224por
oaire.citationVolume1por
dc.identifier.doi10.5220/0010116302170224por
dc.subject.fosEngenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informáticapor
dc.subject.wosScience & Technologypor
sdum.conferencePublicationProceedings of the 16th International Conference on Web Information Systems and Technologiespor
sdum.bookTitlePROCEEDINGS OF THE 16TH INTERNATIONAL CONFERENCE ON WEB INFORMATION SYSTEMS AND TECHNOLOGIES (WEBIST)por
oaire.versionAMpor
Aparece nas coleções:CAlg - Artigos em livros de atas/Papers in proceedings

Ficheiros deste registo:
Ficheiro Descrição TamanhoFormato 
Webist-2020-mockups2code.pdf621,8 kBAdobe PDFVer/Abrir

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