Como construímos um gerador de emoji com IA com exportação em PNG, GIF e WebP transparente

A Forgemoji começou com uma pergunta de produto bem simples: e se as combinações de emoji não precisassem vir de uma tabela fixa de busca? E se o resultado pudesse ser gerado sob demanda, exportado como um asset transparente e usado em qualquer lugar onde o usuário quisesse uma reação visual personalizada? Isso parece simples na camada de produto, mas vira uma pilha de pequenas decisões de engenharia quando você tenta colocar em produção. Este artigo é a versão honesta dessa pilha.

O objetivo de produto

O objetivo não era construir um modelo de imagem de uso geral. Queríamos um fluxo focado em um único trabalho: pegar dois conceitos de emoji, transformá-los em uma imagem nova, remover o fundo e devolver um arquivo que funcione como emoji do Discord, sticker do Telegram, reação do Slack ou imagem compartilhável em rede social. O produto só funciona se a saída for rápida, legível em tamanhos pequenos e limpa o suficiente para reusar sem edição extra.

Essa restrição molda tudo. A saída crua do modelo pode até ficar impressionante numa galeria, mas, se tiver fundo borrado, proporção incorreta ou excesso de detalhe, é inútil em chat. Por isso tratamos a imagem gerada como um asset de origem, não como o produto final. O produto final é a pipeline de exportação: geração, limpeza, redimensionamento e escolha de formato.

A pilha de geração

A gente mantém as camadas separadas de propósito. Se um modelo falhar, isso não pode quebrar a lógica de exportação. Se a remoção de fundo estiver lenta, isso não pode travar o site inteiro. Se o usuário só quer um PNG estático, não tem motivo de cobrar dele o custo de um passo de animação. Manter essas responsabilidades separadas é o que faz o produto parecer rápido mesmo quando as tarefas por baixo não são.

Por que PNG transparente é o padrão

Um PNG transparente é o formato de maior compatibilidade para assets no estilo emoji customizado. O Discord aceita. O Slack aceita. O fluxo de stickers do Telegram aceita. A maioria das ferramentas de design aceita. Na prática, transparência importa mais do que quase qualquer outra decisão de exportação, porque ela controla se a imagem final se mistura à UI de destino ou se parece com um retângulo colado por cima.

A exportação padrão, portanto, precisa ser chata da melhor forma possível: quadrada, nítida, transparente e pequena o bastante para subir rápido. Quando isso está resolvido, animação vira um adicional, não um requisito. Essa decisão mantém o produto útil para o maior conjunto de usuários e mantém a primeira experiência rápida o suficiente para parecer imediata.

O passo de remoção de fundo

Remoção de fundo não é um passo cosmético. É o que separa um arquivo que o usuário consegue reusar de um arquivo que ele precisa ajustar à mão. A gente usa uma passada dedicada de remoção de fundo depois da geração porque os fundos das saídas do modelo costumam ser inconsistentes: às vezes muito parecidos com o assunto, às vezes ruidosos, às vezes uma cor sólida que ainda fica esquisita no modo escuro.

A abordagem prática mais limpa é gerar a imagem primeiro e remover o fundo em uma passada separada. Isso nos dá uma fronteira de falha previsível. Se a saída do modelo estiver estranha, o usuário vê uma imagem estranha. Se o removedor de fundo falhar, o usuário pode tentar de novo esse passo sem jogar fora a geração. E, como o removedor é isolado, dá pra trocar a implementação depois sem reescrever o produto inteiro.

Por que oferecemos exportação em GIF e WebP

Imagens estáticas são boas, mas alguns conceitos de emoji ficam melhores quando se movem. Um quique, um giro, um pulso ou uma flutuação suave podem transformar uma imagem simples em algo que o usuário realmente quer compartilhar. O truque é escolher um formato de movimento que combine com a plataforma de destino. GIF é o fallback mais abrangente. WebP é menor e, em geral, mais limpo. Exibimos os dois porque chats e dispositivos diferentes ainda têm níveis diferentes de suporte.

Na camada de animação, renderizamos os quadros e codificamos com uma ferramenta dedicada de vídeo, em vez de pedir ao navegador para fazer tudo. Isso nos dá saída previsível, melhor compressão e menos surpresas quando o usuário baixa o arquivo no celular. A imagem resultante continua fácil de compartilhar, mas não depende mais da aba do navegador ficar aberta.

O problema de roteamento de modelo

Provedores de modelo sobem e descem. Um dia um provedor está rápido, no outro está com limite de taxa, e no dia seguinte a latência dele dobra. A solução prática é chata, mas funciona: manter uma camada de roteamento que consegue cair para um segundo ou terceiro provedor sem mudar a experiência do usuário. O usuário se importa que o gerador devolva alguma coisa. Não importa qual backend produziu a resposta, contanto que seja rápida e o resultado seja bom.

