🌐 TensorFlow.js – Le ML dans le Navigateur

Pourquoi exécuter un modèle lourd (ML) dans un navigateur ?

L'API de TF.js est (presque) identique à celle de NumPy ou TensorFlow (Python). L'unité de base est le Tensor.

Création & Opérations

import * as tf from '@tensorflow/tfjs';

// 1. Création
const t1 = tf.tensor([1, 2, 3]); // 1D
const t2 = tf.tensor2d([[1, 2], [3, 4]]); // 2D

// 2. Attributs (similaires à NumPy)
console.log(t2.shape); // [2, 2]
console.log(t2.dtype); // 'float32' (défaut)

// 3. Opérations (Vectorisées)
const a = tf.tensor([1, 2]);
const b = tf.tensor([3, 4]);
const c = a.add(b); // c = [4, 6]
const d = a.mul(b); // c = [3, 8]

// 4. Affichage
c.print(); // (Affiche dans la console)

// 5. Récupérer les données (JS natif)
const data = await c.data(); // (Asynchrone!)
console.log(data); // Float32Array[4, 6]

TF.js choisit automatiquement le meilleur "backend" (moteur d'exécution) disponible.

Changer de Backend (Ex: Forcer WASM)

import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-wasm';

async function setup() {
    // (Attendre que WASM soit prêt)
    await tf.setBackend('wasm');
    console.log(tf.getBackend()); // 'wasm'
}
setup();

TF.js réplique l'API tf.keras, vous permettant de définir des modèles (ou des couches) directement en JavaScript.

Exemple (tf.sequential)

const model = tf.sequential();

// 1. Ajouter une couche Dense (Hidden)
model.add(tf.layers.dense({
    inputShape: [784], // (Input)
    units: 64,
    activation: 'relu'
}));

// 2. Ajouter une couche de sortie
model.add(tf.layers.dense({
    units: 10,
    activation: 'softmax'
}));

// 3. Visualiser
model.summary();

CONCEPT LE PLUS IMPORTANT (et le plus piégeux) :

Le Garbage Collector (GC) de JavaScript nettoie la mémoire JS (ex: a, b), mais **PAS** la mémoire GPU (WebGL) (les données du Tensor).

Si vous créez des Tensors dans une boucle (ex: requestAnimationFrame), vous aurez une **FUITE MÉMOIRE (GPU)** et le navigateur plantera.

function monCalcul() {
    const a = tf.tensor([1, 2]);
    const b = tf.tensor([3, 4]);
    const c = a.add(b);
    
    // ... utiliser c ...
    
    // (Nettoyage manuel)
    a.dispose();
    b.dispose();
    c.dispose();
}

function monCalcul() {
    // 'c' est retourné, il n'est pas "disposé"
    const c = tf.tidy(() => {
        const a = tf.tensor([1, 2]);
        const b = tf.tensor([3, 4]);
        
        // (a et b seront "disposés"
        // automatiquement à la fin)
        
        return a.add(b);
    });
    
    // ... utiliser c ...
    
    c.dispose(); // (Nettoyer c manuellement)
}

C'est la voie "facile". Google fournit une collection de modèles SOTA (@tensorflow-models) "plug-and-play" (souvent optimisés pour le web).

(Nécessite @tensorflow/tfjs et @tensorflow-models/coco-ssd).

// (Ex: dans une boucle requestAnimationFrame)

// 1. Charger le modèle (1 fois)
const model = await cocoSsd.load();

// (videoEl = 

(Nécessite @tensorflow-models/pose-detection). (MoveNet est plus récent/rapide que PoseNet).

import * as posedetection from '@tensorflow-models/pose-detection';

// 1. Charger le détecteur
const detector = await posedetection.createDetector(
    posedetection.SupportedModels.MoveNet
);

async function detectPose(videoEl) {
    // 2. Estimer
    const poses = await detector.estimatePoses(videoEl);
    
    // 3. Utiliser
    // poses = [ { keypoints: [...] } ]
    // keypoints = [
    //   { x: ..., y: ..., score: ..., name: 'left_eye' },
    //   { x: ..., y: ..., score: ..., name: 'right_shoulder' },
    //   ... (17 points)
    // ]
    
    // (Dessiner le squelette sur un ...)
}

(Nécessite @tensorflow-models/face-landmarks-detection). (Filtres type "Snapchat").

import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';

// 1. Charger le modèle
const model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh
);

async function detectFace(videoEl) {
    // 2. Estimer
    const faces = await model.estimateFaces({
        input: videoEl
    });
    
    // 3. Utiliser
    // faces = [ { keypoints: [...] } ]
    // keypoints = [ (468 points (x, y, z)) ]
    
    // (Dessiner le "mesh" (maillage) sur un ...)
}

(Nécessite @tensorflow-models/speech-commands). Reconnaissance de mots-clés (ex: "up", "down", "yes", "no").

import * as speechCommands from '@tensorflow-models/speech-commands';

