Pixel in Screenshots vs. Pixel in Fotos

Was genau sind Pixel?#

Wenn es um Farben geht, benötigen Designer und Entwickler eine gemeinsame Konvention, den sogenannten Farbraum, um sich verständigen zu können. Designer vergeben Farben gern eindeutige Namen (z. B. „Nostalgia Rose“, „Cloud Dancer “ und „Cocoon“ von Pantone), während Entwickler Hexadezimalcodes verwenden. Manche erkennen eine Farbe allein an den Ziffern ihres Hexadezimalcodes.

Hex-Codes folgen dem RGB-Farbraum (Rot, Grün, Blau). Die violette Akzentfarbe unserer Marke TeleportHQ wird beispielsweise durch #822CEC dargestellt. Das bedeutet: 53 % Rot, 23 % Grün und 86 % Blau. Es gibt auch andere Farbraumkonventionen wie HSL (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Wert), die sich für bestimmte Anwendungsfälle besser eignen können.

Der RGB-Farbraum ist davon inspiriert, wie unsere Augen die Farben in unserer Umgebung wahrnehmen: Zapfen messen die Lichtintensität (Helligkeit) bei verschiedenen Energieniveaus (Farben). Anschließend leiten sie diese Informationen an den Rest des Gehirns weiter und ermöglichen uns so, unsere Umgebung wahrzunehmen. Einige Tiere verfügen über kein trichromatisches Farbsehen: Meeressäuger sind Monochromaten, die meisten Reptilien Tetrachromaten. Sie besitzen jeweils einen beziehungsweise vier Zapfentypen und können dadurch 100 Millionen Farben sehen, während die meisten Menschen „nur“ 10 Millionen wahrnehmen können [Quelle: Wikipedia].

Querschnitt durch das menschliche Auge und Vergrößerung der Netzhaut, auf der Nerven zu sehen sind, die Licht aufnehmen und zur Analyse an Stäbchen und Zapfen weiterleiten. Quelle: https://www.xrite.com

Die Begriffe Intensität und Energie stammen aus der Physik. Licht besteht aus Photonen mit unterschiedlicher Energie, und das menschliche Gehirn kann Licht nur innerhalb eines bestimmten Wellenlängenbereichs wahrnehmen. Energiereichere Photonen gehören zum ultravioletten Bereich (der unsere Haut verbrennt), energieärmere zum infraroten Bereich (unser Körper gibt solche Photonen als Wärme ab, die mit Infrarotkameras sichtbar gemacht werden kann).

Das elektromagnetische Spektrum. Quelle: https://www.radio2space.com

Auf einem Computerbildschirm besteht jedes Pixel aus drei kleinen LEDs: roten, grünen und blauen. Um diese Farben darzustellen, passt der Computer die Lichtintensität der einzelnen LEDs an – die Verarbeitung übernimmt dann unser Gehirn.

Nahaufnahme von TV-Pixeln, von https://jakubmarian.com

Das erzeugte Licht soll das nachbilden, was wir in der Natur sehen. Doch dabei gibt es einen Haken: Blau kommt in der Natur nicht so häufig vor wie auf einem Computerbildschirm, und Weiß unterscheidet sich beispielsweise deutlich vom Sonnenlicht. Deshalb ist blaues Licht für unsere Augen so ermüdend und sind gelbe Filter sowie Blaulichtfilter für alle nützlich, die viel Zeit vor Bildschirmen verbringen.

Maschinelles Lernen ist besonders leistungsfähig bei Bildern#

Vergleich zwischen dem von LEDs erzeugten Weiß und der Farbe des Sonnenlichts. Daten von http://galileo.graphycs.cegepsherbrooke.qc.ca

Bei der Bildanalyse achten Systeme des maschinellen Lernens nicht auf Hexadezimalcodes oder Farbnamen. Stattdessen betrachten sie Pixelwerte auf ähnliche Weise wie unsere Augen dieselben Pixel. Für die Maschine sind die folgenden beiden Bilder gleich:

Dieselben Graustufenbilder einer 3 aus Sicht eines Computers und eines Menschen

