Ejemplos
Ejemplos prácticos y fragmentos de código para varios casos de uso
Ejemplos Básicos
Edición Simple de Texto
Cambiar texto existente en una imagen manteniendo el estilo original.
import { QwenImageEdit } from 'qwen-image-edit';
const editor = new QwenImageEdit({
apiKey: 'tu-clave-api'
});
// Cambiar texto en una imagen
const resultado = await editor.editText({
imagen: './cartel-original.jpg',
prompt: 'Cambiar "Gran Venta" por "Oferta Especial"',
preservarEstilo: true
});
console.log('Imagen editada:', resultado.imagenUrl);
Agregar Elementos
Agregar nuevos elementos a una imagen existente.
// Agregar un logo
const conLogo = await editor.editElement({
imagen: './imagen-base.jpg',
prompt: 'Agregar un logo de empresa en la esquina superior derecha',
estilo: 'profesional',
opacidad: 0.8
});
// Agregar texto decorativo
const conTexto = await editor.editText({
imagen: conLogo.imagenUrl,
prompt: 'Agregar "Nuevo Producto" en fuente elegante dorada en el centro',
fuente: 'serif',
color: '#FFD700'
});
Ejemplos Avanzados
Transferencia de Estilo
Aplicar diferentes estilos artísticos a imágenes.
// Estilo acuarela
const acuarela = await editor.transferStyle({
imagen: './foto-original.jpg',
estilo: 'acuarela',
intensidad: 0.7,
preservarDetalles: true
});
// Estilo anime
const anime = await editor.transferStyle({
imagen: './retrato.jpg',
estilo: 'anime',
paleta: 'vibrante',
suavizado: 'alto'
});
// Estilo vintage
const vintage = await editor.transferStyle({
imagen: './paisaje.jpg',
estilo: 'vintage',
filtros: ['sepia', 'viñeta'],
contraste: 1.2
});
Edición por Lotes
Procesar múltiples imágenes con la misma configuración.
const imagenes = [
'./imagen1.jpg',
'./imagen2.jpg',
'./imagen3.jpg'
];
const resultados = await Promise.all(
imagenes.map(imagen =>
editor.editText({
imagen,
prompt: 'Agregar marca de agua "© Mi Empresa 2024" en la esquina inferior',
opacidad: 0.6,
tamaño: 'pequeño'
})
)
);
console.log('Procesadas:', resultados.length, 'imágenes');
Edición Condicional
Aplicar ediciones basadas en el contenido de la imagen.
// Detectar y editar texto automáticamente
const editarTextoAutomatico = async (imagen) => {
// Primero detectar texto existente
const analisis = await editor.analyzeImage({
imagen,
detectar: ['texto', 'objetos']
});
if (analisis.texto.length > 0) {
// Si hay texto, traducirlo
return await editor.editText({
imagen,
prompt: `Traducir todo el texto al español manteniendo el formato`,
preservarPosicion: true
});
} else {
// Si no hay texto, agregar título
return await editor.editText({
imagen,
prompt: 'Agregar título "Imagen Sin Texto" en la parte superior',
fuente: 'sans-serif',
tamaño: 'mediano'
});
}
};
Casos de Uso Específicos
Marketing y Publicidad
// Crear variaciones para pruebas A/B
const crearVariacionesMarketing = async (imagenBase) => {
const variaciones = [
{
nombre: 'urgencia',
prompt: 'Cambiar "Compra Ahora" por "¡Solo Hoy! Compra Ahora"',
color: '#FF0000'
},
{
nombre: 'descuento',
prompt: 'Agregar "50% OFF" en banner llamativo',
estilo: 'llamativo'
},
{
nombre: 'premium',
prompt: 'Cambiar estilo a elegante y premium',
paleta: 'dorado-negro'
}
];
const resultados = {};
for (const variacion of variaciones) {
resultados[variacion.nombre] = await editor.editText({
imagen: imagenBase,
prompt: variacion.prompt,
estilo: variacion.estilo,
color: variacion.color
});
}
return resultados;
};
Localización de Contenido
// Adaptar imágenes para diferentes mercados
const localizarImagen = async (imagen, idioma, region) => {
const configuraciones = {
'es-ES': {
moneda: '€',
formato: 'europeo',
colores: ['azul', 'amarillo']
},
'es-MX': {
moneda: '$',
formato: 'americano',
colores: ['verde', 'rojo', 'blanco']
},
'es-AR': {
moneda: '$',
formato: 'sudamericano',
colores: ['celeste', 'blanco']
}
};
const config = configuraciones[`${idioma}-${region}`];
return await editor.editText({
imagen,
prompt: `Adaptar texto y símbolos para ${region}, usar moneda ${config.moneda}`,
estilo: config.formato,
paleta: config.colores
});
};
Automatización de Flujo de Trabajo
// Pipeline completo de procesamiento
const procesarImagenCompleta = async (imagenOriginal) => {
try {
// Paso 1: Limpiar imagen
const limpia = await editor.cleanImage({
imagen: imagenOriginal,
eliminar: ['ruido', 'artefactos']
});
// Paso 2: Optimizar calidad
const optimizada = await editor.enhanceImage({
imagen: limpia.imagenUrl,
mejoras: ['nitidez', 'contraste', 'colores']
});
// Paso 3: Agregar branding
const conBranding = await editor.editText({
imagen: optimizada.imagenUrl,
prompt: 'Agregar logo y marca de agua corporativa',
posicion: 'esquina-inferior-derecha'
});
// Paso 4: Crear versiones para diferentes plataformas
const versiones = await Promise.all([
// Instagram (cuadrada)
editor.resizeImage({
imagen: conBranding.imagenUrl,
dimensiones: { ancho: 1080, alto: 1080 },
recorte: 'inteligente'
}),
// Facebook (rectangular)
editor.resizeImage({
imagen: conBranding.imagenUrl,
dimensiones: { ancho: 1200, alto: 630 },
recorte: 'centrado'
}),
// Twitter (banner)
editor.resizeImage({
imagen: conBranding.imagenUrl,
dimensiones: { ancho: 1500, alto: 500 },
recorte: 'horizontal'
})
]);
return {
original: imagenOriginal,
procesada: conBranding.imagenUrl,
versiones: {
instagram: versiones[0].imagenUrl,
facebook: versiones[1].imagenUrl,
twitter: versiones[2].imagenUrl
}
};
} catch (error) {
console.error('Error en procesamiento:', error);
throw error;
}
};
Consejos y Mejores Prácticas
Optimización de Rendimiento
// Usar caché para operaciones repetitivas
const cache = new Map();
const editarConCache = async (imagen, prompt) => {
const clave = `${imagen}-${prompt}`;
if (cache.has(clave)) {
return cache.get(clave);
}
const resultado = await editor.editText({ imagen, prompt });
cache.set(clave, resultado);
return resultado;
};
// Procesar en paralelo cuando sea posible
const procesarEnParalelo = async (imagenes, operacion) => {
const lotes = [];
const tamañoLote = 3; // Procesar 3 a la vez
for (let i = 0; i < imagenes.length; i += tamañoLote) {
const lote = imagenes.slice(i, i + tamañoLote);
lotes.push(Promise.all(lote.map(operacion)));
}
const resultados = await Promise.all(lotes);
return resultados.flat();
};
Manejo de Errores Robusto
const editarConReintentos = async (imagen, prompt, maxReintentos = 3) => {
for (let intento = 1; intento <= maxReintentos; intento++) {
try {
return await editor.editText({ imagen, prompt });
} catch (error) {
console.warn(`Intento ${intento} falló:`, error.message);
if (intento === maxReintentos) {
throw new Error(`Falló después de ${maxReintentos} intentos: ${error.message}`);
}
// Esperar antes del siguiente intento
await new Promise(resolve => setTimeout(resolve, 1000 * intento));
}
}
};