Introdução
- Os usuários do Canva podem expressar sua criatividade e adicionar ilustrações personalizadas aos designs por meio da nova ferramenta Draw.
- Como até linhas ou formas simples desenhadas pelo usuário com mouse ou trackpad podem sair imprecisas, foi desenvolvido o recurso Shape Assist para compensar isso.
- O Shape Assist usa aprendizado de máquina (ML) para transformar rabiscos instáveis em gráficos vetoriais suaves.
Considerações de design
- Ao desenvolver o recurso, a latência de classificação foi tratada como prioridade máxima para garantir uma experiência do usuário rápida e precisa.
- A solução foi implantada no navegador para oferecer reconhecimento de formas e suporte ao desenho em tempo real.
- Não exige conexão com a internet, garantindo acessibilidade mesmo em situações offline.
Coleta de dados
- A base de um modelo de ML bem-sucedido está na coleta de dados, e foram coletados dados de desenhos de usuários diversos.
- As linhas desenhadas pelos usuários foram registradas como sequências de coordenadas x e y, formando um conjunto de dados com vários estilos e variações.
- Ao registrar os dados com coordenadas, garantiu-se flexibilidade para pré-processamento e aplicação de várias técnicas de aumento de dados.
Projeto e treinamento do modelo
- Foi projetado um modelo de ML para rodar no lado do cliente sem impactar negativamente o tempo de carregamento da página.
- Em vez de CNNs, foram feitos experimentos com RNNs que usam coordenadas diretamente, para minimizar o tamanho do modelo.
- Diversos hiperparâmetros foram ajustados para identificar as propriedades ideais do modelo.
- Considerando as diferenças na velocidade de desenho dos usuários, foi fixado o número de pontos que representam cada forma.
- Uma versão modificada do algoritmo Ramer-Douglas-Peucker (RDP) foi usada para reduzir o número de pontos, preservando detalhes importantes.
Considerações de implantação
- Como o modelo é pequeno e computacionalmente simples, todo o processamento pode ser executado dentro da aplicação cliente.
- O recurso funciona totalmente offline, sem necessidade de conexão com o servidor.
Arquitetura do modelo
- O modelo é composto por uma estrutura com uma camada LSTM e Gemm (camada densa ou totalmente conectada).
- O modelo tem cerca de 250 quilobytes e foi implementado diretamente em Typescript para rodar no cliente.
Substituição de formas
- Depois de determinar a forma desenhada pelo usuário, foi usada uma abordagem de template matching para alinhar com precisão a representação vetorial e o caminho do desenho do usuário.
Conclusão
- Há grande entusiasmo em compartilhar o recurso Shape Assist com o mundo, com a expectativa de que tanto designers profissionais quanto quem apenas faz rabiscos possam aproveitá-lo.
Opinião do GN⁺
O ponto mais importante deste artigo é que o Canva desenvolveu o recurso Shape Assist, que usa um modelo de aprendizado de máquina executado no navegador para reconhecer com precisão as formas desenhadas pelos usuários e convertê-las em gráficos vetoriais suaves. Esse recurso oferece feedback imediato ao usuário e pode ser usado mesmo sem conexão com a internet, aumentando a acessibilidade. O que torna este artigo interessante é mostrar como o avanço da tecnologia pode tornar o trabalho criativo mais fácil e agradável.
1 comentários
Comentários do Hacker News
Em vez de RNN, o algoritmo
"$1 unistroke recognizer"é uma solução simples e elegante para o problema"$1 unistroke recognizer"funciona bem mesmo quando treinado com uma única amostra"Graffiti", sendo eficaz quando cada letra é um único traçoEngenheiros da ASML, TSMC e outras empresas criam chips menores e mais potentes disparando lasers em chumbo líquido todos os dias para gerar luz com comprimentos de onda extremamente curtos
Mesmo ao desenhar uma linha reta com mouse ou trackpad, é fácil acabar com uma forma irregular
Interesse na biblioteca que o Canva usa para desenhar linhas
Surpresa com o recurso do Macromedia Flash, de mais de 20 anos atrás, que suavizava curvas ao desenhar curvas à mão livre
Menção ao desenvolvimento de uma variação do algoritmo Ramer-Douglas-Peucker (RDP)
Uma versão de "rabisco trêmulo" com aparência desenhada à mão pode ser mais atraente do que gráficos vetoriais suaves
Ao implementar esse tipo de recurso, o ideal é permitir que o usuário escolha e que fique claro quando ele está ativado
Treinou-se um modelo para reconhecer 9 formas predefinidas
Seria bom se esse recurso fosse open source