Pixel negli screenshot e pixel nelle foto

Che cosa sono esattamente i pixel?#

Quando si parla di colori, designer e sviluppatori hanno bisogno di una convenzione chiamata spazio colore per potersi capire. I designer, infatti, hanno diffuso la pratica di assegnare ai colori nomi univoci (ad esempio «Nostalgia Rose», «Cloud Dancer », «Cocoon» di Pantone), mentre gli sviluppatori usano codici esadecimali. Alcuni riescono a riconoscere il colore semplicemente guardando i numeri del codice esadecimale.

I codici esadecimali seguono lo spazio colore RGB (rosso, verde, blu). Ad esempio, il colore principale di accento del nostro brand, il viola di TeleportHQ, è rappresentato da #822CEC, che corrisponde al 53% di rosso, al 23% di verde e all’86% di blu. Esistono anche altre convenzioni per gli spazi colore, come HSL (tonalità, saturazione, luminosità) e HSV (tonalità, saturazione, valore), che possono essere più adatte a casi specifici.

Lo spazio colore RGB si ispira al modo in cui i nostri occhi percepiscono i colori circostanti: i coni misurano l’intensità (luminosità) della luce a diversi livelli energetici (colore). Queste cellule trasmettono poi le informazioni al resto del cervello, permettendoci di percepire l’ambiente. Va notato che alcuni animali non hanno una visione tricromatica: i mammiferi marini sono monocromatici, mentre la maggior parte dei rettili è tetracromatica. I primi hanno un solo tipo di cellula conica e i secondi quattro, che permettono loro di vedere rispettivamente 100 milioni di colori, mentre la maggior parte degli esseri umani ne vede «solo» 10 milioni [rif. Wikipedia].

Sezione trasversale dell’occhio umano e ingrandimento della parete della retina, che mostra i nervi che catturano la luce e la trasmettono a bastoncelli e coni per l’analisi. Fonte: https://www.xrite.com

Le nozioni di intensità ed energia provengono dalla fisica. La luce è composta da fotoni con energie diverse e il cervello umano è in grado di percepire solo la luce compresa in un determinato intervallo di lunghezze d’onda. I fotoni più energetici appartengono alla banda degli ultravioletti (che ustionano la pelle), mentre quelli meno energetici appartengono alla banda degli infrarossi (il calore corporeo emette fotoni di questo tipo, visibili con le telecamere a infrarossi).

Lo spettro elettromagnetico. Fonte: https://www.radio2space.com

In uno schermo di computer, ogni pixel è composto da tre piccoli LED: rosso, verde e blu. Per riprodurre i colori, il computer regola l’intensità della luce emessa da ciascun LED e il nostro cervello elabora il risultato.

Primo piano dei pixel di un televisore. Fonte: https://jakubmarian.com

La luce risultante dovrebbe riprodurre ciò che vediamo in natura, ma c’è un problema. In natura il blu è meno diffuso che sullo schermo di un computer e il bianco, per esempio, è molto diverso dal colore del sole. Ecco perché la luce blu affatica tanto i nostri occhi e perché i filtri gialli e quelli per la modalità notturna sono utili per chi trascorre molto tempo davanti agli schermi.

L’apprendimento automatico eccelle con le immagini#

Confronto tra il colore bianco prodotto dai LED e quello della luce solare. Dati da http://galileo.graphycs.cegepsherbrooke.qc.ca

Nell’analisi delle immagini, i sistemi di apprendimento automatico non esaminano i codici esadecimali o i nomi dei colori. Analizzano invece i valori dei pixel, in modo simile a come i nostri occhi osservano gli stessi pixel. Per la macchina, le due immagini seguenti sono uguali:

Le stesse immagini in scala di grigi di una vista 3D, dal punto di vista del computer e da quello umano

Per lavorare con le immagini, l’apprendimento automatico utilizza un trucco interessante: esamina le immagini osservando gruppi di pixel anziché pixel isolati. Questo permette di rilevare schemi più complessi e migliora notevolmente le prestazioni dell’algoritmo di rilevamento. Questi sistemi specifici sono chiamati strati convoluzionali. Sovrapponendone diversi (il famoso deep learning), possiamo addestrare modelli capaci di apprendere caratteristiche più astratte e di alto livello. Sebbene siano stati inventati negli anni ’90 [ref], la potenza di calcolo e gli ampi set di dati necessari per sfruttarne appieno le capacità sono diventati disponibili solo nel 2012.[ref]

Illustrazione di uno strato convoluzionale in una rete neurale, da https://github.com/vdumoulin

Tuttavia, anche dopo così tanto tempo, non si è ancora compreso appieno perché le reti neurali ottengano risultati così buoni [ref].Uno degli esempi più eclatanti viene da un gruppo di ricercatori che ha dimostrato che era possibile ingannare l’algoritmo, facendogli credere che i gusci delle tartarughe fossero fucili [ref].Una possibile spiegazione è che la rete neurale si concentri più sulla trama di piccoli gruppi di pixel che sull’immagine nel suo insieme, contraddicendo quanto affermato pochi paragrafi fa, ovvero che questi algoritmi sono in grado di apprendere caratteristiche astratte.

Per una rete neurale, tutte queste immagini sono fucili. Da http://www.3ders.org

E gli screenshot?#

Questo ci porta alla differenza tra screenshot e fotografie. Le fotografie contengono gradienti molto delicati, che aiutano il modello a estrarre informazioni dall’immagine e a prendere decisioni valide. Negli screenshot questi gradienti sono molto meno presenti o, spesso, del tutto assenti, poiché l’immagine contiene aree monocromatiche. Di conseguenza, il modello ha pochissime informazioni da estrarre.

Uno screenshot e una foto osservati in 3D

Questi algoritmi sono ancora utili, ma non per tutti i tipi di problemi. Per esempio, in TeleportHQ eseguiamo diversi tipi di attività di machine learning nel nostro processo di generazione del codice a partire da wireframe o design ad alta definizione. Da un lato, otteniamo buoni risultati usando il rilevamento degli oggetti per individuare i singoli widget in uno screenshot; dall’altro, quando proviamo a classificare gli screenshot di app mobili in diversi tipi di schermate (gallerie, popup, menu, moduli), il modello non riesce ad apprendere i concetti di alto livello e un albero decisionale più semplice si è dimostrato più efficace. Presto pubblicheremo ulteriori informazioni su questi due progetti specifici.

Testo e immagini rilevati in due screenshot

Conclusione#

Non è ancora chiaro se questa differenza tra screenshot e immagini della vita reale influisca davvero sulle prestazioni delle reti neurali profonde. Tuttavia, la differenza è evidente osservando la rappresentazione tridimensionale dei pixel: è quasi come confrontare il paesaggio di una città con quello di una campagna.

La comunità del machine learning ha riconosciuto il deep learning come il principale protagonista della visione artificiale, ma per gli screenshot di applicazioni web e mobili crediamo che anche altre tecniche possano avere una possibilità.

Attualmente stiamo esplorando un approccio ibrido che combina i risultati delle tecniche di visione artificiale e di elaborazione del linguaggio naturale applicate alla stessa fonte di dati: stringhe HTML e le rispettive rappresentazioni DOM e informazioni renderizzate. Ne parleremo in un prossimo articolo del blog.

Come sempre, siamo molto interessati a confrontarci con altri appassionati su questo argomento. Se ti interessa la nostra ricerca, non esitare a contattarci attraverso uno dei nostri canali social, elencati nel piè di pagina di questo sito.