Introducció a ml5.js

Què és el machine learning?

El machine learning (aprenentatge automàtic) és una branca de la intel·ligència artificial que permet als ordinadors aprendre patrons a partir de dades, sense ser programats explícitament per a cada tasca.

En lloc d'escriure regles com "si hi ha dos ulls i un nas, és una cara", donem milers d'exemples a un algorisme que troba les regles per si mateix.

Què és ml5.js?

ml5.js és una biblioteca de JavaScript que fa accessible el machine learning a artistes, dissenyadors i educadors. Està construïda sobre TensorFlow.js i ofereix models pre-entrenats que funcionen directament al navegador.

Amb ml5.js podem:

• Classificar imatges: reconèixer si una foto conté un gat, un gos, etc.
• Detectar cares i cossos: trobar persones en una imatge o vídeo.
• Generar imatges: transformar esbossos en fotografies (Pix2Pix).
• Transferir estils: aplicar l'estil de Van Gogh a una foto.
• Classificar sons: reconèixer paraules o sons ambientals.

Per utilitzar ml5.js, afegim la biblioteca al nostre HTML:

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Primer exemple: classificació d'imatges

MobileNet és un model pre-entrenat que pot reconèixer milers d'objectes. El carreguem amb ml5.js i li passem una imatge perquè ens digui què hi veu.

En aquest exemple, classifiquem una imatge d'exemple (un gat) i mostrem els resultats al llenç.

let classifier;
let img;
let label = '';

function preload() {
  img = loadImage('https://.../gat.jpg');
}

function setup() {
  createCanvas(320, 240);
  classifier = ml5.imageClassifier('MobileNet', modelReady);
}

function modelReady() {
  classifier.classify(img, gotResult);
}

function gotResult(results, error) {
  if (error) { console.error(error); return; }
  label = results[0].label; // ex: 'tabby cat'
}

function draw() {
  background(0);
  image(img, 0, 0, width, height);
}

El model triga uns segons a carregar la primera vegada. Un cop carregat, la classificació és quasi instantània.

Estructura típica d'un projecte ml5.js

La majoria de projectes amb ml5.js segueixen aquest patró:

1. Carregar el model: ml5.nomDelModel('NomDelModel', callback)
2. Esperar que estigui llest: el callback s'executa quan el model s'ha carregat.
3. Fer prediccions: cridar mètodes com .classify(), .detect(), etc.
4. Processar resultats: un segon callback rep els resultats i els utilitzem per dibuixar o interactuar.

// Patró general
let model;

function setup() {
  createCanvas(400, 300);
  model = ml5.nomDelModel('NomDelModel', modelReady);
}

function modelReady() {
  // El model està carregat i llest per fer prediccions
  model.ferPrediccio(dades, gotResult);
}

function gotResult(results, error) {
  if (error) { console.error(error); return; }
  // Utilitza results per crear art
}

Models disponibles a ml5.js

ml5.js ofereix diversos models pre-entrenats que explorarem en els propers temes:

Exemple creatiu: classificació en temps real

Simulem un classificador que reacciona al ratolí: segons la posició X, mostra diferents "prediccions" artístiques.

function draw() {
  let zona = floor(map(mouseX, 0, width, 0, 3));
  if (zona === 0) { /* Gat */ }
  else if (zona === 1) { /* Gos */ }
  else { /* Ocell */ }
}

Consells per treballar amb ml5.js

• Connexió a internet: els models es descarreguen la primera vegada. Assegura't de tenir connexió.
• Temps de càrrega: el primer cop que s'executa l'sketch, el model pot trigar uns segons. Sigues pacient.
• Utilitza preload() o callbacks: per assegurar-te que el model està llest abans d'usar-lo.
• Prova amb imatges petites: per a classificació, imatges de 224x224 píxels són suficients i més ràpides.
• Explora la documentació: ml5.js té exemples i tutorials a ml5js.org.