Blog ENI : Toute la veille numérique !
🎁 Jusqu'au 25/12 : 1 commande de contenus en ligne
= 1 chance de gagner un cadeau*. Cliquez ici
🎁 Jusqu'au 31/12, recevez notre
offre d'abonnement à la Bibliothèque Numérique. Cliquez ici
  1. Livres et vidéos
  2. Apprendre à développer avec JavaScript
  3. Mise en œuvre de la librairie TensorFlow.js
Extrait - Apprendre à développer avec JavaScript Des bases à l'utilisation de frameworks (5e édition)
Extraits du livre
Apprendre à développer avec JavaScript Des bases à l'utilisation de frameworks (5e édition) Revenir à la page d'achat du livre

Mise en œuvre de la librairie TensorFlow.js

Algorithme de classification automatique

Dans ce chapitre, nous allons mettre en œuvre une application de classification automatique. Rappelons en quoi consiste cet algorithme (source Wikipédia) : « Le classement automatique ou classification supervisée est la catégorisation algorithmique d’objets. Elle consiste à attribuer une classe ou catégorie à chaque objet (ou individu) à classer, en se fondant sur des données statistiques. Elle fait couramment appel à l’apprentissage automatique et est largement utilisée en reconnaissance de formes. »

Dans l’exemple, nous allons considérer un jeu de données déjà rencontré dans le chapitre précédent, le dataset de Fisher, décrivant les caractéristiques de fleurs (Iris), et ceci dans sa version complète :

  • 150 observations (Iris) ;

  • chaque fleur étant caractérisée par la longueur et la largeur de son sépale et par la longueur et la largeur de son pétale.

Après une phase d’entraînement propre à l’algorithme de classification proposé par Google (librairie TensorFlow.js), il sera demandé à l’utilisateur de l’application de saisir les quatre caractéristiques :

  • longueur du sépale ;

  • largeur du sépale ;...

Application « eni_classification_iris.html »

Regardons tout de suite l’interface de l’application JavaScript, essentiellement basée sur la librairie Plotly.js pour la représentation :

  • du graphique en nuage de points pour les longueurs et largeurs de sépales (premier graphique) ;

  • du graphique en nuage de points pour les longueurs et largeurs de pétales (second graphique).

  • et sur la librairie TensorFlow.js développée par Google et qui sert, dans notre cas, à réaliser l’opération de classification.

TensorFlow existe également en environnement Python et est l’une des librairies les plus utilisées dans le domaine du Machine Learning.

Cela donne cet affichage :

images/08RI07N.png
images/08RI08N.png
images/08RI09N.png

Vous pouvez constater que pour les sépales (premier graphique) et pour les pétales (deuxième graphique), il y a clairement un regroupement par espèces. Ce regroupement est quasiment parfait pour les pétales. Pour les sépales, il y a ambiguïté entre les espèces « Versicolor » et « Virginica ». Il est toutefois optimiste de penser qu’en combinant les quatre caractéristiques la prédiction devrait être plus fiable. Dans l’exemple présenté ci-avant, la prise de risque a été faible car les valeurs :

  • longueur du sépale : 5,

  • largeur du sépale : 3.5,

  • longueur du pétale : 1.5,

  • largeur du pétale : 0.3.

auraient permis à un « botaniste amateur » de ranger la fleur dans la bonne catégorie (espèce « Setosa »).

Passons maintenant au code de cette application bien plus ambitieuse que celles vues dans le chapitre Mise en œuvre de la librairie Math.js.

1.   <!DOCTYPE html>  
2.      
3.   <html lang="fr">  
4.     
5.     <!--  
6.       Nom du script : eni_classification_iris.html  
7.       Auteur : Christian VIGOUROUX - ENI Editions  
8.       Date de création : 27/02/2024  
9.       Date de dernière modification : 27/02/2024  
10.     Objet : Classification automatique sur le dataset Iris  
11.   -->  
12.   
13.   <!-- En-tête de la page -->  
14.   <head>  
15.       
16.     <!-- Balises meta -->  
17.     <meta charset="UTF-8">  
18.       
19.     <!-- Titre de l'onglet dans le navigateur -->  
20.     <title>Classification sur dataset Iris (TensorFlow.js)</title> 
21.         
22.     <!-- Styles CSS -->  
23.     <style>  
24.    
25.       body {  
26.         font-family: Arial, sans-serif;  
27.         margin: 0;  
28.         padding: 0;  
29.  ...