Essa lógica de roteamento também é como mantemos o produto resiliente. Um bom app de IA para o consumidor não trata só o caminho feliz. Ele trata com elegância as instabilidades dos provedores, timeouts e falhas parciais. Se o modelo principal estiver indisponível, o usuário ainda deve receber uma imagem utilizável ou um caminho claro de retry, não um spinner vazio e uma mensagem de erro vaga.

O que o navegador deve e o que não deve fazer

O navegador é ótimo em mostrar progresso, lidar com entrada e renderizar o resultado final. Ele é menos bom em fazer trabalho pesado de processamento de imagem que continue rápido em dispositivos de entrada baixa. Por isso tentamos manter o papel do navegador estreito: coletar entrada, mostrar estado de carregamento, exibir resultado e deixar o usuário exportar ou compartilhar. As transformações pesadas acontecem na pipeline por trás.

É também por isso que mantemos a interface visualmente clara. Quando o usuário clica em Gerar, ele deve entender se o sistema está esperando um modelo, a remoção de fundo ou a exportação. Estados de carregamento ambíguos parecem quebrados mesmo quando o backend está funcionando. Rótulos de estado claros reduzem pedidos de suporte mais do que qualquer animação rebuscada.

O que faríamos de novo

• •Manter o formato principal de saída chato e universal primeiro, depois acrescentar a animação
• •Tratar a remoção de fundo como um passo separado, com tratamento próprio de falhas
• •Usar roteamento entre provedores desde o primeiro dia, em vez de amarrar o produto a um único modelo
• •Deixar o navegador responsável só pela UI, não pela pipeline inteira de imagem
• •Preferir configurações de exportação específicas por plataforma em vez de um padrão único para todos os casos

Por que isso importa para o produto

As decisões técnicas acima não são só detalhes de implementação. Elas são o produto. Muita ferramenta de IA parece igual por fora, porque expõe a mesma caixa de prompt e o mesmo botão de gerar. A diferença está no que acontece depois do clique: a velocidade com que o usuário recebe um resultado utilizável, quantas vezes ele precisa tentar de novo e se a saída já está pronta para o lugar onde ele quer usar.

A Forgemoji funciona porque fica opinativa sobre a saída. O app não tenta ser tudo. Ele tenta entregar um asset de emoji limpo e compartilhável com o menor atrito possível. Esse foco é o que faz a pipeline valer a pena de ser escrita.

Perguntas frequentes

Algumas perguntas práticas aparecem sempre que alguém quer entender como o gerador funciona por dentro. Estas são as versões curtas.

Por que não distribuir MP4 para todo lugar?

Porque MP4 é um container de vídeo, não um formato universal de exportação de emoji. Ele é ótimo para movimento, mas muitos apps de chat e fluxos de sticker querem um arquivo de imagem transparente. Mantemos a exportação animada como uma opção, não como padrão, porque o padrão precisa funcionar no maior número possível de plataformas.

Por que não juntar geração e remoção de fundo em um único passo?

Separar os passos dá um tratamento de erro mais limpo e uma depuração mais fácil. É muito mais simples saber qual passo falhou quando geração e limpeza são distintas. Também nos permite melhorar um passo sem reestruturar o outro.

Qual é o maior gargalo de qualidade?

O maior gargalo não é o modelo. É a utilidade final da saída em tamanhos pequenos. Um resultado ótimo a 1024 px, mas que vira ruído a 128 px, não é um bom emoji. A legibilidade em tamanho pequeno é o verdadeiro critério de qualidade.

Como vocês decidem quando uma exportação está boa o suficiente?

A gente avalia a saída por ela poder ser usada na hora, sem o usuário precisar abrir uma ferramenta de design. Se o asset for transparente, legível e seguro para a plataforma, está bom. Se precisar de ajuste, a pipeline ainda tem trabalho a fazer.

Nota final

A forma mais simples de pensar na Forgemoji é: ela transforma uma ideia criativa em um arquivo utilizável. O modelo torna a ideia visível. A etapa de remoção de fundo a torna reusável. A etapa de exportação a torna portátil. Quando essas três coisas passam a funcionar juntas, o produto deixa de ser um demo e vira uma ferramenta em que as pessoas conseguem confiar.

Leituras recomendadas

• •Como rodamos a geração de emoji com IA em escala: roteamento, limites e falhas — uma visão dos sistemas por trás do gerador
• •Guia de acessibilidade de emoji: como tornar emoji customizado legível para todo mundo — boas práticas de design de emoji inclusivo
• •IA generativa e o futuro do emoji — o que vem depois do modelo Unicode