Detección Automática Del Color — La Experiencia Del Equipo De “yandex”

De los distintos servicios de “yandex” trabajan con el color de las soluciones de front-end de tareas. La asignación de bloques de información y de objetos de respuesta, manejo de atención y la creación de una jerarquía visual. Ejemplos de uso de los algoritmos de entonado de colores en la búsqueda y en “el Yandex.La música”.

En función de los objetivos de la selección de los colores puede requerir cálculos complejos. Pero es que el de obtener el resultado deseado es mucho más fácil. Tenemos en Yandex Launcher hay una promo de la tarjeta de aplicaciones. Clasificación, descripción y el botón de “Instalar”.

Es el contexto de las recomendaciones que se abren por encima de la lista de aplicaciones o en una carpeta en el escritorio. El color para el fondo de la tarjeta se formaba automáticamente en función de los íconos, el botón se translúcido blanco. El algoritmo trató de determinar el color de los iconos, al revisar los píxeles de tono. Este enfoque no siempre daba un hermoso resultado, tenía deficiencias.

Ejemplos de problemáticas de las tarjetas. La tarjeta debe hacerse presente la secuela de iconos y colores jugosos y brillantes. Queremos crear la sensación de que la tarjeta cuidadosamente hecho a mano, y no han metido algo descuidado generado automáticamente. Hermoso ganas de hacer siempre, pero los recursos no son ilimitados.

Asignar el comando a escribir el milagro de la biblioteca, por definición, los colores no se. Así que la tarea — mínimo las fuerzas de mejorar el algoritmo de detección de colores, inventar, como pintar una tarjeta hermosa, no inventar al este de la nave espacial. El sábado me el polvo con un editor de código, HTML5 y Canvas y empezaba a inventar. El lunes llegó al equipo con la propuesta de.

Paso 1. Tomamos el icono. Tiramos blancos, negros y píxeles transparentes. Original el icono → Cuadrado de filtrados de píxeles.

Paso 2. Reducimos la imagen a tamaño 2 × 2 píxeles (desconectado ). El resultado es una de cuatro colores de los iconos. Si el original de la imagen homogénea, pueden repetirse — no pasa nada. El resultado después del segundo paso.

Original el icono → Color. Tenemos desactivado “anti-aliasing”, para que los colores no sean confundidas, no se conviertan en “sucio”. En realidad, resulta que.

El cuadrado se divide en cuatro partes, tomamos el promedio de píxel de la fila superior de cada trimestre. En la aplicación de todo simplemente. Aun no se necesita el real downsample de la imagen y, en general, trabajar con gráficos. Los píxeles con la posición de tomar de la matriz unidimensional resultante después del primer paso.

Paso 3. Casi todo listo. Queda muy poco. Quitar los colores recibidos, la traducimos en HSL, clasificamos de (L). Colorea la tarjeta.

El circuito ligero. Oscura esquema (si dos o más colores oscuros). Con colores, comprobamos contraste.

La diferencia la ligereza entre el fondo y el botón de ≥ 20; entre el fondo y el texto ≥ 60. Si no coincide, modificamos. Resultante de la tarjeta. Original el icono → Colores → Tarjeta.

Y aún un poco más tarjetas para el ejemplo. Tenemos un resultado colorido de la tarjeta, de los presentes de los colores de los iconos, sin “sucias” de impurezas. Mediante el uso de varios colores de la tarjeta se ve mucho más vivos.

Especialmente agradable, que cuando un fondo uniforme icono de la tarjeta se convierte en una continuación directa de la. La separación entre ellos no es visible. Y lo más importante. Dos días después de la propuesta de un nuevo algoritmo de la primera aplicación ya estaba disponible en dev-ensamblaje.

Probado dentro del equipo, configurado los umbrales para el filtro en el primer paso, recogiendo los casos especiales. Modificado el algoritmo entró en el cercano lanzamiento. Gracias al jefe del grupo de desarrollo de Yandex Launcher demo por el interés, el deseo y la paciencia. Por último — más ejemplos.

Lee mas: software development estimation

Leave a Reply