Für die Arbeit mit Bildern nutzt das maschinelle Lernen einen interessanten Trick: Es scannt Bilder, indem es Ausschnitte aus Pixeln betrachtet, statt einzelne Pixel isoliert zu analysieren. So lassen sich komplexere Muster erkennen, wodurch die Erkennungsalgorithmen deutlich leistungsfähiger werden. Diese Systeme werden Faltungsschichten genannt. Indem man mehrere solcher Schichten übereinanderstapelt (das berühmte Deep Learning), lassen sich Modelle trainieren, die abstraktere und höher entwickelte Merkmale erlernen können. Obwohl sie in den 1990er-Jahren erfunden wurden [ref], standen die erforderliche Rechenleistung und große Datensätze, die ihr volles Potenzial erst zur Geltung bringen, erst ab 2012 zur Verfügung.[ref]

Illustration einer Faltungsschicht in einem neuronalen Netzwerk, von https://github.com/vdumoulin

Doch selbst nach so langer Zeit ist noch immer nicht vollständig verstanden, warum neuronale Netzwerke so gute Ergebnisse erzielen [ref]. Ein besonders eindrucksvolles Beispiel stammt von einer Forschungsgruppe, die zeigte, dass sich der Algorithmus dazu bringen ließ, Schildkrötenpanzer für Gewehre zu halten [ref]. Eine mögliche Erklärung dafür ist, dass sich das neuronale Netzwerk stärker auf die Textur kleiner Pixelausschnitte konzentriert als auf das Gesamtbild. Das widerspricht der Aussage einige Absätze zuvor, dass diese Algorithmen abstrakte Merkmale erlernen können.

Für ein neuronales Netzwerk sind all diese Bilder Wellen von http://www.3ders.org

Wie sieht es mit Screenshots aus?#

Damit kommen wir zum Unterschied zwischen Screenshots und Fotografien. Fotografien enthalten sehr feine Farbverläufe, die dem Modell helfen, Informationen aus dem Bild zu extrahieren und fundierte Entscheidungen zu treffen. In einem Screenshot sind solche Farbverläufe viel seltener oder aufgrund der monochromen Bildbereiche oft ganz und gar nicht vorhanden. Dadurch gibt es für das Modell nur sehr wenige Informationen zu extrahieren.

Ein Screenshot und ein Foto in 3D betrachtet

Diese Algorithmen sind weiterhin wertvoll, aber nicht für alle Arten von Problemen. Bei TeleportHQ führen wir beispielsweise mehrere Arten von Aufgaben des maschinellen Lernens in unserer Pipeline zur Codegenerierung aus Wireframes oder hochauflösenden Designs durch. Einerseits erzielen wir gute Ergebnisse mit Objekterkennung, um einzelne Widgets in einem Screenshot zu erkennen. Andererseits ist das Modell beim Versuch, Screenshots mobiler Apps verschiedenen Bildschirmtypen (Galerie, Pop-up, Menü, Formulare) zuzuordnen, nicht in der Lage, übergeordnete Konzepte zu erlernen. Ein einfacherer Entscheidungsbaum lieferte hier bessere Ergebnisse. Weitere Informationen zu diesen beiden konkreten Projekten werden wir in Kürze veröffentlichen.

In zwei Screenshots erkannte Texte und Bilder

Fazit#

Noch ist unklar, ob sich dieser Unterschied zwischen Screenshots und realen Bildern tatsächlich auf die Leistung tiefer neuronaler Netze auswirkt. Betrachtet man jedoch die 3D-Ansicht der Pixel selbst, ist der Unterschied deutlich: Es ist fast so, als würde man eine Stadtlandschaft mit einer ländlichen Landschaft vergleichen.

Die Machine-Learning-Community hat Deep Learning als unangefochtenen Spitzenreiter der Computer Vision anerkannt. Bei Screenshots von Web- und Mobilanwendungen glauben wir jedoch, dass andere Techniken weiterhin eine Chance haben könnten.

Derzeit untersuchen wir einen hybriden Ansatz, der die Ergebnisse von Computer-Vision- und Natural-Language-Processing-Techniken kombiniert, die auf dieselbe Datenquelle aus HTML-Zeichenfolgen und der zugehörigen DOM-Darstellung sowie den gerenderten berechneten Daten angewendet werden. Über diesen Ansatz werden wir in einem demnächst erscheinenden Blogbeitrag sprechen.

Wie immer sind wir sehr daran interessiert, uns mit anderen Interessierten zu diesem Thema auszutauschen. Wenn Sie an unserer Forschung interessiert sind, können Sie uns gerne über einen unserer Social-Media-Kanäle kontaktieren, die Sie in der Fußzeile dieser Website finden.