Creare design a bassa fedeltà parlando al computer

Avevamo un sogno...#

TeleportHQ è stata fondata nel 2016 con l’obiettivo di rendere la tecnologia più umana. Abbiamo riunito un team internazionale di designer, sviluppatori e data scientist, desiderosi di creare strumenti abbastanza potenti da raccogliere e valorizzare il sapere umano accumulato e automatizzare così sempre più il processo di creazione delle interfacce utente.

Una delle idee iniziali nella nostra lista dei desideri di ricerca era generare siti web semplicemente parlando a un computer. Le recenti innovazioni nell’intelligenza artificiale hanno reso per la prima volta concreta la generazione di interfacce utente.

Per creare una soluzione di apprendimento automatico efficace, avevamo bisogno di due elementi fondamentali: una grande quantità di dati e uno strumento di «traduzione da essere umano a computer» in grado di riconoscere il linguaggio naturale e convertirlo in linguaggi di programmazione. In particolare, si è rivelato molto difficile trovare lo strumento di traduzione adatto. Abbiamo provato strumenti come IBM Watson e Google Dialogflow, ma non erano adatti ai nostri scopi.

Nel frattempo, il nostro team di ingegneri stava sviluppando il Playground, una nuova piattaforma di sviluppo visuale per le interfacce utente. La tecnologia di Playground ha infine permesso a sviluppatori, designer e product maker di collaborare a un progetto e di visualizzare immediatamente in tempo reale il codice risultante dal loro lavoro collettivo.

Playground ha preso slancio, acquisendo forza e una comunità di utenti sempre più ampia. Si basa sul linguaggio di sviluppo di interfacce utente UIDL, il linguaggio di rappresentazione intermedio di TeleportHQ, e su una serie di generatori di codice open source.

Puoi vedere come collaborano nel nostro REPL, dove puoi modificare l'UIDL e vedere il codice generato in tempo reale in diverse varianti di JavaScript.

La creazione di Playground ha comportato un ulteriore vantaggio: il suo UIDL e i generatori di codice open source hanno fornito l'infrastruttura fondamentale per dare slancio al nostro filone di ricerca iniziale. Per un data scientist, l'UIDL, in quanto linguaggio specifico di dominio, era molto più facile da usare rispetto al codice puro, che può bloccarsi al minimo errore di sintassi e richiede l'intervento umano per essere corretto.

Grazie a questo vantaggio, TeleportHQ ha compiuto progressi significativi nel tentativo di generare siti web dialogando con un computer. Ecco un video che mostra i nostri ultimi risultati:

https://www.youtube.com/embed/fq1RPJUI_GM

Siamo sul punto di trasformare il nostro sogno in realtà e vorremmo condividere alcuni passaggi fondamentali della nostra ricerca nel seguente articolo del blog.

Definire l'obiettivo: stabilire l'output del modello#

Il primo passo è stato definire l'output per cui avremmo addestrato il nostro modello. Per semplificare il problema, abbiamo scelto quello che chiamiamo un approccio «semantico», ovvero un insieme di riquadri di delimitazione con le rispettive tipologie e posizioni assolute. Abbiamo chiamato questo formato «design a bassa fedeltà», perché rappresenta un sottoinsieme di ciò che comunemente viene definito design ad alta fedeltà (che include anche colori, forme, tipi di carattere e altri attributi visivi). Possiamo dire che il nostro design a bassa fedeltà sta a quello ad alta fedeltà come una struttura di tag HTML semplici sta a una pagina web completa di testi e proprietà CSS.

Selezionare i dati: creare il set di dati di addestramento#

Vale la pena ricordare che, parallelamente allo sviluppo di Playground, abbiamo iniziato a raccogliere e selezionare milioni di pagine web, così da disporre di un flusso continuo di dati selezionati da utilizzare per il nostro progetto da wireframe a codice .

Per manipolare e consultare questo database in continua crescita, abbiamo creato un parser web personalizzato in grado di analizzare fino a 6.000 pagine al minuto. Puoi approfondire questo argomento in questo articolo del blog.

