>_ DevTrendspt

Idioma

Início

Linguagens

Seções

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarcados Segurança
TypeScript

Como Remover o Fundo de Imagens Direto no Navegador Sem Servidores e Assinaturas

Toda vez que você precisa remover rapidamente o fundo de uma foto para um projeto pessoal, cartão de produto ou avatar, a mesma busca começa. Serviços online populares como o Remove.bg exigem uma assinatura paga após três downloads, compactam a imagem para o tamanho de um selo postal, ou exigem autorização do Google. Além disso, você nem sempre quer enviar fotos pessoais ou mockups de trabalho para servidores de terceiros.

Recentemente encontrei o repositório cut-it-out do desenvolvedor Suvink. É uma ferramenta de código aberto que faz a mesma coisa, mas diretamente no navegador na máquina do usuário. Sem backends, sem filas e zero custos de infraestrutura de terceiros.

CutItOut Demo

O que está sob o capô

O principal destaque do projeto é que todos os cálculos acontecem no lado do cliente. O repositório usa a biblioteca @imgly/background-removal, que carrega o modelo de rede neural U2-Net via ONNX Runtime em WebAssembly (WASM).

Se executar inferência para redes de segmentação anteriormente exigia um servidor com Python, PyTorch e pelo menos uma GPU modesta, agora a pilha WASM + WebGL/WebGPU lida com isso diretamente em uma aba do Chrome ou Firefox.

Quando você abre a página pela primeira vez, o navegador baixa os pesos do modelo, armazena em cache e então processa os arquivos recebidos localmente. Nenhum dado vai para lugar nenhum. Você pode desconectar seu laptop da internet, arrastar uma imagem para a janela e a máscara ainda será gerada em poucos segundos.

Ferramentas para refinamento manual

Redes neurais frequentemente cometem erros em bordas complexas. Fios de cabelo finos, vidro transparente ou fundo semi-desfocado frequentemente se transformam em bordas irregulares. Os criadores do CutItOut não se limitaram a um único botão "Remover Fundo" e adicionaram várias ferramentas úteis de correção manual:

  • Pincel Mágico. Seleciona pixels vizinhos por similaridade de cor, o que ajuda a apagar rapidamente um pedaço desajeitadamente deixado do fundo.
  • Modo de recuperação com uma camada semi-transparente (Ghost overlay). Quando a rede neural corta demais, é difícil restaurar cegamente o fragmento necessário. Aqui o original é destacado com um contorno suave, para que você possa ver exatamente onde pintar.
  • Navegação no canvas. Há zoom e pan para limpar detalhes pequenos com precisão em alta resolução.
  • Exportação sem perdas. O resultado final é entregue como PNG com canal alfa transparente na resolução original, sem marcas d'água ou temporizadores de espera.

Como fazer deploy do projeto você mesmo

O código-fonte é escrito em TypeScript e compila com ferramentas padrão de frontend. Para executar o projeto localmente ou usá-lo como base para seu próprio serviço, você precisará de Node.js 18+ e npm 9+.

Clone o repositório e navegue até a pasta:

git clone https://github.com/Suvink/cut-it-out.git
cd cut-it-out

Instale as dependências:

npm install

Inicie o servidor de desenvolvimento local:

npm run dev

O Vite vai iniciar o app em http://localhost:5173.

Se quiser fazer deploy do app você mesmo, o projeto gera arquivos estáticos com um único comando:

npm run build

Todos os arquivos finalizados ficarão no diretório dist. Como o projeto não precisa de backend, você pode fazer upload desses arquivos para qualquer hospedagem estática gratuita como Vercel, Netlify ou GitHub Pages. Não há necessidade de configurar containers Docker, variáveis de ambiente com chaves de API ou configurações de filas Celery.

Por que este projeto é útil para desenvolvedores

O código do CutItOut é interessante sob duas perspectivas.

Primeiro, é uma ferramenta pronta e conveniente para uso pessoal. Você pode executá-la em um servidor doméstico ou mantê-la nos favoritos para evitar pagar por alternativas comerciais quando precisar preparar algumas dezenas de imagens.

Segundo, o projeto é uma ótima ilustração da abordagem de computação de borda no frontend. Se você está construindo um app onde usuários fazem upload de avatares ou fotos de produtos, mover a segmentação para o cliente economiza uma quantia considerável. Em vez de pagar por instâncias GPU na nuvem, você transfere o trabalho para a CPU do usuário. No repositório, você pode ver como o autor organizou o trabalho com canvas, redimensionamento e integração da biblioteca WASM na interface.

CutItOut é um projeto limpo e honesto sob a licença Apache 2.0. Ele resolve um problema cotidiano específico e demonstra claramente o quanto as capacidades de machine learning no navegador evoluíram. O projeto ainda não tem muitas estrelas, mas o código é limpo, compreensível e facilmente adaptável às suas próprias tarefas.

Projetos relacionados