Removendo Fundo de Imagens via IA rodando diretamente no *Browser*
Olá, pessoal, sou novo aqui, apesar de conhecer sobre o TabNews a algum tempo. Espero que gostem da minha primeira postagem.
Quero apresentar a vocês um webapp que fiz, em um final de semana, usando a biblioteca TransformersJs do Hugging Face.
A ideia é que seja possível o usuário fazer a remoção do fundo de imagens de forma automática, sem precisar de um servidor. Ou seja, todo o processamento é feito exclusivamente no navegador. Sendo a única coisa baixada, o modelo utilizado para tal tarefa.
Isso foi possível utilizando o TransformersJs do Hugging Face juntamente com a sua API de pipeline. O Pipeline API permite "executar um conjunto de passos pré-programados" para certas tarefas. Aqui, o pipeline utilizado foi 'removal-background'. (https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.BackgroundRemovalPipeline)
Era para ser simples, mas a documentação ainda está (ou estava) bem crua. Algumas dificuldades foram, como executar o modelo e extrair o resultado do processamento. Inclusive tive que abrir uma Issue no repositório do TransformersJs para entender o que estava acontecendo. Ainda bem que teve uma gente boa para me ajudar. (https://github.com/huggingface/transformers.js/issues/1230)
Resumindo brevemente, basicamente o Pipeline API estava retornando a imagem com o suposto fundo removido, mas com uma semi-transparência, algo que foi bem difícel perceber e arrumar. No entanto, a solução é simples, fazer um pós-processamento para normalizar os pixels (Algo que, no meu entendimento, não faz sentido não estar embutido no próprio Pipeline)
No fim, deu tudo certo, tentei fazer uma UI interessante com uma boa UX e gostei do resultado.
Tentei adicionar uma imagens aqui, mas não consegui 😬
REPOSITÓRIO: https://github.com/LuSrodri/canva-copy
WEBAPP: https://semfundos.lusrodri.me/
Os próximos passos agora são:
- Garantir que funcione em um dispositivos móveis. Aparentemente há uma limitação por parte da biblioteca ou por parte do modelo (Preciso investigar melhor);
- Adicionar a funcionalidade de poder colocar uma cor sólida de fundo;
- E expandir cada vez mais, para bater de frente com o Canva, só que AI-first e Privacy-first.
Enfim, esse WebApp é um pequeno projeto pessoal e gostaria de saber sobre a opinião de vocês.
Obrigado por ler até agora :)