Transferència d'estil

Què és la transferència d'estil?

La transferència d'estil (style transfer) és una tècnica d'intel·ligència artificial que aplica l'estil visual d'una imatge (per exemple, un quadre de Van Gogh) a una altra imatge (per exemple, una foto teva).

El resultat és una imatge híbrida que manté el contingut de la foto original però amb l'estil (colors, pinzellades, textures) de l'obra de referència.

StyleTransfer amb ml5.js

ml5.js ofereix el model StyleTransfer, que aplica un estil pre-entrenat a qualsevol imatge o vídeo en temps real.

Estructura bàsica del codi:

let style;
let img;

async function setup() {
  createCanvas(400, 300);
  style = ml5.styleTransfer('models/wave', modelReady);
  img = await loadImage('foto.jpg');
}

function modelReady() {
  style.transfer(img, (error, result) => {
    if (error) { console.error(error); return; }
    image(result, 0, 0, width, height);
  });
}

ml5.js inclou estils pre-entrenats com 'wave' (Hokusai), 'udnie' (Picasso), 'rain-princess' (Klimt) i 'la-muse' (Matisse).

Simulació visual d'estils artístics

Com que la transferència d'estil real requereix models pesants, simularem diferents efectes d'estil aplicant filtres visuals a una composició, com si fos una foto transformada.

// Simulació de tres "estils" diferents
if (estil === 0) {
  r = map(x, 0, width, 255, 100);   g = map(y, 0, height, 100, 200);
} else if (estil === 1) {
  r = map(y, 0, height, 255, 50);   g = map(x, 0, width, 50, 200);
} else {
  r = map(sin(x*0.01)*cos(y*0.01), -1, 1, 50, 255);
}

Combinar imatge i estil

La transferència d'estil mescla el contingut d'una imatge amb la textura d'una altra. Simulem aquest efecte superposant una "textura artística" (soroll de Perlin) sobre una imatge simple.

// Textura de soroll de Perlin sobre una imatge
for (let x = 0; x < width; x += 8) {
  for (let y = 0; y < height; y += 8) {
    let n = noise(x * 0.05, y * 0.05, mouseX * 0.01);
    if (n > 0.55) {
      fill(color(255, 200, 0, 80));
      rect(x, y, 8, 8);
    }
  }
}

Exemples creatius pas a pas

function keyPressed() {
  if (key === '1') mode = 0; // Cercles grocs
  if (key === '2') mode = 1; // Quadrats blaus
  if (key === '3') mode = 2; // Triangles rosats
}

let intensitat = map(mouseX, 0, width, 0, 1);
for (let x = 0; x < width; x += 6) {
  for (let y = 0; y < height; y += 6) {
    if (random(1) < intensitat && noise(x*0.04, y*0.04) > 0.5) {
      fill(lerpColor(color(255), color(200,100,0,150), intensitat));
      rect(x, y, 6, 6);
    }
  }
}

Consells per a la transferència d'estil

• Models pre-entrenats: ml5.js inclou models com 'wave', 'udnie', 'rain-princess', 'la-muse'. Prova'ls tots!
• Mida de la imatge: la transferència d'estil és computacionalment costosa. Utilitza imatges petites (màxim 400x400) per a temps de resposta ràpids.
• Precarrega models: els models de style transfer poden trigar uns segons a carregar. Utilitza callbacks per saber quan estan llestos.
• Combina estils: pots aplicar el mateix model a múltiples imatges o vídeos per crear coherència visual.
• Experimenta amb els teus propis estils: amb eines com RunwayML pots entrenar els teus propis models de transferència d'estil.