L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Apprentissage automatique pour les développeurs frontend avec Tensorflow.js
L’apprentissage automatique a souvent l’apparence qu’il appartient au domaine des scientifiques de données et des développeurs Python . Toutefois, au cours des deux dernières années, des frameworks open-source ont été créés pour le rendre plus accessible dans différents langages de programmation, y compris JavaScript. Dans cet article, nous utiliserons Tensorflow.js pour explorer les différentes possibilités d'utilisation de l'apprentissage automatique dans le navigateur au moyen de quelques exemples de projets.
Qu'est-ce que l'apprentissage automatique?
Avant de commencer à plonger dans du code, parlons brièvement. sur l'apprentissage automatique, ainsi que sur certains concepts et terminologies de base.
Définition
Selon une définition courante, il s'agit de la capacité des ordinateurs à apprendre des données sans être explicitement programmés.
Si nous la comparons aux méthodes traditionnelles la programmation, cela signifie que nous laissons les ordinateurs identifier les structures dans les données et générer des prévisions sans avoir à leur dire exactement ce qu’il faut rechercher.
Prenons l’exemple de la détection de la fraude. Il n'y a pas de critère défini pour savoir ce qui rend une transaction frauduleuse ou non; Les fraudes peuvent être exécutées dans n’importe quel pays, sur n’importe quel compte, en ciblant n’importe quel client, à tout moment, etc. Il serait pratiquement impossible de suivre tout cela manuellement.
Toutefois, en utilisant les données précédentes relatives aux dépenses frauduleuses collectées au fil des années, nous pouvons former un algorithme d'apprentissage automatique afin de comprendre les modèles dans ces données afin de générer un modèle pouvant être utilisé. étant donné toute nouvelle transaction et prédire la probabilité qu'il s'agisse d'une fraude ou non, sans lui dire exactement ce qu'il faut rechercher.
Concepts de base
Pour comprendre les exemples de code suivants, nous devons d'abord aborder quelques termes courants. 19659014] Modèle
Lorsque vous formez un algorithme d'apprentissage automatique avec un jeu de données, le modèle est le résultat de ce processus d'apprentissage. C'est un peu comme une fonction qui prend de nouvelles données en entrée et produit une prédiction en sortie.
Étiquettes et fonctionnalités
Les étiquettes et les fonctionnalités concernent les données que vous alimentez un algorithme dans le processus de formation.
Une étiquette représente la manière dont vous classeriez chaque entrée de votre jeu de données et comment vous la nommeriez. Par exemple, si notre ensemble de données était un fichier CSV décrivant différents animaux, nos étiquettes pourraient être des mots tels que «chat», «chien» ou «serpent» (selon ce que chaque animal représente).
Les caractéristiques, par contre, sont les caractéristiques de chaque entrée de votre jeu de données. Pour nos animaux, par exemple, il pourrait s'agir de choses comme «moustaches, miaous», «ludiques, aboiements», «reptiles, rampants», etc.
En utilisant cela, un algorithme d'apprentissage automatique pourra trouver une corrélation.
Réseaux de neurones
Les réseaux de neurones sont un ensemble d’algorithmes d’apprentissage automatique qui tentent de reproduire le fonctionnement du cerveau en utilisant des couches de neurones artificiels.
Nous n’avons pas besoin d’expliquer leur fonctionnement dans cet article, mais si vous souhaitez en savoir plus, voici une très bonne vidéo:
Maintenant que nous avons défini quelques termes couramment utilisés dans l’apprentissage automatique, Parlons de ce qui peut être fait avec JavaScript et le framework Tensorflow.js.
Fonctionnalités
Trois fonctionnalités sont actuellement disponibles:
- Utilisation d'un modèle pré-formé
- Transfert de l'apprentissage ,
- Définition, exécution et utilisation de votre propre modèle .
Commençons par le plus simple.
1. Utilisation d'un modèle pré-formé
Selon le problème que vous essayez de résoudre, il peut exister un modèle déjà formé avec un jeu de données spécifique et dans un but spécifique que vous pouvez exploiter et importer dans votre code.
Par exemple, disons que nous construisons un site Web pour prédire si une image est une image d'un chat. Un modèle de classification d'image populaire s'appelle MobileNet et est disponible sous forme de modèle pré-entraîné avec Tensorflow.js
. Le code correspondant à ceci ressemblerait à ceci:
Détection de chat
Nous commençons par importer Tensorflow.js et le modèle MobileNet dans l'en-tête de notre HTML:
Ensuite, à l'intérieur du corps, nous avons un élément d'image qui sera utilisé pour les prédictions:
![cat fixing [19659041] Et enfin, à l'intérieur de la balise <code> script </code>nous avons le code JavaScript qui charge le modèle MobileNet pré-formé et classe l'image trouvée dans la balise <code> image </code>. Il retourne un tableau de 3 prédictions classées par score de probabilité (le premier élément étant la meilleure prédiction). </p><pre><code class=]()
const PredImage = async () => {
console.log ("Chargement du modèle ...");
modèle const = wait mobilenet.load ();
console.log ("Le modèle est chargé!")
prédictions const = wait model.classify (img);
console.log ('Prévisions:', prévisions);
}
predictImage (); Et c’est tout! C'est ainsi que vous pouvez utiliser un modèle pré-formé dans le navigateur avec Tensorflow.js!
Note : Si vous souhaitez consulter les autres éléments que le modèle MobileNet peut classer, vous pouvez trouver une liste des différentes classes disponibles sur Github
Il est important de savoir que le chargement d'un modèle pré-entraîné dans le navigateur peut prendre un certain temps (parfois jusqu'à 10 secondes). donc vous voudrez probablement précharger ou adapter votre interface afin que les utilisateurs ne soient pas impactés.
Si vous préférez utiliser Tensorflow.js en tant que module NPM, vous pouvez le faire en important le module de la manière suivante:
import * comme mobilenet de '@ tensorflow-models / mobilenet'; N'hésitez pas à jouer avec cet exemple dans CodeSandbox .
Maintenant que nous avons vu comment utiliser un modèle pré-formé, regardons la deuxième fonctionnalité disponible: l'apprentissage par transfert.
2. Transfert d'apprentissage
Le transfert d'apprentissage correspond à la capacité de combiner un modèle pré-formé avec des données de formation personnalisées. Cela signifie que vous pouvez exploiter les fonctionnalités d'un modèle et ajouter vos propres échantillons sans avoir à tout créer à partir de rien.
Par exemple, un algorithme a été formé avec des milliers d'images pour créer un modèle de classification d'images. de créer votre propre apprentissage par transfert vous permet de combiner de nouveaux échantillons d’image personnalisés avec le modèle pré-formé pour créer un nouveau classificateur d’image. Cette fonctionnalité rend très rapide et facile l’utilisation d’un classificateur plus personnalisé.
Pour donner un exemple de ce que cela ressemblerait dans le code, modifions notre exemple précédent et modifions-le afin de pouvoir classer les nouvelles images.
Note : Le résultat final est l'expérience ci-dessous que vous pouvez essayer de vivre ici .
Vous trouverez ci-dessous quelques exemples de code représentant la partie la plus importante de cette configuration, mais si vous avez besoin de consulter l'intégralité du code, vous pouvez le trouver dans CodeSandbox . [19659009] Nous devons toujours commencer par importer Tensorflow.js et MobileNet, mais cette fois-ci, nous devons également ajouter un classificateur KNN (k plus proche voisin):
La raison pour laquelle nous avons besoin d’un classificateur est parce que (au lieu d’utiliser uniquement Module MobileNet), nous ajoutons des échantillons personnalisés qu’il n’a jamais vus auparavant. Le classificateur KNN nous permettra donc de tout combiner. et exécuter des prédictions sur les données combinées.
Ensuite, nous pouvons remplacer l’image du chat par une balise video pour utiliser les images du flux de la caméra.
Enfin, nous devrons ajouter quelques boutons sur la page que nous utiliserons comme étiquettes pour enregistrer des échantillons vidéo et commencer les prédictions.
Passons maintenant au fichier JavaScript dans lequel nous allons commencer par définir quelques variables importantes:
// Nombre de classes à classer
const NUM_CLASSES = 2;
// Labels pour nos cours
classes const = ["Left", "Right"];
// Taille de l'image de la webcam. Doit être 227.
const IMAGE_SIZE = 227;
// valeur K pour KNN
const TOPK = 10;
const video = document.getElementById ("webcam"); Dans cet exemple particulier, nous voulons pouvoir classer l'entrée de la webcam entre notre tête inclinée à gauche ou à droite; nous avons donc besoin de deux classes intitulées left et right .
La taille d'image définie sur 227 est la taille de l'élément vidéo en pixels. Selon les exemples de Tensorflow.js, cette valeur doit être définie sur 227 pour correspondre au format des données avec lesquelles le modèle MobileNet a été formé. Pour que nos nouvelles données puissent être classées, ces dernières doivent respecter le même format.
Si vous avez vraiment besoin que la taille soit plus grande, il est possible, mais vous devrez transformer et redimensionner les données avant de les envoyer au Classificateur KNN.
Ensuite, nous définissons la valeur de K sur 10. La valeur K de l'algorithme KNN est importante car elle représente le nombre d'instances que nous prenons en compte lors de la détermination de la classe de notre nouvelle entrée. 19659009] Dans ce cas, la valeur de 10 signifie que, lors de la prédiction de l'étiquette de nouvelles données, nous examinerons les 10 voisins les plus proches à partir des données d'apprentissage afin de déterminer comment classer notre nouvelle entrée.
Enfin, nous ' obtenir l’élément video . Pour la logique, commençons par charger le modèle et le classificateur:
async load () {
const knn = knnClassifier.create ();
const mobilenetModule = wait mobilenet.load ();
console.log ("modèle chargé");
} Ensuite, accédons au flux vidéo:
navigator.mediaDevices
.getUserMedia ({video: true, audio: false})
.then (stream => {
video.srcObject = stream;
video.width = IMAGE_SIZE;
video.height = IMAGE_SIZE;
Après cela, configurons quelques événements de bouton pour enregistrer nos données exemple:
setupButtonEvents () {
pour (soit i = 0; i {
this.training = i;
this.recordSamples = true;
};
bouton.onmouseup = () => (this.training = -1);
}
} Écrivons notre fonction qui prend les échantillons d’images de webcam, les reformate et les combine avec le module MobileNet:
// Récupère les données d’image de l’élément video
const image = tf.browser.fromPixels (video);
laisser logits;
// 'conv_preds' est l'activation logit de MobileNet.
const infer = () => this.mobilenetModule.infer (image, "conv_preds");
// classe la classe si l'un des boutons est maintenu enfoncé
if (this.training! = -1) {
logits = infer ();
// Ajouter l'image actuelle au classificateur
this.knn.addExample (logits, this.training);
} Enfin, une fois que nous avons rassemblé des images de webcam, nous pouvons tester nos prévisions avec le code suivant:
logits = infer ();
const res = wait this.knn.predictClass (logits, TOPK);
const prediction = classes [res.classIndex]; Enfin, vous pouvez disposer des données de la webcam car vous n'en avez plus besoin:
// Supprimez l'image lorsque vous avez terminé.
image.dispose ();
if (logits! = null) {
logits.dispose ();
} Une fois encore, si vous souhaitez consulter le code complet, vous pouvez le trouver dans la CodeSandbox mentionnée précédemment.
3. Formation d'un modèle dans le navigateur
La dernière fonction consiste à définir, former et exécuter un modèle entièrement dans le navigateur. Pour illustrer cela, nous allons construire l'exemple classique de reconnaissance d'Iris.
Pour cela, nous allons créer un réseau de neurones pouvant classer les Iris en trois catégories: Setosa, Virginica et Versicolor. source de données.
Avant de commencer, voici un lien vers la démonstration en direct et voici la CodeSandbox si vous voulez jouer avec le code complet.
de chaque projet d’apprentissage automatique est un jeu de données. Une des premières tâches à entreprendre consiste à scinder cet ensemble de données en un ensemble de formation et un ensemble de test.
La raison en est que nous allons utiliser notre ensemble de formation pour former notre algorithme et notre ensemble de test pour: vérifie l'exactitude de nos prévisions, afin de vérifier si notre modèle est prêt à être utilisé ou doit être modifié.
Note : Pour faciliter les choses, j'ai déjà divisé le kit de formation et testé. ensemble dans deux fichiers JSON que vous pouvez trouver dans le CodeSanbox .
L'ensemble de formation contient 130 éléments et l'ensemble de test 14. Si vous regardez à quoi ressemblent ces données, vous voir quelque chose comme ceci:
{
"sepal_length": 5.1,
"sepal_width": 3.5,
"petal_length": 1.4,
"petal_width": 0,2
"espèce": "setosa"
} Nous pouvons voir quatre caractéristiques différentes pour la longueur et la largeur du sépale et du pétale, ainsi qu'une étiquette pour l'espèce.
Pour pouvoir utiliser cela avec Tensorflow.js, nous devons façonner ces données dans un format que le cadre comprendra, dans ce cas, pour les données de formation, ce sera [130, 4] pour 130 échantillons avec quatre caractéristiques par iris.
import * en tant que trainingSet à partir de "training.json";
importer * comme testSet à partir de "testing.json";
const trainingData = tf.tensor2d (
trainingSet.map (item => [
item.sepal_length,
item.sepal_width,
item.petal_length,
item.petal_width
]),
[130, 4]
)
const testData = tf.tensor2d (
testSet.map (item => [
item.sepal_length,
item.sepal_width,
item.petal_length,
item.petal_width
]),
[14, 4]
Ensuite, nous devons également définir nos données de sortie:
const output = tf.tensor2d (trainingSet.map (item => [
item.species === 'setosa' ? 1 : 0,
item.species === 'virginica' ? 1 : 0,
item.species === 'versicolor' ? 1 : 0
]), [130,3]) Ensuite, une fois notre les données sont prêtes, nous pouvons passer à la création du modèle:
const model = tf.sequential ();
model.add (tf.layers.dense (
{
inputShape: 4,
activation: 'sigmoïde',
unités: 10
}
));
model.add (tf.layers.dense (
{
inputShape: 10,
unités: 3,
activation: 'softmax'
}
));; Dans l'exemple de code ci-dessus, nous commençons par instancier un modèle séquentiel, puis ajoutons une couche d'entrée et une couche de sortie.
Les paramètres que vous pouvez voir utilisés à l'intérieur ( inputShape activation. et unités ) sortent du cadre de cet article car elles peuvent varier en fonction du modèle que vous créez, du type de données utilisé, etc. "
prêt, nous pouvons l'entraîner avec nos données:
async function train_data () {
for (let i = 0; i Si cela fonctionne bien, vous pouvez commencer à remplacer les données de test par des entrées utilisateur personnalisées.
Une fois que nous aurons appelé notre fonction principale, la sortie de la prédiction ressemblera à l'une de ces trois options:
[1,0,0] // Setosa
[0,1,0] // Virginica
[0,0,1] // Versicolor La prédiction renvoie un tableau de trois nombres représentant la probabilité que les données appartiennent à l'une des trois classes. Le nombre le plus proche de 1 est la prédiction la plus élevée.
Par exemple, si le résultat de la classification est [0.0002, 0.9494, 0.0503]le deuxième élément du tableau est le plus élevé, de sorte que le modèle prédit que la nouvelle entrée sera probablement un Virginica.
Et c’est tout pour un réseau de neurones simple dans Tensorflow.js!
Nous n’avons parlé que d’un petit jeu de données sur Iris, mais si vous souhaitez passer à des jeux de données plus grands ou travailler avec des images, les étapes seront les suivantes: idem:
- Collecte des données;
- Fractionnement entre jeu d'apprentissage et de test;
- Reformatage des données pour que Tensorflow puisse le comprendre;
- Choix de votre algorithme;
- Ajustement des données;
Si vous souhaitez enregistrer le modèle créé pour pouvoir le charger dans une autre application et prévoir de nouvelles données, vous pouvez le faire avec la ligne suivante:
wait model.save ('file: /// chemin / vers / mon-modèle '); // in Node.js Note : Pour plus d'options sur la façon de sauvegarder un modèle, consultez cette ressource .
Limites
C'est ça! Nous venons de décrire les trois principales fonctionnalités actuellement disponibles avec Tensorflow.js!
Avant de terminer, je pense qu’il est important de mentionner brièvement certaines des limites de l’apprentissage automatique en front-end.
1. Performances
L'importation d'un modèle pré-formé à partir d'une source externe peut avoir un impact sur les performances de votre application. Certains modèles de détection d'objets, par exemple, font plus de 10 Mo, ce qui ralentira considérablement votre site Web. Veillez à prendre en compte votre expérience utilisateur et à optimiser le chargement de vos actifs pour améliorer les performances perçues.
2. Qualité des données d'entrée
Si vous créez un modèle à partir de rien, vous devrez rassembler vos propres données ou trouver un jeu de données open source.
Avant de procéder à tout type de traitement de données ou d'essayer différents algorithmes, assurez-vous de vérifier la qualité de vos données d'entrée. Par exemple, si vous essayez de créer un modèle d'analyse des sentiments pour reconnaître les émotions dans un texte, assurez-vous que les données que vous utilisez pour former votre modèle sont précises et variées. Si la qualité des données utilisées est faible, le résultat de votre formation sera inutile.
3. Responsabilité
L'utilisation d'un modèle pré-formé à source ouverte peut s'avérer très rapide et sans effort. Cependant, cela signifie également que vous ne savez pas toujours comment il a été généré, en quoi l’ensemble de données est composé, ni même quel algorithme a été utilisé. Certains modèles sont appelés «boîtes noires», ce qui signifie que vous ne savez pas vraiment comment ils ont prédit une sortie donnée.
Selon ce que vous essayez de construire, cela peut poser problème. Par exemple, si vous utilisez un modèle d’apprentissage automatique pour détecter la probabilité d’avoir un cancer sur la base d’images numérisées, en cas de faux négatif (le modèle prédit qu’une personne n’a pas eu le cancer alors qu’elle en souffrait réellement), il ya il pourrait y avoir une réelle responsabilité juridique et vous devrez être en mesure d'expliquer pourquoi le modèle a fait une certaine prédiction.
Résumé
En conclusion, l'utilisation de JavaScript et de cadres tels que Tensorflow.js est un excellent moyen de commencer et d'apprendre. plus sur l'apprentissage machine. Même si une application prête à la production devrait probablement être construite dans un langage tel que Python, JavaScript permet aux développeurs de jouer avec les différentes fonctionnalités et de mieux comprendre les concepts fondamentaux avant de finalement passer à l'investissement et prendre du temps pour en apprendre davantage. langage.
Dans ce didacticiel, nous n’avons traité que de ce qui était possible avec Tensorflow.js, mais l’écosystème d’autres bibliothèques et outils se développe. Des cadres plus spécifiques sont également disponibles, vous permettant d'explorer l'utilisation de l'apprentissage automatique avec d'autres domaines tels que la musique avec Magenta.js ou la prévision de la navigation d'un utilisateur sur un site Web utilisant guess.js ! [19659009] Au fur et à mesure que les outils deviennent plus performants, les possibilités de création d'applications JavaScript propices à l'apprentissage automatique sont de plus en plus excitantes. C'est donc un bon moment pour en apprendre davantage à ce sujet, car la communauté s'efforce de le rendre accessible. .
Ressources supplémentaires
Si vous souhaitez en savoir plus, voici quelques ressources:
Autres cadres et outils
Exemples, modèles et jeux de données
Inspiration
Merci de votre lecture! 19659143] Éditorial éclatant "/> (rb, dm, yk, il)
Source link