Mad Converter GIF'ok a stickers animados para Telegram

En lugar de mil palabras ...


¡xZibit también está contento, porque aquí los GIF se insertan en adhesivos para insertarse en GIF para KDPV!

Y ahora sobre los detalles de implementación.

Todo comenzó con una discusión en el chat del desarrollador de Telegram sobre la próxima función:



Un hombre dijo, ¡un hombre lo hizo! El primer prototipo en Pillow y svgwrite, que analiza los GIF en píxeles y los convierte en cuadrados vectoriales con vistas previas en SVG, se escribió en un día libre.

La diversión comenzó más ...

JSON es un formato abierto, dijeron ...

Hasta ahora, con los formatos en Telegram, seguían engañando. Soporte para animaciones GIF; de hecho, se convierten a video MP4. Soporte para adhesivos: se cargan a PNG, pero se convierten a WebP. Esta vez todo es más honesto: que en la entrada, luego en la salida.

Para las pegatinas animadas, Telegram no utiliza GIF, videos o incluso algún formato de gráficos vectoriales bien establecido como SVG o, ¡Dios no lo quiera, Cthulhu! - Flash. Utiliza un formato novedoso que surgió bajo el ala de Airbnb: Lottie. Hasta ahora, tenía cierta fama entre los desarrolladores móviles, pero gracias a Telegram, puede ganar más popularidad.

En esencia, los archivos Lottie son proyectos de Adobe After Effects serializados con JSON que maximizan todas las características de este programa. Con la pantalla, por desgracia, no todo es tan color de rosa . Aunque hay muchas implementaciones "oficiales" ya preparadas de la biblioteca para renderizar Lottie, solo para las plataformas cubiertas por Telegram: Android, iOS, Qt y Web, solo una parte de las capacidades del formato se implementa en todas ellas. Telegram fue aún más lejos y limitó la lista de características admitidas, así como "apareció" con su propio formato, que difiere de la Lottie habitual simplemente empacando en GZip y el parámetro "tgs": 1 . ¡Creo que sé dónde trabaja Denis Popov ahora! :-)

Y si todo está bastante bien con la documentación para bibliotecas para diferentes plataformas, entonces, por desgracia, no fue posible encontrar al menos alguna descripción del dispositivo de formato, solo el esquema JSON en las fuentes de lottie-web. Tuve que modificar las animaciones existentes en el camino para comprender los conceptos generales del formato. También hubo discrepancias entre los archivos reales y el esquema: en particular, en las capas de tipo 4 , de acuerdo con el esquema, los objetos anidados se almacenan en la propiedad "it" ; sin embargo, en los archivos reales la clave se llama "shapes" y "it" no funciona.

Los matices aclarados del formato:

• Un archivo consta de capas. A diferencia del GIF, aquí cada capa puede tener una hora de inicio y finalización arbitraria para la visualización. Se pueden aplicar varias transformaciones a la capa (más precisamente, es necesario ): escalado, rotación, cambio de transparencia, etc. Las capas pueden incluso ser tridimensionales (prohibido para Telegram).
• Una capa consta de "formas". Tienen muchos tipos, algunos no se pueden usar en Telegram. En la práctica, para que aparezca una capa, debe incluir tres formas: una ruta (en las animaciones terminadas, este suele ser el tipo "sh" - curvas Bezier; el convertidor hasta ahora solo usa el tipo "rc" - rectángulos), el relleno (el tipo "fl" ) y la transformación ( escriba "tr" ).
• Incluso puede incluir elementos ráster, crear capas de texto y establecer relaciones entre los parámetros de capa y forma a través de expresiones. Todos estos artículos también están prohibidos en Telegram.

El primer problema se sigue directamente de aquí: la redundancia . Aunque los valores predeterminados para los parámetros de transformación se han agregado recientemente al esquema JSON, no se implementan en bibliotecas. Entonces preguntarles explícitamente todavía es necesario.

Parece que esto no es un problema en absoluto? Incluso un simple GZip hace un buen trabajo al comprimir datos que se repiten descaradamente, y 1 MB de JSON sin procesar se convierte mágicamente en un par de decenas de kilobytes, que se arrastran silenciosamente hasta el límite establecido de 64 kB. Ahí estaba!

Carga, lo que significa una animación gordita que muestra con calma lottie-web en Telegram, y aquí, en lugar de un pixel art condicionalmente hermoso, la mirada borrosa estática es esta:



¿Qué es eso? Pero resultó que claramente hay un límite no especificado de 1 MB en los datos descomprimidos. Un representante del equipo de Telegram lo confirmó rápidamente y anunció el próximo aumento en el límite a 2 MB.

