Lección 28 - Integración con la IA
Hoy, GPT 4o (gpt-image-1) y Nano banana (gemini-2.5-flash-image) han bajado de forma notable la barrera de la edición de imágenes. Desde el punto de vista de la interacción entre la persona y la computadora, la combinación de interfaces de chat y de lienzo es cada vez más popular. El historial de chat con los modelos refleja de forma natural el historial de modificación de las imágenes, mientras que un lienzo que se puede arrastrar con libertad hace naturales la selección de imágenes y el procesamiento en paralelo. Para más detalles, consulta UI for AI.
La imagen de abajo muestra la interfaz del producto Lovart, que usa Konva.js, mencionado en nuestra Lección 21 - Transformer, como tecnología subyacente. Aunque se centra sobre todo en la edición de imágenes, conserva funciones habituales de los editores gráficos, como la lista de capas oculta de forma predeterminada en la esquina inferior izquierda, y la barra de herramientas de la izquierda también puede insertar algunas formas básicas.
Recraft también está probando la funcionalidad de chat. Por lo que he observado, el lienzo y el chat se están convirtiendo en los dos puntos de entrada principales de este tipo de editor:
En esta lección lo combinaremos con Nano banana para enriquecer nuestra funcionalidad de edición de imágenes.
Integrar modelos
Para usar Nano banana elegí fal.ai en lugar de la generative-ai oficial de Google. El motivo es que una API unificada me facilita comparar los efectos de otros modelos de generación de imágenes, como qwen-image-edit o FLUX.1 Kontext.
Hay muchos otros SDK agregados, como OpenRouter. Tomando como ejemplo la interfaz de generación de imágenes, solo hace falta pasar un prompt para recibir la URL de la imagen generada y la respuesta de texto original del 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:' }La API de edición de imágenes también acepta un conjunto de URL de imágenes como parámetros. Incluso al pasar DataURL codificadas, pueden seguir apareciendo avisos como «Unable to read image information». Por eso, fal.ai ofrece una interfaz de subida de archivos, que nos permite activar las subidas cuando se añaden imágenes locales al lienzo.
Diseño de la API
Necesitamos una API encargada de generar y modificar imágenes. En ambos escenarios, los parámetros deben ser idénticos: un prompt y una lista de imágenes de referencia.
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;
};Cuadro de chat
El cuadro de chat ofrece otro punto de partida además del lienzo.
Quitar el fondo
Haz doble clic en la imagen para entrar en el modo de edición:
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;
});
}
}Relleno selectivo
Sirve para borrar o modificar objetos existentes seleccionados en una imagen y, al mismo tiempo, dejar el resto sin cambios.
https://www.recraft.ai/docs#inpaint-image
El inpainting sustituye o modifica partes concretas de una imagen. Usa una máscara para identificar las áreas que hay que rellenar: los píxeles blancos representan las regiones que se van a repintar y los píxeles negros indican las áreas que se mantienen intactas; es decir, los píxeles blancos se rellenan según lo indicado en el prompt.
Cuando alguien dibuja un área cerrada con un editor sencillo, hay que convertirla en un parámetro de máscara para pasarlo a la API. Esta máscara es, en esencia, una imagen en escala de grises:
Aquí se hace evidente la importancia de los editores. Incluso las funciones de edición sencillas tienen valor. Recraft menciona tres puntos: https://www.recraft.ai/blog/inpainting-with-ai-how-to-edit-images-with-precision-using-recraft
- Facilidad para acercar y alejar el zoom. Al fin y al cabo es una operación de precisión, así que el zoom del lienzo es crucial.
- Inpainting con IA mediante modelos de segmentación como SAM, de forma automática
- Flexibilidad creativa
Crear la máscara
Ofrecemos varios métodos de interacción para que se generen máscaras:
Usar SAM mediante WebGPU
Además de permitir definir el área de modificación con la mayor precisión posible, sería aún mejor si la selección del área pudiera hacerse con métodos más sencillos, como hacer clic para seleccionar.
En Lección 1 - Capas de abstracción de hardware presentamos las ventajas de WebGPU (Figma también actualizó hace poco su motor de renderizado). Más allá del renderizado, hace posible la GPGPU en el navegador gracias al soporte de Compute Shader. ONNX ofrece un runtime para la web, lo que permite la inferencia en tiempo real directamente en el navegador sin consumir tokens. Para más detalles, consulta: Cómo añadir aprendizaje automático a tu aplicación web con ONNX Runtime.
Nos basamos en este artículo: Segmentación de imágenes en el navegador con Segment Anything Model 2 e implementamos las optimizaciones siguientes:
- Se utilizó el formato de modelo ORT para reducir el tamaño de los modelos descargados en tiempo de ejecución
- Se empleó WebGPU para obtener velocidades de inferencia más altas. Para más detalles, consulta: Usar el proveedor de ejecución WebGPU
- Se ejecutó dentro de WebWorkers para evitar bloquear el hilo principal
Los reunimos en el complemento SAM. Aquí está nuestro ejemplo: Usar SAM en un WebWorker.
Para otras prácticas y materiales relacionados con SAM3, consulta:
- Segment Anything 2, en WebGPU
- Solicitud de scripts oficiales de exportación a ONNX y de conversión a TensorRT para SAM3
La máscara obtenida mediante SAM puede usarse como imagen de referencia para alimentar el modelo de imagen original.
Usar LaMa
Inpainting de imágenes en el cliente con ONNX y Next.js explica cómo usar el modelo LaMa en el cliente.
Combinar varias imágenes
Usar el lienzo nos permite obtener información posicional adicional sobre las imágenes, que a menudo es difícil de describir con el lenguaje. Por ejemplo, podemos arrastrar una taza de té a cualquier posición de un escritorio y componer una imagen.
Expansión de la imagen
Esta función todavía no tiene una implementación de API correspondiente de OpenAI. Veamos primero cómo lo hace Recraft. https://www.recraft.ai/blog/ai-outpainting-how-to-expand-images
El outpainting permite ampliar una imagen más allá de su marco original. Es especialmente útil para completar imágenes recortadas o añadir más escenario de fondo.
Sirve para mantener sin cambios los objetos seleccionados de la imagen, por ejemplo al cambiar el fondo:
O para expandir hacia fuera:
Ahora mismo, GPT 4o solo admite tres tamaños fijos, mientras que Nano banana necesita algunos trucos para lograr una salida de imagen de tamaño arbitrario, como pasar una imagen en blanco de un tamaño indicado como referencia e insistir en ello en el prompt. Podemos hacer esto muy natural mediante operaciones en el lienzo: basta con arrastrar hasta el tamaño adecuado, y la aplicación genera de forma automática esta imagen de referencia en blanco a través de la Canvas API.
Separación de capas
De ráster a vector
Muchas herramientas en línea y de código abierto ofrecen soluciones basadas en el procesamiento de imágenes tradicional:
- Recraft vectorizador de imágenes con IA
- Lottiefiles conversor de ráster a vector
- vtracer
Sin embargo, este enfoque no da resultados satisfactorios en el procesamiento de texto:
El motivo es que este algoritmo suele dividirse en las etapas siguientes, y la primera no distingue entre el texto y los gráficos aptos para vectorizar:
- El «recorrido de trazados» convierte los píxeles en trazados
- Los trazados se simplifican en polígonos
- Se intenta suavizar los polígonos
Separar el fondo y el texto
Primero se usa una herramienta parecida al OCR para identificar las regiones de texto y generar una máscara. Después se quita la máscara y el modelo regenera la imagen mediante un proceso de inpainting estándar, para obtener una imagen de fondo sin texto.
Con el Qwen-Image-Layered de código abierto se puede descomponer en capas. En el complemento de fal.ai logramos el efecto siguiente:
Reconocimiento de fuentes
A continuación hay que identificar los atributos de estilo, como la fuente y el tamaño de fuente, dentro del área de texto.
TextStyleBrush: transferencia de la estética del texto a partir de un solo ejemplo
Adobe Photoshop ofrece Coincidir fuentes:
whatfontis ofrece una API pública que hace coincidir la fuente más cercana de su biblioteca de fuentes con un área indicada dentro de una imagen.
[
{
"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 último, superpón todas las capas.
Ampliar la imagen
Podemos ampliar la imagen con un modelo; la imagen de comparación siguiente procede de Topaz Gigapixel:
Podemos usar fal-ai/topaz/upscale/image o SeedVR2 en fal.ai. En el navegador podemos usar UpscalerJS en un webworker; consulta nuestro complemento de ampliación, que usa de forma predeterminada el modelo @upscalerjs/esrgan-medium 4x.
Otro runtime del navegador
UpscalerJS usa tensorflow.js; puedes elegir super-resolution-js con el runtime de ONNX, o un runtime nuevo llamado LiteRT:
WebMCP para el lienzo del proyecto
El editor del proyecto con la sesión iniciada registra seis herramientas imperativas de WebMCP cuando document.modelContext está disponible: get_canvas_summary, get_selection, get_nodes, export_canvas_code, create_shape y update_node. Por ejemplo, un agente puede leer la selección actual, crear un rectángulo y después cambiar su ancho. Las dos herramientas de escritura usan la misma ruta api.edit() que el editor, así que las ediciones entran en el historial de deshacer y en la colaboración del lienzo.
WebMCP exige ahora mismo un navegador compatible (prueba de origen de Chrome 149, o la marca de desarrollo chrome://flags/#enable-webmcp-testing). Abre un proyecto que te pertenezca e inicia sesión antes de probar las herramientas. Los demás navegadores siguen funcionando como editores normales. Las herramientas se retiran cuando se cierra el lienzo o cambia el proyecto. La primera versión puede crear y editar rectángulos y elipses; las lecturas de nodos devuelven un conjunto limitado de propiedades y la exportación de código tiene un límite de 32 000 caracteres.
En la página del proyecto puedes inspeccionar las herramientas desde DevTools y probar una edición 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,
});Deshacer en el editor restaura el ancho anterior del rectángulo. Las herramientas se circunscriben al proyecto actual y no exponen datos del lienzo de otros proyectos.
WebMCP opera dentro de una pestaña abierta del navegador. Un servidor MCP independiente para agentes de escritorio es una integración aparte y futura.
Otras integraciones de MCP
MCP: qué es y por qué importa:
En lugar de tener solo una GUI o una API que usan las personas, obtienes una interfaz de IA «gratis». Esta idea ha llevado al concepto de «desarrollo MCP-first», en el que construyes el servidor MCP de tu aplicación antes que la GUI, o en paralelo con ella.
pencil.dev
El lienzo vectorial MCP bidireccional con el que soñabas. Consulta pencil.dev
Pencil no ofrece solo herramientas de lectura de MCP, sino también acceso de escritura completo y muchas otras herramientas prácticas para operar el lienzo por completo. Esta es la verdadera magia. Puedes conectar todo el mundo de los MCP, traer datos de otras fuentes como bases de datos, API, datos de gráficos, Playwright/Puppeteer, o conectar otros agentes con facilidad. Tú tienes el control.
Figma MCP Server puede manipular la Figma API.