Lição 28 - Integração com IA
Hoje, o GPT 4o (gpt-image-1) e o Nano banana (gemini-2.5-flash-image) reduziram bastante a barreira da edição de imagem. Do ponto de vista da interação humano-computador, a combinação de interfaces de chat e tela está cada vez mais popular. O histórico de chat com os modelos reflete naturalmente o histórico de modificação das imagens, enquanto a tela, que pode ser arrastada com liberdade, torna naturais a seleção de imagens e o processamento em paralelo. Para mais detalhes, veja UI for AI.
A imagem abaixo mostra a interface do produto Lovart, que usa o Konva.js mencionado na Lição 21 - Transformer como tecnologia de base. Embora o foco principal seja a edição de imagem, ele não abandona recursos comuns de editores gráficos, como a lista de camadas oculta por padrão no canto inferior esquerdo, e a barra de ferramentas à esquerda também pode inserir algumas formas básicas.
O Recraft também está testando a funcionalidade de chat. Na minha observação, a tela e o chat estão se tornando as duas entradas principais desse tipo de editor:
Nesta lição, vamos combinar com o Nano banana para enriquecer a edição de imagem.
Integrar modelos
Para usar o Nano banana, escolhi o fal.ai em vez do generative-ai oficial do Google. O motivo é que uma API unificada facilita comparar o efeito de outros modelos de geração de imagem, como qwen-image-edit ou FLUX.1 Kontext.
Há muitos outros SDKs agregados, como o OpenRouter. Tomando a interface de geração de imagem como exemplo, basta passar um prompt para receber a URL da imagem gerada e a resposta de texto original do modelo:
import { fal } from '@fal-ai/client';
const result = await fal.subscribe('fal-ai/gemini-25-flash-image', {
input: {
prompt: '',
},
});
console.log(result.data); // { image: [{ url: 'https://...' }]; description: 'Sure, this is your image:' }A API de edição de imagem também aceita um conjunto de URLs de imagem como parâmetros. Mesmo ao passar DataURLs codificados, avisos como “Unable to read image information” ainda podem aparecer. Por isso, o fal.ai oferece uma interface de upload de arquivo, o que permite ativar o envio quando imagens locais são adicionadas à tela.
Design da API
Precisamos de uma API responsável por gerar e modificar imagens. Nos dois cenários, os parâmetros devem ser os mesmos: um prompt e uma lista de imagens de referência.
import { fal } from '@fal-ai/client';
api.createOrEditImage = async (
isEdit: boolean,
prompt: string,
image_urls: string[],
): Promise<{ images: { url: string }[]; description: string }> => {
const result = await fal.subscribe(
isEdit
? 'fal-ai/gemini-25-flash-image/edit'
: 'fal-ai/gemini-25-flash-image',
{
input: {
prompt,
image_urls,
},
},
);
return result.data;
};Caixa de chat
A caixa de chat oferece outro ponto de partida além da tela.
Remover fundo
Dê um clique duplo na imagem para entrar no modo de edição:
private async removeBackground() {
this.removingBackground = true;
const { images } = await createOrEditImage(
true,
'Remove background from the image',
[this.node.fill],
);
if (images.length > 0) {
this.api.runAtNextTick(() => {
this.api.updateNode(newImage, { fill: images[0].url });
this.api.record();
this.removingBackground = false;
});
}
}Inpainting
Serve para apagar ou modificar objetos já existentes e selecionados em uma imagem, garantindo que as outras partes permaneçam inalteradas.
https://www.recraft.ai/docs#inpaint-image
O inpainting substitui ou modifica partes específicas de uma imagem. Ele usa uma máscara para identificar as áreas a preencher, em que pixels brancos representam as regiões a retocar e pixels pretos indicam as áreas que devem permanecer intactas, isto é, os pixels brancos são preenchidos com base na entrada fornecida no prompt.
Quando o usuário desenha uma área fechada em um editor simples, ela precisa ser convertida em um parâmetro de máscara para enviar à API. Essa máscara é, na essência, uma imagem em tons de cinza:
É aqui que a importância dos editores fica evidente. Até recursos simples de edição têm valor. O Recraft menciona três pontos: https://www.recraft.ai/blog/inpainting-with-ai-how-to-edit-images-with-precision-using-recraft
- Facilidade para ampliar e reduzir o zoom. Afinal, é uma operação de precisão, então o zoom da tela é crucial.
- Inpainting com IA usando modelos de segmentação como o SAM de forma automática
- Flexibilidade criativa
Criar máscara
Oferecemos vários métodos interativos para o usuário gerar máscaras:
Usar o SAM via WebGPU
Além de permitir que o usuário defina a área de modificação com a maior precisão possível, seria ainda melhor se a seleção da área pudesse ser feita por métodos mais simples, como clicar para selecionar.
Na Lição 1 - Camadas de abstração de hardware, apresentamos as vantagens do WebGPU (o Figma também atualizou recentemente o motor de renderização). Além da renderização, ele torna possível o GPGPU no navegador, com suporte a Compute Shader. O ONNX oferece um runtime para a web, permitindo inferência em tempo real direto no navegador, sem consumir tokens. Para detalhes, veja: How to add machine learning to your web application with ONNX Runtime.
Seguimos este artigo: Image Segmentation in the Browser with Segment Anything Model 2 e implementamos as seguintes otimizações:
- Usamos o ORT model format para reduzir o tamanho dos modelos baixados em tempo de execução
- Empregamos WebGPU para uma inferência mais rápida. Para detalhes, veja: Using the WebGPU Execution Provider
- Executamos dentro de WebWorkers para não bloquear a thread principal
Reunimos isso no SAM plugin. Eis o nosso exemplo: Use SAM in WebWorker.
Para outras práticas e materiais relacionados ao SAM3, consulte:
- Segment Anything 2, in WebGPU
- Request for Official ONNX Export + TensorRT Conversion Scripts for SAM3
A máscara obtida pelo SAM pode ser usada como imagem de referência para alimentar o modelo de imagem original.
Usar o LaMa
Client-Side Image Inpainting with ONNX and Next.js explica como usar o modelo LaMa no lado do cliente.
Combinar várias imagens
Usar a tela permite obter informação extra de posição sobre as imagens, algo muitas vezes difícil de descrever com linguagem. Por exemplo, podemos arrastar uma xícara para qualquer posição de uma mesa e compor uma imagem.
Outpainting
Esse recurso ainda não tem uma implementação de API correspondente da OpenAI. Vamos ver primeiro como o Recraft faz isso. https://www.recraft.ai/blog/ai-outpainting-how-to-expand-images
O outpainting permite que o usuário expanda uma imagem para além do quadro original. É especialmente útil para completar imagens cortadas ou acrescentar mais cenário de fundo.
Serve para manter inalterados os objetos selecionados na imagem, por exemplo ao mudar o fundo:
Ou para expandir para fora:
No momento, o GPT 4o só oferece suporte a três tamanhos fixos, enquanto o Nano banana precisa de alguns truques para produzir uma imagem de tamanho arbitrário, como passar uma imagem em branco de um tamanho definido como referência e enfatizar isso no prompt. Dá para tornar isso bem natural por meio de operações na tela: o usuário só precisa arrastar até o tamanho adequado, e o aplicativo gera automaticamente essa imagem de referência em branco pela Canvas API.
Separação de camadas
Raster para vetor
Muitas ferramentas online e de código aberto oferecem soluções baseadas em processamento de imagem tradicional:
- Recraft AI image vectorizer
- Lottiefiles Raster to Vector converter
- vtracer
Essa abordagem, porém, não dá resultados satisfatórios no processamento de texto:
O motivo é que esse algoritmo costuma se dividir nas etapas a seguir, e a primeira etapa não distingue texto de gráficos adequados à vetorização:
- O “Path walking” converte pixels em caminhos
- Os caminhos são simplificados em polígonos
- Há tentativas de suavizar os polígonos
Separar fundo e texto
Primeiro, use uma ferramenta parecida com OCR para identificar regiões de texto e gerar uma máscara. Depois, remova a máscara e faça o modelo regenerar a imagem por um processo padrão de inpainting, para obter uma imagem de fundo sem texto.
FLUX-Text: A Simple and Advanced Diffusion Transformer Baseline for Scene Text Editing
Usar o Qwen-Image-Layered de código aberto permite a decomposição em camadas. No fal.ai plugin, chegamos ao efeito a seguir:
Reconhecimento de fonte
Em seguida, precisamos identificar atributos de estilo, como a fonte e o tamanho da fonte, dentro da área de texto.
TextStyleBrush: Transfer of Text Aesthetics from a Single Example
O Adobe Photoshop oferece Match fonts:
O whatfontis oferece uma API pública que encontra, na biblioteca de fontes, a fonte mais próxima de uma área especificada da imagem.
[
{
"title": "Abril Fatface",
"url": "https://www.whatfontis.com/FF_Abril-Fatface.font",
"image": "https://www.whatfontis.com/img16/A/B/FF_Abril-FatfaceA.png"
}
]Por fim, sobreponha todas as camadas.
Ampliar imagem
Podemos ampliar a imagem com um modelo. A figura de comparação a seguir vem do Topaz Gigapixel:
Podemos usar fal-ai/topaz/upscale/image ou SeedVR2 no fal.ai. No navegador, podemos usar o UpscalerJS em um webworker. Veja o nosso upscaler plugin, que usa por padrão o modelo @upscalerjs/esrgan-medium 4x.
Outro runtime de navegador
O UpscalerJS usa tensorflow.js. Você pode escolher o super-resolution-js com o runtime ONNX, ou um runtime novo chamado LiteRT:
WebMCP para a tela do projeto
Com o usuário autenticado, o editor do projeto registra seis WebMCP imperative tools quando document.modelContext está disponível: get_canvas_summary, get_selection, get_nodes, export_canvas_code, create_shape e update_node. Por exemplo, um agente pode ler a seleção atual, criar um retângulo e depois mudar a largura. As duas ferramentas de escrita usam o mesmo caminho api.edit() do editor, então as edições entram no histórico de desfazer e na colaboração da tela.
No momento, o WebMCP exige um navegador com suporte (origin trial do Chrome 149, ou a flag de desenvolvimento chrome://flags/#enable-webmcp-testing). Abra um projeto seu e entre na conta antes de experimentar as ferramentas. Os outros navegadores continuam funcionando como editores comuns. As ferramentas são removidas quando a tela fecha ou o projeto muda. A primeira versão pode criar e editar retângulos e elipses; a leitura de nós devolve um conjunto limitado de propriedades, e a exportação de código tem limite de 32.000 caracteres.
Na página do projeto, você pode inspecionar as ferramentas no DevTools e experimentar uma edição completa:
const tools = await document.modelContext.getTools();
const findTool = (name) => tools.find((tool) => tool.name === name);
const summary = await document.modelContext.executeTool(
findTool('get_canvas_summary'),
{},
);
console.log(JSON.parse(summary));
const created = JSON.parse(
await document.modelContext.executeTool(findTool('create_shape'), {
type: 'rect',
x: 100,
y: 100,
width: 200,
height: 100,
fill: '#3b82f6',
}),
);
await document.modelContext.executeTool(findTool('update_node'), {
id: created.id,
width: 240,
});Desfazer no editor restaura a largura anterior do retângulo. As ferramentas ficam restritas ao projeto atual e não expõem dados da tela de outros projetos.
O WebMCP opera dentro de uma aba aberta do navegador. Um servidor MCP independente para agentes de desktop é uma integração separada, futura.
Outras integrações MCP
MCP: What It Is and Why It Matters:
Em vez de ter apenas uma GUI ou uma API usada por pessoas, você ganha uma interface de IA “de graça”. Essa ideia levou ao conceito de “desenvolvimento MCP-first”, em que você constrói o servidor MCP do aplicativo antes ou junto com a GUI.
pencil.dev
A tela vetorial MCP bidirecional com a qual você sonhava. Veja pencil.dev
O Pencil não oferece apenas ferramentas MCP de leitura, mas também acesso completo de escrita e muitas outras ferramentas úteis para operar a tela por completo. Essa é a verdadeira mágica. Você pode conectar o mundo inteiro de MCPs, trazer dados de outras fontes, como bancos de dados, APIs, dados de gráficos, Playwright/Puppeteer, ou ligar outros agentes com facilidade. Você está no comando!
O Figma MCP Server pode manipular a Figma API.