Incluso si resuelven estos problemas, los usuarios de versiones anteriores de Telegram no podrán acceder a las etiquetas que van más allá de 1 MB de datos sin comprimir y no contienen transformaciones. Por lo tanto, probablemente tendrá que cumplir con las restricciones en el futuro.

La transparencia es importante.

Pillow, junto con OpenCV, se puede llamar el estándar de la industria para el procesamiento de imágenes en Python. Además, también está bien enfocado para las funciones GIF: admite colores indexados y da acceso a la paleta. Admite la conversión de un mapa de píxeles en una matriz NumPy, que es importante para el procesamiento productivo. ¡Incluso recopila estadísticas sobre colores! Pero también hubo desventajas:

1. No había forma documentada de obtener el índice de color transparente. Tuve que asumir como solución temporal que el color transparente es el más común, pero en GIF reales no siempre es así.
2. Lo mismo con un retraso entre cuadros: Pillow proporciona solo los cuadros en sí mismos como una secuencia de imágenes, sin información sobre los retrasos.
3. A veces, los marcos parciales se superponen incorrectamente.

Por lo tanto, tuve que buscar un reemplazo. El módulo gif2numpy actuó como tal. Está "afilado" para las funciones GIF y proporciona acceso a todas las propiedades técnicas tanto de la imagen como de los cuadros individuales, incluido GCE . Así, resuelve el problema de los retrasos en la lectura.

Resultó que la transparencia, gif2numpy no lo admite en absoluto: los colores se convierten inmediatamente en tres canales con profundidad de bits en bytes, sin tener en cuenta la profundidad de bits y guardar los índices de color. Afortunadamente, el módulo consta de un archivo, por lo que no fue difícil incluirlo en el proyecto y modificarlo reservando el color #FE00FE para transparencia.

El problema del marco parcial no era trivial de resolver. gif2numpy intenta superponer dichos fotogramas en el anterior, sin embargo, no verifica los parámetros de superposición, por lo que el resultado correcto tampoco siempre sale. Para no perder el tiempo con las banderas, el procesamiento de imágenes preliminares usando gifsicle con la clave --unoptimize se --unoptimize convierte cuadros parciales en cuadros completos. Y al mismo tiempo, los lleva a usar la paleta global, lo que eliminó la necesidad de procesar por separado el color transparente al usar su propia paleta de cuadros.

Aprietame mas fuerte

Los cuadrados son buenos, pero con tales limitaciones necesitas mostrar más imaginación, de lo contrario, incluso los GIF en miniatura no se "arrastrarán" en Telegram.

Primero se usó algo similar a RLE : los cuadrados adyacentes horizontalmente del mismo color se combinan en un rectángulo.

El siguiente paso es la explotación de las características de Lottie. Dado que cada capa tiene un tiempo de inicio y finalización arbitrario, puede aplicar una técnica que durante mucho tiempo ha sido utilizada por los códecs de video, y en parte en el propio GIF: los cuadrados que permanecen en el mismo lugar durante varios cuadros se pueden combinar en una capa, durante la cual los cambios de visualización varios otros Lo cual se implementa hasta ahora solo para pares de capas adyacentes.

Planes de desarrollo

Las ideas que se pueden aplicar aquí son masivas:

• Reconocer áreas de un solo color de cualquier tamaño. Puede dividirlos en un conjunto de rectángulos, para los cuales hay un buen algoritmo . También es aconsejable convertirlos en un contorno, pero esto se ve ensombrecido por la necesidad de especificar todos los puntos de las curvas de Bezier en Lottie; los rectángulos en algunos casos pueden ser más ventajosos.
• Reconocer el movimiento. La técnica, nuevamente, se ha usado durante mucho tiempo en códecs de video. Si el mismo contorno no cambia de forma de cuadro a cuadro, sino solo las coordenadas, en lugar de duplicarlo en varias capas, colóquelo en una capa con transformación.
• Reconocer la "cobertura" de un área con otra. Un ejemplo:
  
  

   ...... .O..O. ...... .OOOO. ...... 

  
  Los píxeles de un color diferente se superponen en un rectángulo de un color. En lugar de dividir este rectángulo en un montón de pequeños, o transformarlo en un contorno de forma compleja, simplemente puede superponerlos en la parte superior de todo el rectángulo.
• Vectorización de curvas y elipses, reconocimiento de gradientes. Esto arruinará el encanto de los píxeles, pero mejorará la compresibilidad de algunos GIF por orden de magnitud. Los gradientes están incluso en los "Koloboks" antediluvianos, ¡lo garantizo!
• Compresión con pérdida. En primer lugar, la eliminación del difuminado, e incluso en imágenes excesivamente suaves, no obstaculizará la moderación del color. El gifsicle mencionado anteriormente probablemente se encargará de esto.

Referencias

• Fuentes Miedo en lugares.
• El canal en el que subo paquetes de GIF convertidos con éxito.