Mise en œuvre de la librairie Math.js

Introduction

L’enjeu est de positionner les librairies JavaScript (frameworks) dans le monde de l’Intelligence Artificielle.

Bien que les librairies et les frameworks, tout du moins les plus populaires, soient majoritairement codés en langage Python, JavaScript tire largement son épingle du jeu avec la disponibilité d’outils équivalents, issus de portage depuis Python.

Il ne peut être question dans cette partie du livre d’étudier en détail les très nombreux outils JavaScript dans ce domaine en expansion fulgurante, et encore moins les très nombreuses méthodes disponibles en Intelligence Artificielle (Machine Learning et Deep Learning). L’enjeu est uniquement de vous montrer que JavaScript, au travers de ses librairies orientées IA, constitue une alternative probante à Python ou encore à R.

Application « eni_mathjs_01.html » - Statistiques basiques sur une matrice 3*3

L’objectif de l’application présentée consiste à effectuer des calculs simples sur une matrice carrée (3 lignes - 3 colonnes) avec les données stockées dans le code JavaScript lui-même. Ce sera essentiellement l’occasion de voir comment appeler la librairie Math.js. Dans notre cas, elle n’a pas été téléchargée, elle sera utilisée dans sa version en ligne disponible à l’adresse https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.7.0/math.js.

La documentation de la librairie Math.js est disponible à l’adresse https://mathjs.org/. Elle est de qualité et un éditeur en ligne permet de tester les différents exemples proposés.

Passons à notre exemple avec une matrice 3*3 ayant le contenu suivant :

[1, 2, 3]
[4, 5, 6]
[7, 8, 9]

L’objectif sera essentiellement de sommer les éléments de cette matrice, d’en faire la moyenne et de doubler les éléments (restitution sous forme d’une matrice 1D).

Présentons dans un premier temps l’exécution de l’application via une capture d’écran :

Consultons le code source du script « eni_mathjs_01.html » :

1.   <!DOCTYPE html>  
2.     
3.   <html lang="fr">  
4.      
5.     <!--  
6.       Nom du script : eni_mathjs_01.html  
7.       Auteur : Christian VIGOUROUX - ENI Editions  
8.       Date de création : 21/05/2024  
9.       Date de dernière modification : 21/05/2024  
10.     Objet : Statistiques basiques sur une matrice 3*3  
11.   -->  
12.    
13.   <!-- En-tête de la page -->  
14.   <head>  
15.           
16.     <!--...

Application « eni_mathjs_02.html » - Statistiques Iris (échantillon partiel)

Le jeu de données Iris est certainement l’un des plus utilisés comme support dans les très nombreux tutoriels ou blogs en Intelligence Artificielle, notamment basés sur le langage Python. Ce langage est incontestablement le plus utilisé dans ce domaine, même si JavaScript constitue un challenger à Python tout à fait intéressant du fait du portage de librairies Python en JavaScript.

Fixons-nous un objectif très simple dans la présente application JavaScript, celui d’explorer le jeu de données (on parle aussi de dataset) « Iris ».

Rappelons en quelques mots de quoi est constitué ce jeu de données (source Wikipédia) : « Le jeu de données Iris connu aussi sous le nom de Iris de Fisher est un jeu de données multivariées présenté en 1936 par Ronald Fisher dans un papier de recherche avec une application de l’analyse discriminante linéaire. Les données ont été collectées afin de quantifier les variations de morphologie des fleurs d’iris de trois espèces. Le jeu de données comprend 50 échantillons de chacune des trois espèces d’iris (Iris setosa, Iris virginica et Iris versicolor). Quatre caractéristiques ont été mesurées à partir de chaque échantillon : la longueur et la largeur des sépales et des pétales, en centimètres. Sur la base de la combinaison de ces quatre variables, Fisher a élaboré un modèle d’analyse discriminante linéaire permettant de distinguer les espèces les unes des autres. »

Le dataset « Iris » est largement documenté sur Internet, pour en savoir plus, rendez-vous à l’adresse https://fr.wikipedia.org/wiki/Iris_de_Fisher.

Pour notre première application sur le dataset Iris, faisons un petit rappel de botanique sur les iris avec la photo ci-dessous représentant les trois espèces d’Iris :

Commençons par présenter l’exécution de l’application par une capture d’écran (affichage partiel) :

Étudions en détail le code source (« eni_mathjs_02.html ») :

1.   <!DOCTYPE html>  
2.  
3.   <html lang="fr">  
4.  
5.     <!--  
6.       Nom du script : eni_mathjs_02.html  
7.       Auteur : Christian VIGOUROUX - ENI Editions  
8.       Date de création : 21/05/2024  
9.       Date de dernière modification : 21/05/2024  
10.     Objet : Statistiques basiques le jeu de données Iris (échantillon partiel) 
11.   -->  
12.   
13.   <!-- En-tête de la page -->  
14.   <head>  
15.   
16.     <!-- Balises meta -->  
17.     <meta charset="UTF-8">  ...

