Votre première application Machine Learning avec Tensorflowjs et React

Commencez l'aventure ‘machine learning’ avec Tensorflowjs et React, tutoriel avec démo et sources

Objectifs

Contexte

Préparation de l’environnement

npx create-react-app tensorflowjs-app && cd tensorflowjs-app
npm i @tensorflow/tfjs

Développement de l’application

Génération des données

// tensorflow.js
export function generateData() {
// data may come from an external resource : CSV file, API, database...
const input = tf.tensor([0, 2, 4, 7, 10, 20, 50], [7, 1]);
const label = tf.tensor([5, 9, 13, 19, 25, 45, 105], [7, 1]);
return [input, label];
}
// TensorflowApp.js
function TensorflowApp() {
return (
<div>
<h1>Tensorflowjs in React</h1>
</div>
);
}
// TensorflowApp.js
const [input, label] = generateData();

Création du modèle

// tensorflow.js
export function createModel({
units = 1,
learningRate = 0.01,
optimizer = "adam",
}) {
const selectOptimizer = (optimizer) => {
return OPTIMIZERS[optimizer].fn(learningRate);
};

const model = tf.sequential();
model.add(tf.layers.dense({ units, inputShape: [1] }));
model.compile({
optimizer: selectOptimizer(optimizer),
loss: "meanSquaredError",
});
return model;
}
// optimizers.js
export const OPTIMIZERS = {
sgd: { libelle: "sgd", fn: (lr) => tf.train.sgd(lr) },
adam: { libelle: "adam", fn: (lr) => tf.train.adam(lr) },
adagrad: { libelle: "adagrad", fn: (lr) => tf.train.adagrad(lr) },
adadelta: { libelle: "adadelta", fn: (lr) => tf.train.adadelta(lr) },
momentum: { libelle: "momentum", fn: (lr) => tf.train.momentum(lr, 1) },
rmsprop: { libelle: "rmsprop", fn: (lr) => tf.train.rmsprop(lr) },
};
// TensorflowApp.js
const initialModelOptions = {
optimizer: "adam",
learningRate: 0.01,
epochs: 50,
};

function modelReducer(state, action) {
switch (action.type) {
case "SET_OPTIMIZER":
return { ...state, optimizer: action.value };
case "SET_LEARNINGRATE":
return { ...state, learningRate: parseFloat(action.value) };
case "SET_EPOCHS":
return { ...state, epochs: parseInt(action.value) };
default:
return state;
}
}
// TensorflowApp.js
const handleChangeModelOptions = (action) => (e) => {
dispatch({ type: action, value: e.target.value });
};

Entrainement du modèle

// tensorflow.js
export async function trainModel(model, input, label, epochs = 150) {
await model.fit(input, label, { epochs });
}
// TensorflowApp.js
const handleTrain = () => {
setModelReady(false);
trainModel(model, input, label, modelOptions.epochs).then(() =>
setModelReady(true)
);
};

Utilisation pour prédire une valeur

Résultats et perspectives

French independant developer.