Da mockup ad HTML/CSS con l’artificial front-end automation

In questo periodo stiamo spesso parlando di intelligenze artificiali e degli algoritmi di machine learning. Oggi vogliamo restare in tema analizzando un interessante articolo di Emil Wallnér, Software Engineer presso l’Università di Computer Scienze 42 di Parigi che descrive nei dettagli il processo di realizzazione di una rete neurale volta alla conversione di design mockup in codice HTML/CSS. Nel medesimo post il developer scrive anche che entro tre anni gli algoritmi di deep learning rivoluzioneranno il settore del front-end development.

Secondo Wallnér attualmente la barriera principale che impedisce una completa automazione dello sviluppo front-end è rappresenta dalla potenza di calcolo delle attuali reti neurali. Tuttavia è già possibile impiegare algoritmi di deep learning per sintetizzare training data (dei modelli) cosi da iniziare l’esplorazione del settore dell’artificial front-end automation applicato allo sviluppo software.

Per l’autore è possibile realizzare una rete neurale con la capacità di convertire dei semplici design mockup in codice HTML/CSS in modo completamente automatizzato. La prima parte del lavoro è stata già svolta sulla base dei pix2code paper, e il codice di base della rete neurale è disponibile su Github e sulla piattaforma FloydHub, si tratta di un progetto realizzato in Python, Kers e il framework TensorFlow.

Per addestrare la rete neurale saranno necessari numerosi screenshot in modo che l’AI possa generare una prima versione del codice HTML. Il difficile arriva qui, ovvero quando bisogna insegnare alla AI come interpretare le immagini per poi realizzare il codice, è necessario infatti definire dei modelli di apprendimento cosi che l’intelligenza artificiale che gestisce la rete neurale possa apprendere come scrivere il codice partendo dalle immagini.

Successivamente si deve implementare un sistema di encoding e decodiong per analizzare le immagini e per unificare i vari pezzi di codice derivati dai design mockup. Durante i test effettuati da Wallnér sono stati anche impiegati i tool di Bootstrap per combinare HTML e CSS generati dalla rete neurale.

Tuttavia una rete neurale di tale entità, che cioè possa gestire una tale mole di operazioni, comporta una spesa ingente, sopratutto per quanto riguarda le risorse hardware. Come anticipato Wallnér è ben conscio di questo aspetto. Per il developer il settore dell’artificial front-end automation non è ancora molto sviluppato proprio per tale motivo, oggi trovare una simile potenza di calcolo a basso costo è ancora complesso, ma in futuro sarà probabilmente tutto più semplice. Il suo progetto, composto dai due tool, Screenshot-to-code-in-Keras e picturetocode, è un comunque un ottimo punto di partenza, ed essendo completamente open source potrebbe diventare la base per altre iniziative simili.

Via Emil Wallnér