// 1. Créer le reconnaisseur
// ('BROWSER_FFT' -> utilise le micro)
const recognizer = speechCommands.create('BROWSER_FFT');

// 2. S'assurer que le modèle est chargé
await recognizer.ensureModelLoaded();

// 3. Écouter (Callback)
recognizer.listen(result => {
    // result.scores = [0.1, 0.9, 0.05, ...]
    
    // (Trouver l'index du score max)
    const bestMatchIndex = result.scores.indexOf(Math.max(...result.scores));
    const word = recognizer.wordLabels()[bestMatchIndex];
    
    console.log(word); // (ex: "up", "noise", "down")
    
}, { probabilityThreshold: 0.75 }); // (Seuil de confiance)

Voie la plus courante : Entraîner le modèle en Python (Keras/TF), puis le **convertir** au format TF.js (Graph Model) pour l'inférence (.predict) dans le navigateur.

Outil (Python) : tensorflowjs_converter

# 1. Installer le convertisseur (en Python)
pip install tensorflowjs

Le convertisseur (CLI) prend le modèle Python (H5 ou SavedModel) et génère un model.json (Topologie/Graphe) et des groupX-shardXofX.bin (Poids).

# (Modèle Keras .h5 ou .keras)
tensorflowjs_converter \
    --input_format keras \
    ./mon_modele.h5 \
    ./tfjs_output_folder/

# (Dossier SavedModel de TensorFlow)
tensorflowjs_converter \
    --input_format tf_saved_model \
    ./mon_saved_model_dossier/ \
    ./tfjs_output_folder/

tf.loadGraphModel (recommandé) charge le modèle converti (model.json). Il est optimisé pour l'inférence (pas d'entraînement).

import * as tf from '@tensorflow/tfjs';

// 1. Charger le modèle (depuis votre serveur)
const model = await tf.loadGraphModel("url/tfjs_output_folder/model.json");

// 2. Préparer l'input (Tensor)
const inputTensor = tf.tensor2d([[1, 2, 3, 4]], [1, 4]);

// 3. Prédire (Inférence)
// (Utiliser tf.tidy() !)
const result = tf.tidy(() => {
    // .execute() (pour GraphModel)
    // (vs .predict() pour LayersModel)
    const outputTensor = model.execute(inputTensor);
    return outputTensor;
});

result.print();

TF Hub héberge de nombreux modèles (ex: MobileNet) déjà au format TF.js. On peut les charger directement via URL (pas de conversion manuelle).

const MOBILENET_URL = 
    "https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v2_100_224/classification/3/default/1";

// 1. Charger
const model = await tf.loadGraphModel(MOBILENET_URL, {fromTFHub: true});

// 2. Prédire
// (Input shape [1, 224, 224, 3])
const inputTensor = tf.zeros([1, 224, 224, 3]); 
const preds = model.execute(inputTensor);
preds.print();

On peut entraîner (ou fine-tuner) un modèle Keras-like (tf.LayersModel) directement en JS. L'API est identique à Keras (Python).

// (model = tf.sequential(...) (voir 2.2))

// 1. Compiler (Configurer l'entraînement)
model.compile({
    // (Optimiseur)
    optimizer: tf.train.adam(0.01), // (ou 'adam')
    
    // (Loss)
    loss: 'meanSquaredError', // (ou 'categoricalCrossentropy')
    
    // (Métriques)
    metrics: ['accuracy']
});

model.summary();

.fit() (ou .fitDataset()) lance la boucle d'entraînement. C'est **asynchrone** (await) pour ne pas bloquer le navigateur.

async function train() {
    // (Données d'entraînement (Tensors))
    const xs = tf.tensor2d(...);
    const ys = tf.tensor2d(...);
    
    // 1. Entraîner (Asynchrone)
    const history = await model.fit(xs, ys, {
        epochs: 10,
        batchSize: 32,
        validationSplit: 0.2,
        callbacks: {
            // (Callback pour logger la perte à chaque epoch)
            onEpochEnd: (epoch, logs) => {
                console.log(`Epoch ${epoch}: Loss = ${logs.loss}`);
            }
        }
    });
    
    console.log(history.history.loss);
}

Pour utiliser TF.js côté serveur (ex: dans une API), on utilise les backends Node.js (qui sont des bindings C/C++).

// (Backend: Node.js)
// (Nécessite 'npm install @tensorflow/tfjs-node')

// (Importe le backend)
import * as tf from '@tensorflow/tfjs-node';

// (Le code est identique au JS client)
const a = tf.tensor([1, 2]);
const b = tf.tensor([3, 4]);
const c = a.add(b);
c.print();

// (Pas de tf.tidy() requis,
// la mémoire des Tensors est gérée
// par le C++, comme en Python)

TF.js est utilisé pour des applications interactives, "temps-réel", où la privacité est clé.

Ressources pour apprendre et travailler avec TensorFlow.js.