Diseño de formas revolucionado con la adopción de la tecnología "Ship Shape"

Introducción

• Los usuarios de Canva pueden dar rienda suelta a su creatividad y agregar ilustraciones personalizadas a sus diseños mediante la nueva herramienta Draw.
• Como las líneas o formas simples que los usuarios dibujan con el mouse o el trackpad pueden ser imprecisas, se desarrolló la función Shape Assist para compensarlo.
• Shape Assist usa aprendizaje automático (ML) para convertir garabatos inestables en gráficos vectoriales suaves.

Consideraciones de diseño

• Al desarrollar la función, la prioridad principal fue la latencia de clasificación para que la experiencia del usuario fuera rápida y precisa.
• La solución se implementó dentro del navegador para ofrecer reconocimiento de formas y asistencia de dibujo en tiempo real.
• No requiere conexión a internet, lo que garantiza accesibilidad incluso en situaciones sin conexión.

Recolección de datos

• La base de un modelo de ML exitoso está en la recolección de datos, y se recopilaron datos de dibujos de diversos usuarios.
• Las líneas dibujadas por los usuarios se registraron como secuencias de coordenadas x e y, reuniendo un conjunto de datos con estilos y variaciones diversos.
• Al registrar los datos usando coordenadas, se aseguró flexibilidad para el preprocesamiento de datos y la aplicación de diversas técnicas de aumento de datos.

Diseño y entrenamiento del modelo

• Se diseñó un modelo de ML que pudiera ejecutarse del lado del cliente sin afectar negativamente el tiempo de carga de la página.
• En lugar de CNN, se experimentó con RNN que usan directamente las coordenadas para minimizar el tamaño del modelo.
• Se ajustaron diversos hiperparámetros para identificar las propiedades óptimas del modelo.
• Considerando las diferencias en la velocidad de dibujo de los usuarios, se fijó la cantidad de puntos que representan cada forma.
• Se modificó el algoritmo Ramer-Douglas-Peucker (RDP) para reducir la cantidad de puntos manteniendo los detalles importantes.

Consideraciones de despliegue

• Como el modelo es pequeño y computacionalmente simple, todo el procesamiento puede ejecutarse dentro de la aplicación cliente.
• La función opera completamente offline, sin necesidad de conectarse a un servidor.

Arquitectura del modelo

• El modelo está compuesto por una estructura que incluye una capa LSTM y Gemm (capa densa o totalmente conectada).
• El modelo tiene un tamaño aproximado de 250 kilobytes y se implementó directamente en Typescript para ejecutarse en el cliente.

Reemplazo de formas

• Después de determinar la forma dibujada por el usuario, se usa un enfoque de template matching para alinear con precisión la representación de gráficos vectoriales y la ruta del dibujo del usuario.

Conclusión

• Están muy contentos de compartir la función Shape Assist con todo el mundo y esperan que tanto diseñadores profesionales como quienes solo hacen garabatos la disfruten.

Opinión de GN⁺

Lo más importante de este artículo es que Canva desarrolló la función Shape Assist, que usa un modelo de aprendizaje automático ejecutado dentro del navegador para reconocer con precisión las formas dibujadas por el usuario y convertirlas en gráficos vectoriales suaves. Esta función brinda retroalimentación inmediata al usuario y puede usarse incluso sin conexión a internet, lo que mejora la accesibilidad. Lo interesante de este artículo es que muestra cómo el avance de la tecnología puede hacer que el trabajo creativo sea más fácil y disfrutable.

[GN⁺]

Opiniones de Hacker News

• En lugar de una RNN, el algoritmo "$1 unistroke recognizer" es una solución simple y elegante para el problema

  • "$1 unistroke recognizer" funciona bien incluso entrenado con una sola muestra
  • Puede integrarse fácilmente en un proyecto para hacer la interfaz de usuario más familiar
  • Funciona de manera confiable para entrada de texto estilo "Graffiti", y es efectivo cuando cada letra es de un solo trazo
  • El artículo original está escrito de forma clara y fácil de leer
  • Enlace al proyecto unistroke recognizer

• Ingenieros de ASML, TSMC y otras empresas crean chips más pequeños y con mejor rendimiento disparando láseres a plomo líquido para generar luz de longitudes de onda extremadamente cortas todos los días

  • Los desarrolladores web se esfuerzan todos los días para que su trabajo no se note

• Incluso al dibujar una línea recta con mouse o trackpad, es fácil que salga una forma irregular

  • Se cuestiona si realmente hace falta dibujar formas con el mouse en Canva
  • Miro tenía en el pasado una función que convertía una estrella dibujada con el mouse en una estrella geométricamente precisa
  • Al hacer diagramas, se usan formas prediseñadas, y al crear íconos, se usan programas dedicados
  • Para dibujar de verdad, se usa una tableta
  • La tecnología en sí es genial, pero hay dudas sobre el caso de uso real

• Interés por la biblioteca que usa Canva para dibujar líneas

  • Enlace al GitHub de perfect-freehand

• Sorpresa por la función de suavizado de curvas al dibujar curvas a mano alzada en Macromedia Flash hace más de 20 años

  • Era una función impresionante considerando la limitada capacidad de procesamiento de esa época

• Mención del desarrollo de una variante del algoritmo Ramer-Douglas-Peucker (RDP)

  • RDP es un algoritmo de simplificación de curvas que reduce la cantidad de puntos manteniendo los detalles importantes
  • Se comparte un caso de aplicar Douglas-Peucker al trabajo de Picasso en Strange Loop 2018
  • Enlace al proyecto Picasso's Bulls

• Una versión de "garabato tembloroso" con apariencia dibujada a mano puede resultar más atractiva que los gráficos vectoriales pulidos

  • En un mundo de perfección artificial, existe atractivo por las obras auténticamente hechas a mano

• Al implementar este tipo de funciones, el usuario debería poder elegirlas y su estado de activación debería ser claro

  • Puede ser frustrante cuando una herramienta intenta ser demasiado inteligente y no es perfecta

• Se entrena un modelo para reconocer 9 formas predefinidas

  • Al entrenar el modelo, sería mejor crear una función general de suavizado/asistencia para dibujar formas
  • Esto permitiría obtener formas únicas con un estilo más "analógico"

• Ojalá esta función fuera de código abierto

  • Últimamente están apareciendo modelos de tamaño pequeño (este modelo es de 250kb)
  • Se espera el día en que podamos volver a modelos pequeños para aplicaciones útiles