Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.

L'apprentissage automatique est une technologie fondamentale dans le monde moderne. Les ordinateurs peuvent apprendre à reconnaître des images, à créer des illustrations et même à écrire leur propre code, le tout avec une intervention humaine minimale.

Mais comment fonctionne l'apprentissage automatique et comment pouvez-vous l'utiliser vous-même ?

Qu'est-ce que l'apprentissage automatique ?

L'apprentissage automatique est un concept relativement simple. Les systèmes informatiques peuvent apprendre et s'adapter en analysant les modèles de données existants à partir de pools d'informations. Cela se fait généralement sans instructions explicites de la part des humains.

Un bon exemple se présente sous la forme d'outils d'assistant virtuel. Siri, Cortana et Google Assistant utilisent tous largement l'apprentissage automatique pour comprendre la parole humaine. Cela commence par un pool d'enregistrements audio existants, mais ces outils peuvent également apprendre des interactions qu'ils ont avec vous. Cela leur permet de s'améliorer par eux-mêmes.

instagram viewer

Qu'est-ce que ml5.js ?

La plupart des algorithmes et outils d'apprentissage automatique utilisent R ou Python pour leur code, mais ml5.js est différent. Agissant comme une interface pour la bibliothèque Tensorflow.js de Google, ml5.js est un projet open source qui met l'apprentissage automatique entre les mains des développeurs JavaScript.

Vous pouvez commencer à utiliser ml5.js pour votre propre application Web en incluant un seul script externe dans votre code HTML.

Premiers pas avec l'apprentissage automatique: le processus d'apprentissage

La formation d'un algorithme d'apprentissage automatique prend du temps. Les ordinateurs apprennent beaucoup plus vite que les humains, mais ils apprennent aussi de différentes manières. Heureusement, cependant, ml5.js est livré avec une sélection de modèles pré-formés afin que vous puissiez ignorer cette étape.

Apprentissage comment les algorithmes d'apprentissage automatique s'entraînent est un excellent moyen de mieux comprendre des outils comme celui-ci.

ml5.js facilite la création d'un outil de classification d'images à exécuter sur votre site Web. La page HTML de cet exemple contient un champ de saisie de fichier pour sélectionner une image. Les images téléchargées s'affichent dans un élément HTML préparé pour permettre à ml5.js de les analyser et de les identifier.

Étape 1: Inclure la bibliothèque ml5.js

Ce projet nécessite deux bibliothèques pour fonctionner: ml5.js et p5.js. ml5.js est la bibliothèque d'apprentissage automatique, tandis que p5.js permet de travailler correctement avec des images. Vous avez besoin de deux lignes de code HTML pour ajouter ces bibliothèques :

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Étape 2: Créer des éléments HTML

Ensuite, il est temps de créer des éléments HTML. Le plus important est un div avec un ID et une classe intitulée imageResult qui stockera le résultat final :

<h1>Classificateur d'images MakeUseOf</h1>

<h2>Cliquez sur "Choisir le fichier" ajouter une image</h2>

<classe div="imageRésultat" identifiant="imageRésultat"></div>

Ensuite, ajoutez un élément d'entrée de fichier pour collecter l'image à classer par le programme.

<classe div="imageInput">
<type d'entrée="déposer"
en entrée="uploadedImage.src=fenêtre. URL.createObjectURL(this.files[0]); startImageScan()">
</div>

L'entrée écoute un événement oninput et exécute deux instructions en réponse, séparées par un point-virgule. Le premier crée une URL d'objet pour l'image, ce qui vous permet de travailler avec les données sans avoir à les télécharger sur un serveur. La seconde appelle une fonction startImageScan() que vous allez créer à l'étape suivante.

Enfin, ajoutez un élément img pour afficher l'image que l'utilisateur a téléchargé :

<classe img="image téléchargée" identifiant="image téléchargée" />

Étape 3: créer une fonction JS de numérisation d'images

Maintenant que vous avez du HTML, il est temps d'ajouter du JS au mélange. Commencez par ajouter une variable const pour stocker l'élément imageResult que vous avez créé à la dernière étape.

constante élément = document.getElementById("imageResult");

Ensuite, ajoutez une fonction appelée startImageScan() et, à l'intérieur de celle-ci, initialisez le classificateur d'images ml5.js à l'aide de MobileNet.

Suivez ceci avec la commande classifier.classify. Transmettez-lui une référence à l'élément uploadedImage que vous avez ajouté précédemment, ainsi qu'une fonction de rappel pour traiter le résultat.

fonctionstartImageScan() {
// Créer un variablepour initialiser le classificateur d'images ml5.js avec MobileNet
classificateur const = ml5.imageClassifier('MobileNet');
classifier.classifier (document.getElementById("image téléchargée"), imageScanResult);
élément.innerHTML = "...";
}

Étape 4: créer une fonction d'affichage des résultats

Vous avez également besoin d'une fonction pour afficher les résultats de la classification d'images que vous avez effectuée. Cette fonction contient une simple instruction if pour vérifier les éventuelles erreurs.

fonctionimageScanResult(erreur, résultats) {
si (erreur) {
élément.innerHTML = erreur ;
} autre {
laisser nombre = résultats[0].confiance * 100;
élément.innerHTML = résultats[0].étiquette + "<Br>Confiance: " + num.toFixed (0) + "%";
}
}

Étape 5: Rassemblez le tout

Enfin, il est temps de rassembler tout ce code. Il est important d'être conscient de la

,