Application « eni_mathjs_03.html » - Statistiques Iris (échantillon complet)

La troisième application est aussi basée sur le jeu de données Iris. Les données seront traitées cette fois-ci en totalité (150 observations) et le jeu de données sera récupéré depuis Internet.

Voici ce que donne l’exécution de l’application au travers d’une recopie d’écran (affichage partiel) :

Bien que le script présente bien évidemment de grandes similitudes avec le précédent (« eni_mathjs_02.html »), il est reproduit intégralement ci-après :

1.   <!DOCTYPE html>  
2.     
3.   <html lang="fr">  
4.     
5.     <!--  
6.       Nom du script : eni_mathjs_03.html  
7.       Auteur : Christian VIGOUROUX - ENI Editions  
8.       Date de création : 21/05/2024  
9.       Date de dernière modification : 21/05/2024  
10.     Objet : Statistiques basiques le jeu de données Iris (échantillon complet) 
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>Math.js - Exemple 03</title>  
21.   
22.   <!-- Feuille de styles CSS-->  
23.   <style>  
24.   
25.       /* Marge d'affichage des espèces de fleurs */  
26.       .especes {  
27.         margin-bottom: 40px;  
28.         margin-left: 40px;  
29.       }  
30.   
31.       /* Marge d'affichage des statistiques des espèces de fleurs */ 
32.       .caracteristiques {  
33.         margin-left: 40px;  
34.       }  
35.   
36.     </style>  
37.   
38.   </head>  
39.   
40.   <!-- Corps de la page -->  
41.   <body>  
42.   
43.     <!-- Affichage en police de caractères Arial -->  
44.     <font face="Arial">  
45.   
46.     <!-- Titre du traitement -->  
47.     <h1>Math.js - Exemple 03 - Statistiques Iris (échantillon complet)</h1> 
48.   
49.     <!-- Division d'affichage des résultats -->  
50.     <div id="resultats">  
51.       <!-- Les résultats seront affichés ici -->  
52.     </div>  
53.   ...

Application « eni_mathjs_04.html » - Régression linéaire Iris (échantillon partiel)

Notre dernière application utilisant Math.js va montrer le potentiel de cette librairie dans le domaine de statistiques. L’objectif va être de déterminer les paramètres d’une droite de régression linéaire sur un sous-ensemble du jeu de données Iris que nous avons déjà utilisé dans ce chapitre.

Source Wikipédia : « En statistiques, en économétrie et en apprentissage automatique, un modèle de régression linéaire est un modèle de régression qui cherche à établir une relation linéaire entre une variable, dite expliquée, et une ou plusieurs variables, dites explicatives. »

Vous trouverez l’article complet décrivant l’histoire de cette méthode et accessoirement son mode de calcul à l’adresse https://fr.wikipedia.org/wiki/R%C3%A9gression_lin%C3%A9aire.

Notre quatrième application est basée sur un petit échantillon (six observations) identique à celui utilisé dans le script « eni_mathjs_02.html ».

Commençons par nous représenter ce que fait l’application en consultant le compte rendu d’exécution.

Nous découvrons les deux paramètres de la régression linéaire : la pente (0.3313) et l’intercept (4.6413). L’équation de la droite de régression est donc : y = 0.3313 x + 4.6413.

Le script propose aussi que l’on puisse saisir une valeur de longueur de pétale pour approximer par la droite de régression linéaire la valeur de la longueur du sépale. Pour une valeur de 5 de la longueur du pétale, la valeur pour la longueur du sépale est de la prédiction de 6.3.

Les données du dataset sont aussi affichées (six observations uniquement).

L’exécution du script se termine par l’affichage d’un nuage de points accompagné de la représentation de la droite de régression linéaire.

Un point d’attention important toutefois : nous avons estimé dans notre analyse que la longueur du sépale était dépendante de la longueur du pétale des fleurs Iris. C’est bien évidemment un parti pris car nous ne sommes pas botanistes.

Rappelons que le dataset Iris de Fisher est souvent utilisé pour des tâches de classification. Il contient des mesures de longueur et de largeur des sépales et des pétales de trois espèces d’iris. Pour déterminer la relation entre la longueur du sépale et celle du pétale, on peut effectuer une analyse exploratoire des données ou une analyse de corrélation.

En général, on peut s’attendre à une certaine corrélation entre les mesures des différentes parties de la fleur. Cependant, cela ne signifie pas nécessairement qu’il y a une relation de dépendance causale entre elles.

Pour répondre plus précisément à cette question, il faudrait analyser les données pour voir s’il existe une corrélation...