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));
    }
  }
};

Recursos Adicionales