Premiers pas avec TensorFlow.js

TensorFlow.js est une bibliothèque JavaScript permettant de former et de déployer des modèles d'apprentissage automatique dans le navigateur Web et dans Node.js. Ce didacticiel vous montre comment démarrer avec TensorFlow.js en entraînant un modèle minimal dans le navigateur et en utilisant le modèle pour effectuer une prédiction.

L'exemple de code est disponible sur GitHub .

Conditions préalables

Pour terminer ce didacticiel, vous devez installer les éléments suivants dans votre environnement de développement :

Installer l'exemple

Récupérez le code source et installez les dépendances :

  1. Clonez ou téléchargez le référentiel tfjs-examples .
  2. Accédez au répertoire getting-started : cd tfjs-examples/getting-started .
  3. Installer les dépendances : yarn install .

Si vous regardez le fichier package.json , vous remarquerez peut-être que TensorFlow.js n'est pas une dépendance. En effet, l'exemple charge TensorFlow.js à partir d'un CDN. Voici le code HTML complet de index.html :

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
  </head>
  <body>
    <h4>Tiny TFJS example<hr/></h4>
    <div id="micro-out-div">Training...</div>
    <script src="./index.js"> </script>
  </body>
</html>

L'élément <script> dans l'en-tête charge la bibliothèque TensorFlow.js et l'élément <script> à la fin du corps charge le script d'apprentissage automatique.

Pour d'autres façons de créer une dépendance sur TensorFlow.js, consultez le didacticiel de configuration .

Exécutez l'exemple

Exécutez l'exemple et consultez les résultats :

  1. Dans le répertoire tfjs-examples/getting-started , exécutez yarn watch .
  2. Accédez à http://127.0.0.1:1234 dans votre navigateur.

Vous devriez voir un titre de page et en dessous un numéro tel que 38.31612014770508 . Le nombre exact variera, mais il devrait être proche de 39.

Qu'est-ce qui vient de se passer?

Lorsque index.js est chargé, il entraîne un modèle tf.sequential en utilisant des valeurs $ x $ et $ y $ qui satisfont l'équation $ y = 2x - 1 $.

// Create a simple model.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training. (y = 2x - 1)
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

// Train the model using the data.
await model.fit(xs, ys, {epochs: 250});

Ensuite, il prédit une valeur $ y $ pour la valeur $ x $ invisible 20 et met à jour le DOM pour afficher la prédiction.

// Use the model to do inference on a data point the model hasn't seen.
// Should print approximately 39.
document.getElementById('micro-out-div').innerText =
    model.predict(tf.tensor2d([20], [1, 1])).dataSync();

Le résultat de 2 $ * 20 - 1 $ est 39, donc la valeur $ y $ prévue devrait être d'environ 39.

Et après

Ce didacticiel a fourni un exemple minimal d'utilisation de TensorFlow.js pour entraîner un modèle dans le navigateur. Pour une introduction plus approfondie aux modèles d'entraînement avec JavaScript, consultez le guide TensorFlow.js .

Plus de façons de commencer

Voici d'autres façons de démarrer avec TensorFlow.js et Web ML.

Regarder le cours Web ML TensorFlow.js

Si vous êtes un développeur Web à la recherche d'une introduction pratique au Web ML, consultez le cours vidéo Google Developers Machine Learning for Web Developers. Le cours vous montre comment utiliser TensorFlow.js dans vos sites Web et applications.

Accéder au cours Web ML

Coder des programmes ML sans traiter directement avec les tenseurs

Si vous souhaitez vous lancer dans l'apprentissage automatique sans gérer les optimiseurs ni la manipulation des tenseurs, consultez la bibliothèque ml5.js.

Construite sur TensorFlow.js, la bibliothèque ml5.js donne accès aux algorithmes et modèles d'apprentissage automatique dans le navigateur Web avec une API concise et accessible.

Découvrez ml5.js

Installer TensorFlow.js

Découvrez comment installer TensorFlow.js pour une implémentation dans le navigateur Web ou Node.js.

Installer TensorFlow.js

Convertir des modèles pré-entraînés en TensorFlow.js

Découvrez comment convertir des modèles pré-entraînés de Python vers TensorFlow.js.

Modèle Keras Modèle GraphDef

Apprendre du code TensorFlow.js existant

Le référentiel tfjs-examples fournit de petits exemples d'implémentations pour diverses tâches de ML utilisant TensorFlow.js.

Voir les exemples tfjs sur GitHub

Visualisez le comportement de votre modèle TensorFlow.js

tfjs-vis est une petite bibliothèque de visualisation dans le navigateur Web destinée à être utilisée avec TensorFlow.js.

Voir tfjs-vis sur GitHub Voir la démo

Préparer les données pour le traitement avec TensorFlow.js

TensorFlow.js prend en charge le traitement des données à l'aide des meilleures pratiques de ML.

Afficher la documentation