Abbiamo deciso di generare le pagine web in modo iterativo, iniziando dalla barra di navigazione e terminando con il piè di pagina. A tal fine, abbiamo estratto dal nostro dataset principale di pagine web un sottoinsieme di 850.000 sezioni che rappresentano diverse parti semantiche delle pagine. Ecco un esempio:

Dati e screenshot di una sezione hero a bassa fedeltà

Primi tentativi: autoencoder sequence-to-sequence#

Alla fine del 2019 abbiamo iniziato con un approccio semplice e non supervisionato, basato su un autoencoder sequence-to-sequence. Al centro di questa architettura si trova un collo di bottiglia in cui le sezioni vengono codificate in un array monodimensionale. Questo collo di bottiglia viene solitamente utilizzato per generare nuovi dati; abbiamo quindi pensato che fosse possibile generare nuovi design campionandone casualmente i valori.

Purtroppo, non ha funzionato come previsto. Sebbene il sistema fosse in grado di apprendere a codificare e decodificare, falliva completamente con nuovi campioni o con una codifica casuale.

Abbiamo provato alcuni altri approcci e architetture, tra cui autoencoder variazionali, GAN e reti neurali a grafo, ma dopo 9 mesi di tentativi ed errori i risultati non erano utilizzabili.

Architettura dell'autoencoder

La svolta: l'avvento della tecnologia GPT-3#

All'inizio di quest'anno, OpenAI ha rilasciato una nuova versione del Generative Pretrained Transformer (GPT-3). Il suo sistema stabilisce un nuovo standard per i risultati all'avanguardia in diverse benchmark, come la risposta alle domande e la traduzione automatica.

GPT-3 genera sequenze di valori discreti sulla base di un contesto fornito. Partendo da questo contesto, il modello genera il resto della sequenza completandola automaticamente, un token alla volta.

Poiché è stato addestrato sull’ intero Internet, il modello offre risultati straordinari in una vasta gamma di ambiti, dalla filosofia alla medicina. Ma un caso d’uso in particolare ha attirato la nostra attenzione: la generazione di codice.

Due esempi in particolare si sono distinti. Nel primo, GPT-3 è stato usato per generare comandi Bash. Nel secondo, è stato usato per generare codice JSX. Questi due esempi hanno suscitato grande entusiasmo nel nostro team, perché era evidente che il modello aveva assimilato con successo tutti i dati di Stack Overflow. Una prova inconfutabile del fatto che la tecnologia GPT poteva permettere di dialogare con una macchina e generare interfacce utente.

GPT-3 genera comandi Bash a partire dal linguaggio naturale

Vento in poppa: sfruttare la potenza di GPT#

Entusiasti del potenziale di questa tecnologia, TeleportHQ ha richiesto l’accesso anticipato a GPT-3, ma la nostra richiesta non è stata accolta. Ciononostante, eravamo convinti che la risposta al nostro problema di apprendimento automatico risiedesse nell’architettura GPT. Questo ci ha spinto a crearne una nostra versione. Dopo alcune ricerche, abbiamo scelto di lavorare con minGPT, un’implementazione leggera di GPT.

Un’immagine vale più di mille parole: GPT a confronto con minGPT

Grazie ai dati a nostra disposizione e alla semplicità di minGPT, siamo riusciti a fornire rapidamente i nostri dati alla rete. Con nostra grande sorpresa, ha funzionato e basta.

In questo primo esperimento, il modello ha imparato a generare le sezioni delle nostre pagine, carattere dopo carattere, includendo la profondità e le coordinate di ogni elemento.

Usando il contesto “DIV 0 0.5 0.5 1.0 1.0”, il modello è riuscito a completare automaticamente i dati di una sezione. È stato quindi possibile ricostruire la seguente struttura ad albero:

Prima sezione generata con GPT-UI a partire dal contesto “DIV 0 0.5 0.5 1.0 1.0”

