Píxeles en capturas de pantalla frente a píxeles en fotografías

¿Qué son exactamente los píxeles?#

Al hablar de colores, los diseñadores y desarrolladores necesitan una convención llamada espacio de color para poder comunicarse. De hecho, los diseñadores han popularizado la práctica de asignar nombres únicos a los colores (por ejemplo, «Nostalgia Rose», «Cloud Dancer » y «Cocoon», de Pantone), mientras que los desarrolladores utilizan códigos hexadecimales. Algunos reconocen el color con solo mirar los números del código hexadecimal.

Los códigos hexadecimales siguen el espacio de color RGB (rojo, verde y azul). Por ejemplo, el color de acento principal de nuestra marca, el morado de TeleportHQ, se representa como #822CEC, lo que significa un 53 % de rojo, un 23 % de verde y un 86 % de azul. Existen otras convenciones de espacios de color, como HSL (tono, saturación y luminosidad) y HSV (tono, saturación y valor), que pueden ser más adecuadas para ciertos casos.

El espacio de color RGB se inspira en la forma en que nuestros ojos perciben los colores que nos rodean, cuando las células cono miden la intensidad (brillo) de la luz en distintos niveles de energía (color). Luego, estas células transmiten esa información al resto del cerebro y nos permiten percibir nuestro entorno. Cabe señalar que algunos animales no tienen visión tricromática: los mamíferos marinos son monocromáticos y la mayoría de los reptiles son tetracromáticos. Con una y cuatro células cono, respectivamente, pueden ver 100 millones de colores, mientras que la mayoría de los seres humanos solo puede ver 10 millones [ref. Wikipedia].

Sección transversal del ojo humano y ampliación de la pared de la retina, donde se muestran los nervios que captan la luz y la envían a los bastones y conos para su análisis. Fuente: https://www.xrite.com

Las nociones de intensidad y energía provienen de la física. La luz está compuesta por fotones con diferentes niveles de energía, y el cerebro humano solo puede percibir la luz dentro de un intervalo determinado de longitudes de onda. Los fotones de mayor energía pertenecen al espectro ultravioleta (que quema nuestra piel), mientras que los de menor energía pertenecen al espectro infrarrojo (nuestro cuerpo emite este tipo de fotones en forma de calor, que pueden detectarse con cámaras infrarrojas).

El espectro electromagnético. Fuente: https://www.radio2space.com

En una pantalla de computadora, cada píxel está compuesto por tres pequeños LED: rojo, verde y azul. Para reproducir esos colores, la computadora ajusta la intensidad de la luz que emite cada LED, y nuestro cerebro procesa el resultado.

Primer plano de los píxeles de un televisor. Fuente: https://jakubmarian.com

La luz resultante busca reproducir lo que vemos en la naturaleza, pero hay un inconveniente. El azul no es tan abundante en la naturaleza como en la pantalla de una computadora y, por ejemplo, el color blanco difiere bastante del color del sol. Por eso la luz azul cansa tanto nuestros ojos, y los filtros amarillos y los filtros de luz nocturna resultan muy útiles para quienes pasan mucho tiempo frente a una pantalla.

El aprendizaje automático destaca en el análisis de imágenes#

Comparación entre el color blanco producido por un LED y el color del sol. Datos de: http://galileo.graphycs.cegepsherbrooke.qc.ca

Al analizar imágenes, los sistemas de aprendizaje automático no examinan códigos hexadecimales ni nombres de colores. En cambio, observan los valores de los píxeles, de forma similar a como nuestros ojos perciben esos mismos píxeles. Para la máquina, las dos imágenes siguientes son iguales:

Las mismas imágenes en escala de grises de una vista en 3D desde la perspectiva de una computadora y de una persona

Para trabajar con imágenes, el aprendizaje automático utiliza un truco interesante: analiza las imágenes observando grupos de píxeles en lugar de píxeles independientes. Esto permite detectar patrones más complejos y mejora considerablemente el rendimiento del algoritmo de detección. Estos sistemas específicos se denominan capas convolucionales. Al apilar varias de estas capas (el famoso aprendizaje profundo), podemos entrenar modelos capaces de aprender características más abstractas y de alto nivel. Aunque se inventaron en los años 90 [ref], la potencia de cálculo y los grandes conjuntos de datos necesarios para que destacaran no estuvieron disponibles hasta 2012.[ref]

Ilustración de una capa convolucional en una red neuronal, de https://github.com/vdumoulin

Sin embargo, incluso después de tanto tiempo, todavía no se comprende del todo por qué las redes neuronales ofrecen tan buenos resultados [ref]. Uno de los mejores ejemplos proviene de un grupo de investigadores que demostró que era posible engañar al algoritmo para que creyera que los caparazones de tortuga eran fusiles [ref]. Una posible explicación de este fenómeno es que la red neuronal se centra más en la textura de pequeños grupos de píxeles que en la imagen completa, lo que contradice lo que se dijo unos párrafos antes sobre la capacidad de estos algoritmos para aprender características abstractas.

Para una red neuronal, todas esas imágenes son fusiles, de http://www.3ders.org

¿Y qué hay de las capturas de pantalla?#

Esto nos lleva a la diferencia entre las capturas de pantalla y las fotografías. En las fotografías, las imágenes contienen gradientes muy sutiles que ayudan al modelo a extraer información de la imagen y tomar decisiones útiles. En una captura de pantalla, esos gradientes están mucho menos presentes o, a menudo, totalmente ausentes debido a las partes monocromáticas de la imagen, lo que deja muy poca información para que el modelo pueda extraer.

Una captura de pantalla y una foto vistas en 3D

Estos algoritmos siguen siendo valiosos, pero no para todo tipo de problemas. Por ejemplo, en TeleportHQ realizamos varios tipos de tareas de aprendizaje automático a lo largo de nuestro proceso de generación de código a partir de wireframes o diseños de alta definición. Por un lado, obtenemos buenos resultados con la detección de objetos para identificar widgets individuales en una captura de pantalla; por otro, al intentar clasificar capturas de pantalla de aplicaciones móviles en distintos tipos de pantallas (galería, ventana emergente, menú, formularios), el modelo no logra aprender los conceptos de alto nivel y un árbol de decisión más sencillo demostró funcionar mejor. Pronto publicaremos más información sobre estos dos proyectos específicos.

Texto e imágenes detectados en dos capturas de pantalla

Conclusión#

Aún no se sabe con certeza si esta diferencia entre las capturas de pantalla y las imágenes de la vida real afecta realmente al rendimiento de las redes neuronales profundas. Sin embargo, la diferencia es evidente al observar la vista 3D de los píxeles: es casi como comparar un paisaje urbano con uno rural.

La comunidad de aprendizaje automático ha aceptado el aprendizaje profundo como el campeón indiscutible de la visión artificial, pero creemos que, en el caso de las capturas de pantalla de aplicaciones web y móviles, otras técnicas aún pueden tener posibilidades.

Actualmente, estamos explorando un enfoque híbrido que combina los resultados de técnicas de visión artificial y procesamiento del lenguaje natural aplicadas a la misma fuente de datos: cadenas HTML y su representación DOM correspondiente, junto con los datos calculados de su representación visual. Hablaremos de este enfoque en una próxima publicación del blog.

Como siempre, nos interesa muchísimo intercambiar ideas sobre este tema con otras personas entusiastas. Si te interesa nuestra investigación, no dudes en ponerte en contacto con nosotros a través de cualquiera de nuestras redes sociales, que encontrarás en el pie de página de este sitio web.