,

TensorFlow.js est une bibliothèque JavaScript permettant de former et de déployer des modèles d'apprentissage automatique dans le navigateur Web et dans Node.js. Ce didacticiel vous montre comment démarrer avec TensorFlow.js en entraînant un modèle minimal dans le navigateur et en utilisant le modèle pour effectuer une prédiction.

L'exemple de code est disponible sur GitHub .

Conditions préalables

Pour terminer ce didacticiel, vous devez installer les éléments suivants dans votre environnement de développement :

Installer l'exemple

Récupérez le code source et installez les dépendances :

  1. Clonez ou téléchargez le référentiel tfjs-examples .
  2. Accédez au répertoire getting-started : cd tfjs-examples/getting-started .
  3. Installer les dépendances : yarn install .

Si vous regardez le fichier package.json , vous remarquerez peut-être que TensorFlow.js n'est pas une dépendance. En effet, l'exemple charge TensorFlow.js à partir d'un CDN. Voici le code HTML complet de index.html :

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
  </head>
  <body>
    <h4>Tiny TFJS example<hr/></h4>
    <div id="micro-out-div">Training...</div>
    <script src="./index.js"> </script>
  </body>
</html>

L'élément <script> dans l'en-tête charge la bibliothèque TensorFlow.js et l'élément <script> à la fin du corps charge le script d'apprentissage automatique.

Pour d'autres façons de créer une dépendance sur TensorFlow.js, consultez le didacticiel de configuration .

Exécutez l'exemple

Exécutez l'exemple et consultez les résultats :

  1. Dans le répertoire tfjs-examples/getting-started , exécutez yarn watch .
  2. Accédez à http://127.0.0.1:1234 dans votre navigateur.

Vous devriez voir un titre de page et en dessous un numéro tel que 38.31612014770508 . Le nombre exact variera, mais il devrait être proche de 39.

Qu'est-ce qui vient de se passer?

Lorsque index.js est chargé, il entraîne un modèle tf.sequential en utilisant des valeurs $ x $ et $ y $ qui satisfont l'équation $ y = 2x - 1 $.

// Create a simple model.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// Generate some synthetic data for training. (y = 2x - 1)
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

// Train the model using the data.
await model.fit(xs, ys, {epochs: 250});

Ensuite, il prédit une valeur $ y $ pour la valeur $ x $ invisible 20 et met à jour le DOM pour afficher la prédiction.

// Use the model to do inference on a data point the model hasn't seen.
// Should print approximately 39.
document.getElementById('micro-out-div').innerText =
    model.predict(tf.tensor2d([20], [1, 1])).dataSync();

Le résultat de 2 $ * 20 - 1 $ est 39, donc la valeur $ y $ prévue devrait être d'environ 39.

Et après

Ce didacticiel a fourni un exemple minimal d'utilisation de TensorFlow.js pour entraîner un modèle dans le navigateur. Pour une introduction plus approfondie aux modèles d'entraînement avec JavaScript, consultez le guide TensorFlow.js .

Plus de façons de commencer

Voici d'autres façons de démarrer avec TensorFlow.js et Web ML.

Regarder le cours Web ML TensorFlow.js

Si vous êtes un développeur Web à la recherche d'une introduction pratique au Web ML, consultez le cours vidéo Google Developers Machine Learning for Web Developers. Le cours vous montre comment utiliser TensorFlow.js dans vos sites Web et applications.

Accéder au cours Web ML

Coder des programmes ML sans traiter directement avec les tenseurs

Si vous souhaitez vous lancer dans l'apprentissage automatique sans gérer les optimiseurs ni la manipulation des tenseurs, consultez la bibliothèque ml5.js.

Construite sur TensorFlow.js, la bibliothèque ml5.js donne accès aux algorithmes et modèles d'apprentissage automatique dans le navigateur Web avec une API concise et accessible.

Découvrez ml5.js

Installer TensorFlow.js

Découvrez comment installer TensorFlow.js pour une implémentation dans le navigateur Web ou Node.js.

Installer TensorFlow.js

Convertir des modèles pré-entraînés en TensorFlow.js

Découvrez comment convertir des modèles pré-entraînés de Python vers TensorFlow.js.

Modèle Keras Modèle GraphDef

Apprendre du code TensorFlow.js existant

Le référentiel tfjs-examples fournit de petits exemples d'implémentations pour diverses tâches de ML utilisant TensorFlow.js.

Voir les exemples tfjs sur GitHub

Visualisez le comportement de votre modèle TensorFlow.js

tfjs-vis est une petite bibliothèque de visualisation dans le navigateur Web destinée à être utilisée avec TensorFlow.js.

Voir tfjs-vis sur GitHub Voir la démo

Préparer les données pour le traitement avec TensorFlow.js

TensorFlow.js prend en charge le traitement des données à l'aide des meilleures pratiques de ML.

Afficher la documentation