Nonostante i risultati promettenti, il problema non era ancora risolto: non era ancora possibile definire il contesto come intento dell’utente. Abbiamo quindi perfezionato il modello inserendo all’inizio della sequenza il contenuto da generare (ad esempio, il numero di immagini, paragrafi o div).

Ancora una volta: ha funzionato e basta.

Di seguito sono riportate alcune sezioni (selezionate ad hoc) generate da questo modello migliorato. In tutti i casi, non solo le visualizzazioni ad albero e i riquadri di delimitazione erano coerenti, ma le sezioni generate contenevano anche i contenuti richiesti.

Un esempio del nuovo contesto è: “IMG 2 P 2 H1 2 $”. Inserendolo semplicemente prima della sezione, il modello poteva iniziare dopo il primo “$” e generare automaticamente l’intera sezione.

Tre sezioni generate nelle prime fasi dei nostri esperimenti

Ci siamo poi spinti oltre, fornendo ulteriori informazioni all’inizio della sequenza per arricchire il prompt. Il sistema poteva così imparare a generare sezioni con altezza, orientamento e funzioni specifici.

La nostra prima architettura funzionante

Ci mancava ancora un ultimo elemento: un’interfaccia utente che permettesse a una persona di comunicare con il computer usando il linguaggio naturale. Abbiamo realizzato la seguente configurazione, in cui l’intento dell’utente viene inserito tramite un modulo.

Il primo modulo utilizzato per interagire con il modello

Dopo aver costruito il modulo, abbiamo aggiunto un livello di elaborazione programmatico che trasforma i comandi in linguaggio naturale (ad es. «Ehi TeleportHQ, crea una sezione di tipo barra di navigazione con 1 immagine e 4 link, alta 65 pixel») in contesti (ad es. «NAVBAR $ h 65 $ IMAGE 1 LINK 4 $»).

Qui sotto puoi vedere una demo della nostra interfaccia utente attuale. Consente all’utente di interagire con il modello e creare una pagina web in pochi minuti.

Prototipo GPT-UI

Nuovi orizzonti: verso il 2021…#

Quattro anni fa, TeleportHQ era uno dei pochi team convinti che fosse possibile creare interfacce utente usando il linguaggio naturale. Da allora, abbiamo lavorato con costanza per gettare le basi del percorso verso una comunicazione fluida tra esseri umani e macchine. I nostri risultati ci avvicinano sempre più alla missione originaria: automatizzare completamente il processo di creazione delle interfacce utente.

Oggi disponiamo di un prototipo GPT-UI perfettamente funzionante. Contiene 6 milioni di parametri, a fronte dei 175 miliardi del colossale GPT-3.

GPT-3 è apprezzato per la sua straordinaria potenza e per la capacità di affrontare potenzialmente qualsiasi attività in lingua inglese; il nostro modello, invece, offre maggiore specializzazione e reattività grazie alle sue dimensioni ridotte e agili.

Con il tempo, usando i dati giusti e grazie all’ulteriore addestramento dell’architettura Teleport, il nostro GPT-UI potrebbe competere con GPT-3 nella creazione di interfacce utente a partire dal linguaggio naturale, con il vantaggio aggiuntivo di essere completamente personalizzabile e di richiedere solo una frazione delle risorse necessarie per eseguire il modello.

TeleportHQ ha già iniziato ad applicare lo stesso approccio per creare altri nuovi modelli specializzati nella realizzazione di componenti specifici e di interi design per dispositivi mobili.

Siamo entusiasti del suo potenziale e fiduciosi che in un futuro prossimo saremo in grado di generare pagine web complete e ad alta fedeltà con una sola richiesta.

Se desideri richiedere una demo privata, proporre una collaborazione o darci un feedback, ti invitiamo a contattarci all’indirizzo hello@teleporthq.io .

💡

Se ti è piaciuto questo articolo, potrebbero interessarti anche i nostri precedenti risultati sull’uso del machine learning per la generazione automatica di codice a partire da wireframe.

https://www.youtube.com/embed/ZD8Cnzc6KlY