Pix2Pix

Què és Pix2Pix?

Pix2Pix és un model d'intel·ligència artificial que aprèn a traduir imatges d'un domini a un altre. Per exemple:

• Esbós → Fotografia: dibuixes un contorn i el model genera una imatge realista.
• Mapa → Satèl·lit: un mapa de carrers es converteix en una vista aèria.
• Blanc i negre → Color: una foto en escala de grisos es coloreja automàticament.
• Dia → Nit: una escena diürna es transforma en nocturna.

El model s'entrena amb parells d'imatges: per cada esbós, hi ha una foto real corresponent. Així aprèn la correspondència entre els dos dominis.

Pix2Pix amb ml5.js

ml5.js ofereix el model pix2pix, que accepta un canvas com a entrada i genera una imatge de sortida en temps real mentre dibuixes.

Estructura bàsica del codi:

let pix2pix;

async function setup() {
  createCanvas(256, 256);
  background(0);
  pix2pix = ml5.pix2pix('models/edges2cats.pict', modelReady);
}

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

function draw() {
  if (mouseIsPressed) {
    stroke(255); strokeWeight(10);
    line(pmouseX, pmouseY, mouseX, mouseY);
    pix2pix.transfer(canvas, gotResult);
  }
}

Exemples de models pre-entrenats: 'edges2cats' (contorns a gats), 'edges2shoes' (contorns a sabates), 'facades' (mapes a edificis).

Simulació: dibuixa i transforma

Com que els models Pix2Pix requereixen descàrrega, simularem el funcionament: dibuixes al llenç i el sistema "tradueix" el teu traç a una interpretació visual diferent.

// Mode 1: dibuix normal (esbós)
// Mode 2: generació automàtica (Pix2Pix simulat)
// Tecla 'g': genera una imatge completa automàticament

function keyPressed() {
  if (key === '1') { mode = 0; background(255); } // Mode esbós
  if (key === '2') { mode = 1; background(255); } // Mode generació
  if (key === 'c') { background(255); }            // Netejar
  if (key === 'g') { /* Generar imatge automàtica */ }
}

El procés creatiu amb Pix2Pix

Pix2Pix canvia la manera com pensem el dibuix. En lloc de dibuixar el resultat final, dibuixes indicacions i deixes que el model completi la imatge. El procés típic és:

1. Preparar el llenç: fons negre o blanc segons el model.
2. Dibuixar els contorns: traços blancs sobre fons negre (o viceversa).
3. Transferir: el model tradueix l'esbós a imatge realista.
4. Iterar: ajustar el dibuix i tornar a transferir fins obtenir el resultat desitjat.

És un diàleg entre tu i la màquina: tu proposes, ella completa, tu ajustes.

Exemples creatius pas a pas

function mouseReleased() {
  // Analitza l'esbós i genera una "traducció"
  let comptador = 0;
  // Compta píxels foscos...
  if (comptador > 100) { /* Genera imatge */ }
}

// Clic esquerre: "terra" (verd)
// Clic dret: "aigua" (blau)
// Barra espaiadora: netejar
// Pix2Pix traduiria aquests colors a un paisatge realista

Consells per treballar amb Pix2Pix

• Models pre-entrenats: ml5.js inclou 'edges2cats', 'edges2shoes', 'edges2handbags', 'facades'. Prova'ls tots.
• Preparació del dibuix: la majoria de models esperen fons negre i traços blancs (o al revés). Llegeix la documentació.
• Mida del canvas: 256x256 píxels és la mida estàndard per a la majoria de models.
• Temps de resposta: la transferència pot trigar entre 0.5 i 2 segons. Dibuixa amb traços clars i espera el resultat.
• Experimenta: prova a dibuixar formes abstractes i observa com el model les interpreta. Sovint els resultats són sorprenents.