1. Avant de commencer
Le machine learning est à la mode actuellement. Ses applications semblent illimitées, et il semble qu'elles s'adressent à presque tous les secteurs dans un avenir proche. Si vous êtes ingénieur ou concepteur, frontend ou backend, et que vous connaissez JavaScript, cet atelier de programmation a été conçu pour vous aider à ajouter le machine learning à vos compétences.
Prérequis
Cet atelier de programmation s'adresse aux ingénieurs expérimentés qui connaissent déjà JavaScript.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez :
- Créez une page Web qui utilise le machine learning directement dans le navigateur Web via TensorFlow.js pour classer et détecter des objets courants (y compris pour plus d'un objet à la fois) à partir d'un flux de webcam en direct.
- Boostez votre webcam standard pour identifier des objets et obtenir les coordonnées du cadre de délimitation pour chaque objet détecté.
- Mettez en surbrillance l'objet trouvé dans le flux vidéo, comme indiqué ci-dessous:
Imaginez être capable de détecter une personne dans une vidéo. Vous pourriez ensuite compter le nombre de personnes présentes à un moment donné pour estimer le niveau d'occupation d'une zone spécifique pendant la journée, ou vous envoyer une alerte lorsque votre chien a été détecté dans une pièce de votre maison pendant votre absence pour lui indiquer qu'il ne devrait peut-être pas se trouver à l'intérieur. Si vous pouviez le faire, vous serez bientôt prêt à créer votre propre Google Nest Cam, capable de vous alerter lorsqu'elle détecte un intrus (quel que soit son type) à l'aide de votre propre matériel personnalisé. Plutôt chouette. Est-ce difficile à faire ? Non. Allons pirater...
Points abordés
- Charger un modèle TensorFlow.js pré-entraîné
- Récupérer des données à partir d'une diffusion en direct avec une webcam et les dessiner sur le canevas
- Classer une image pour trouver le cadre de délimitation de tout objet que le modèle a été entraîné à reconnaître
- Comment utiliser les données renvoyées par le modèle pour mettre en évidence les objets trouvés
Cet atelier de programmation explique comment utiliser les modèles pré-entraînés de TensorFlow.js. Les concepts et les blocs de code qui ne sont pas pertinents pour TensorFlow.js et le machine learning ne sont pas expliqués. Ils vous sont fournis afin que vous puissiez simplement les copier et les coller.
2. Qu'est-ce que TensorFlow.js ?
TensorFlow.js est une bibliothèque de machine learning Open Source qui peut s'exécuter partout où JavaScript peut être exécuté. Il est basé sur la bibliothèque TensorFlow d'origine écrite en Python et vise à recréer cette expérience de développement et cet ensemble d'API pour l'écosystème JavaScript.
Où l'utiliser ?
Étant donné la portabilité de JavaScript, vous pouvez désormais écrire dans un seul langage et exécuter facilement des modèles de machine learning sur l'ensemble des plates-formes suivantes:
- Côté client dans le navigateur Web en utilisant vanilla JavaScript
- Côté serveur et même appareils IoT comme Raspberry Pi avec Node.js
- Applications de bureau avec Electron
- Applications mobiles natives utilisant React Native
TensorFlow.js est également compatible avec plusieurs backends dans chacun de ces environnements (les environnements matériels dans lesquels il peut s'exécuter, tels que le processeur ou WebGL, par exemple). Un "backend" dans ce contexte ne signifie pas qu'il s'agit d'un environnement côté serveur (le backend d'exécution peut par exemple être côté client dans WebGL) pour assurer la compatibilité et garantir un fonctionnement rapide. Actuellement, TensorFlow.js est compatible avec:
- Exécution WebGL sur la carte graphique de l'appareil (GPU) : il s'agit du moyen le plus rapide d'exécuter des modèles plus volumineux (plus de 3 Mo) avec l'accélération du GPU.
- Exécution de Web Assembly (WASM) sur le processeur : permet d'améliorer les performances du processeur sur tous les appareils, y compris les téléphones mobiles d'ancienne génération, par exemple. Cela est mieux adapté aux modèles plus petits (moins de 3 Mo) qui peuvent s'exécuter plus rapidement sur processeur avec WASM qu'avec WebGL en raison de la surcharge de l'importation de contenu sur un processeur graphique.
- Exécution du processeur : le remplacement si aucun des autres environnements n'est disponible. C'est la plus lente des trois, mais elle est toujours là pour vous.
Remarque:Vous pouvez choisir de forcer l'un de ces backends si vous savez sur quel appareil vous allez exécuter l'exécution, ou laisser TensorFlow.js décider à votre place si vous ne le spécifiez pas.
Super-pouvoirs côté client
L'exécution de TensorFlow.js dans un navigateur Web sur la machine cliente peut offrir plusieurs avantages qu'il convient de prendre en compte.
Confidentialité
Vous pouvez à la fois entraîner et classer les données sur la machine cliente sans jamais envoyer de données à un serveur Web tiers. Dans certains cas, il peut être nécessaire de se conformer à des lois locales, telles que le RGPD, ou de traiter des données que l'utilisateur souhaite conserver sur son ordinateur et non envoyées à un tiers.
Vitesse
Comme vous n'avez pas besoin d'envoyer de données à un serveur distant, l'inférence (autrement dit, la classification des données) peut être plus rapide. Qui plus est, vous pouvez accéder directement aux capteurs de l'appareil (appareil photo, micro, GPS, accéléromètre, etc.) si l'utilisateur vous y autorise.
Portée et évolutivité
En un clic, n'importe quel internaute peut cliquer sur un lien que vous lui envoyez, ouvrir la page Web dans son navigateur et utiliser votre création. Pas besoin d'une configuration Linux complexe côté serveur avec des pilotes CUDA et bien plus encore pour utiliser le système de machine learning.
Coût
L'absence de serveur signifie que vous ne payez qu'un CDN pour héberger vos fichiers HTML, CSS et JS, ainsi que vos fichiers de modèle. Le coût d'un CDN est bien moins cher que d'avoir un serveur (éventuellement connecté à une carte graphique) fonctionnant 24h/24, 7j/7.
Fonctionnalités côté serveur
L'implémentation Node.js de TensorFlow.js permet d'activer les fonctionnalités suivantes.
Compatibilité CUDA complète
Côté serveur, pour accélérer l'accélération de la carte graphique, vous devez installer les pilotes NVIDIA CUDA pour permettre à TensorFlow de fonctionner avec la carte graphique (contrairement au navigateur qui utilise WebGL ; aucune installation n'est requise). Cependant, grâce à la prise en charge complète de CUDA, vous pouvez exploiter pleinement les capacités de niveau inférieur de la carte graphique, ce qui accélère les temps d'entraînement et d'inférence. Les performances sont équivalentes à celles de l'implémentation Python de TensorFlow, car elles partagent le même backend C++.
Taille du modèle
Pour les modèles de pointe issus de la recherche, vous travaillez peut-être avec des modèles très volumineux, pouvant atteindre plusieurs gigaoctets. Ces modèles ne peuvent actuellement pas être exécutés dans le navigateur Web en raison des limites d'utilisation de la mémoire par onglet du navigateur. Pour exécuter ces modèles plus volumineux, vous pouvez utiliser Node.js sur votre propre serveur avec les caractéristiques matérielles requises pour exécuter efficacement un tel modèle.
Internet des objets
Node.js est compatible avec les ordinateurs à carte unique courants tels que Raspberry Pi, ce qui signifie que vous pouvez également exécuter des modèles TensorFlow.js sur ces appareils.
Vitesse
Node.js est écrit en JavaScript, ce qui signifie qu'il bénéficie d'une compilation juste à temps. Cela signifie que vous pouvez souvent constater une amélioration des performances lorsque vous utilisez Node.js, car il sera optimisé au moment de l'exécution, en particulier pour les éventuels prétraitements que vous effectuez. Cette étude de cas en est un bon exemple. Elle montre comment Hugging Face a utilisé Node.js pour multiplier par deux les performances de son modèle de traitement du langage naturel.
Vous connaissez désormais les principes de base de TensorFlow.js, ses emplacements d'exécution et certains de ses avantages. Commençons à l'utiliser !
3. Modèles pré-entraînés
TensorFlow.js propose différents modèles de machine learning (ML) pré-entraînés. Ces modèles ont été entraînés par l'équipe TensorFlow.js et intégrés dans une classe facile à utiliser. Ils constituent un excellent moyen de faire vos premiers pas avec le machine learning. Au lieu de créer et d'entraîner un modèle pour résoudre votre problème, vous pouvez importer un modèle pré-entraîné comme point de départ.
Vous trouverez une liste croissante de modèles pré-entraînés faciles à utiliser sur la page Modèles pour JavaScript de TensorFlow.js. Vous pouvez également obtenir des modèles TensorFlow convertis qui fonctionnent dans TensorFlow.js à d'autres endroits, tels que TensorFlow Hub.
Pourquoi utiliser un modèle pré-entraîné ?
S'il correspond au cas d'utilisation souhaité, vous pouvez commencer avec un modèle pré-entraîné populaire. Par exemple:
- Vous n'avez pas besoin de collecter vous-même les données d'entraînement. Il peut être très long et coûteux de préparer les données au bon format et de les étiqueter afin qu'un système de machine learning puisse apprendre à partir de celles-ci.
- Capacité à prototyper rapidement une idée tout en réduisant les coûts et le temps.
Inutile de "réinventer la roue" Lorsqu'un modèle pré-entraîné peut suffire à faire ce dont vous avez besoin, ce qui vous permet de vous concentrer sur l'utilisation des connaissances fournies par le modèle pour mettre en œuvre vos idées créatives. - Recours à une recherche de pointe. Les modèles pré-entraînés sont souvent basés sur des recherches populaires, ce qui vous permet de découvrir ces modèles tout en comprenant leurs performances dans le monde réel.
- Facilité d'utilisation et documentation complète En raison de la popularité de ces modèles.
- Fonctionnalités d'apprentissage par transfert : Certains modèles pré-entraînés offrent des fonctionnalités d'apprentissage par transfert, qui consistent essentiellement à transférer les informations apprises d'une tâche de machine learning vers un autre exemple similaire. Par exemple, un modèle qui a été entraîné à l'origine à reconnaître des chats peut être réentraîné à reconnaître des chiens, si vous lui donnez de nouvelles données d'entraînement. Cela sera plus rapide, car vous ne commencerez pas avec un canevas vierge. Le modèle peut utiliser ce qu'il a déjà appris pour reconnaître des chats afin de reconnaître la nouvelle chose : après tout, les chiens ont des yeux et des oreilles. S'il sait déjà comment trouver ces caractéristiques, nous sommes à mi-chemin. Réentraîner le modèle beaucoup plus rapidement avec vos propres données.
Qu'est-ce que le COCO-SSD ?
COCO-SSD est le nom d'un modèle de ML de détection d'objets pré-entraîné que vous utiliserez au cours de cet atelier de programmation. Il vise à localiser et à identifier plusieurs objets dans une même image. En d'autres termes, il peut vous indiquer le cadre de délimitation des objets qu'il a été entraîné à trouver pour vous indiquer l'emplacement de cet objet dans une image donnée que vous lui présentez. L'image ci-dessous en illustre un exemple:
S'il y avait plusieurs chiens dans l'image ci-dessus, vous devriez obtenir les coordonnées de deux cadres de délimitation décrivant leur emplacement. COCO-SSD a été pré-entraîné pour reconnaître 90 objets du quotidien, tels qu'une personne, une voiture, un chat, etc.
D'où vient ce nom ?
Le nom peut sembler étrange, mais il provient de deux acronymes:
- COCO: fait référence au fait qu'il a été entraîné sur l'ensemble de données COCO (Common Objects in Context), que tous les utilisateurs peuvent télécharger et utiliser sans frais pour entraîner leurs propres modèles. L'ensemble de données contient plus de 200 000 images étiquetées que vous pouvez utiliser pour apprendre.
- SSD (Single Shot MultiBox Detection): désigne une partie de l'architecture du modèle utilisée lors de sa mise en œuvre. Vous n'avez pas besoin de comprendre cela pour cet atelier de programmation, mais si vous souhaitez en savoir plus sur les SSD, cliquez ici.
4. Configuration
Prérequis
- Un navigateur Web moderne.
- Connaissances de base du langage HTML, CSS, JavaScript et des outils pour les développeurs Chrome (affichage du résultat de la console)
Commençons à coder
Des modèles récurrents à partir desquels commencer ont été créés pour Glitch.com ou Codepen.io. Vous pouvez simplement cloner l'un ou l'autre modèle comme état de base pour cet atelier de programmation, en un seul clic.
Dans Glitch, cliquez sur le bouton remix this (remixer) pour le dupliquer et créer un nouvel ensemble de fichiers que vous pourrez modifier.
Vous pouvez également, sur Codepen, cliquer sur fork (dupliquer) en bas à droite de l'écran.
Ce squelette très simple vous fournit les fichiers suivants:
- Page HTML (index.html)
- Feuille de style (style.css)
- Fichier pour écrire notre code JavaScript (script.js)
Pour plus de commodité, nous avons ajouté une importation dans le fichier HTML pour la bibliothèque TensorFlow.js. Elle se présente comme suit :
index.html
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
Autre possibilité: Utilisez l'éditeur Web de votre choix ou travaillez en local.
Si vous souhaitez télécharger le code et travailler en local ou sur un autre éditeur en ligne, il vous suffit de créer les trois fichiers nommés ci-dessus dans le même répertoire, puis de copier et coller le code de notre code récurrent Glitch dans chacun d'eux.
5. Remplir le squelette HTML
Tous les prototypes nécessitent un échafaudage HTML de base. Vous l'utiliserez plus tard pour afficher la sortie du modèle de machine learning. Configurons cela maintenant:
- Le titre de la page
- Quelques descriptions
- Un bouton pour activer la webcam
- Un tag vidéo pour afficher le flux de la webcam
Pour configurer ces fonctionnalités, ouvrez index.html et collez le code existant comme suit:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple object detection using pre trained model in TensorFlow.js</title>
<meta charset="utf-8">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Multiple object detection using pre trained model in TensorFlow.js</h1>
<p>Wait for the model to load before clicking the button to enable the webcam - at which point it will become visible to use.</p>
<section id="demos" class="invisible">
<p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
<div id="liveView" class="camView">
<button id="webcamButton">Enable Webcam</button>
<video id="webcam" autoplay muted width="640" height="480"></video>
</div>
</section>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Load the coco-ssd model to use to recognize things in images -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>
Comprendre le code
Notez certains éléments clés que vous avez ajoutés:
- Vous avez ajouté une balise
<h1>, des balises<p>pour l'en-tête et des informations sur la façon d'utiliser la page. Rien de spécial ici.
Vous avez également ajouté une balise de section représentant votre espace de démonstration:
index.html
<section id="demos" class="invisible">
<p>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
<div id="liveView" class="webcam">
<button id="webcamButton">Enable Webcam</button>
<video id="webcam" autoplay width="640" height="480"></video>
</div>
</section>
- Au départ, vous attribuerez à
sectionla classe "invisible". Cela vous permet d'indiquer visuellement à l'utilisateur quand le modèle est prêt et de cliquer sur le bouton Activer la webcam sans risque. - Vous avez ajouté le bouton Activer la webcam, dont vous pouvez personnaliser le style dans votre code CSS.
- Vous avez également ajouté un tag vidéo, sur lequel vous diffuserez l'entrée de votre webcam. Vous allez bientôt le configurer dans votre code JavaScript.
Si vous prévisualisez maintenant le résultat, vous devriez obtenir un résultat semblable à celui-ci:
6. Ajouter style
Paramètres par défaut de l'élément
Tout d'abord, ajoutons des styles aux éléments HTML que nous venons d'ajouter pour nous assurer qu'ils s'affichent correctement:
style.css
body {
font-family: helvetica, arial, sans-serif;
margin: 2em;
color: #3D3D3D;
}
h1 {
font-style: italic;
color: #FF6F00;
}
video {
display: block;
}
section {
opacity: 1;
transition: opacity 500ms ease-in-out;
}
Ajoutez ensuite des classes CSS utiles pour différents états de l'interface utilisateur, par exemple pour masquer le bouton ou rendre la zone de démonstration indisponible si le modèle n'est pas encore prêt.
style.css
.removed {
display: none;
}
.invisible {
opacity: 0.2;
}
.camView {
position: relative;
float: left;
width: calc(100% - 20px);
margin: 10px;
cursor: pointer;
}
.camView p {
position: absolute;
padding: 5px;
background-color: rgba(255, 111, 0, 0.85);
color: #FFF;
border: 1px dashed rgba(255, 255, 255, 0.7);
z-index: 2;
font-size: 12px;
}
.highlighter {
background: rgba(0, 255, 0, 0.25);
border: 1px dashed #fff;
z-index: 1;
position: absolute;
}
Parfait ! C'est tout ce dont vous avez besoin. Si vous avez réussi à remplacer vos styles par les deux extraits de code ci-dessus, l'aperçu en direct devrait maintenant se présenter comme suit:
Notez que le texte et le bouton de la zone de démonstration ne sont pas disponibles, car le code HTML comporte par défaut la classe "invisible" (invisible). appliquée. Vous utiliserez JavaScript pour supprimer cette classe une fois que le modèle sera prêt à être utilisé.
7. Créer un squelette JavaScript
Faire référence aux éléments clés du DOM
Tout d'abord, assurez-vous d'avoir accès aux parties clés de la page, que vous devrez manipuler ou consulter ultérieurement dans notre code:
script.js
const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
Vérifier si la webcam est compatible
Vous pouvez maintenant ajouter des fonctions d'assistance pour vérifier si le navigateur que vous utilisez permet d'accéder au flux de la webcam via getUserMedia:
script.js
// Check if webcam access is supported.
function getUserMediaSupported() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia);
}
// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will
// define in the next step.
if (getUserMediaSupported()) {
enableWebcamButton.addEventListener('click', enableCam);
} else {
console.warn('getUserMedia() is not supported by your browser');
}
// Placeholder function for next step. Paste over this in the next step.
function enableCam(event) {
}
Récupération du flux de la webcam
Ensuite, remplissez le code de la fonction enableCam précédemment vide que nous avons définie ci-dessus en copiant et en collant le code ci-dessous:
script.js
// Enable the live webcam view and start classification.
function enableCam(event) {
// Only continue if the COCO-SSD has finished loading.
if (!model) {
return;
}
// Hide the button once clicked.
event.target.classList.add('removed');
// getUsermedia parameters to force video but not audio.
const constraints = {
video: true
};
// Activate the webcam stream.
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
video.srcObject = stream;
video.addEventListener('loadeddata', predictWebcam);
});
}
Enfin, ajoutez du code temporaire afin de pouvoir tester si la webcam fonctionne.
Le code ci-dessous suppose que votre modèle est chargé et active le bouton de l'appareil photo afin que vous puissiez cliquer dessus. Vous allez remplacer l'intégralité de ce code à l'étape suivante. Préparez-vous donc à le supprimer à nouveau dans quelques instants:
script.js
// Placeholder function for next step.
function predictWebcam() {
}
// Pretend model has loaded so we can try out the webcam code.
var model = true;
demosSection.classList.remove('invisible');
Parfait ! Si vous exécutez le code et cliquez sur le bouton tel qu'il se trouve actuellement, vous devriez obtenir un résultat semblable à celui-ci:
8. Utilisation du modèle de machine learning
Charger le modèle
Vous êtes maintenant prêt à charger le modèle COCO-SSD.
Une fois l'initialisation terminée, activez la zone et le bouton de démonstration sur votre page Web (collez ce code par-dessus le code temporaire que vous avez ajouté à la fin de la dernière étape):
script.js
// Store the resulting model in the global scope of our app.
var model = undefined;
// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
model = loadedModel;
// Show demo section now model is ready to use.
demosSection.classList.remove('invisible');
});
Une fois que vous avez ajouté le code ci-dessus et actualisé la vidéo en direct, vous pouvez constater que, quelques secondes après le chargement de la page (en fonction de la vitesse de votre réseau), le bouton Activer la webcam s'affiche automatiquement lorsque le modèle est prêt à être utilisé. Cependant, vous avez également collé la fonction predictWebcam. Il est maintenant temps de la définir complètement, car notre code ne fait rien pour le moment.
Passons à l'étape suivante !
Classer une image de la webcam
Exécutez le code ci-dessous pour permettre à l'application de récupérer en continu une image du flux de la webcam lorsque le navigateur est prêt et de la transmettre au modèle pour qu'il soit classé.
Le modèle analyse ensuite les résultats, trace une balise <p> au niveau des coordonnées renvoyées, puis définit le texte sur l'étiquette de l'objet, s'il dépasse un certain niveau de confiance.
script.js
var children = [];
function predictWebcam() {
// Now let's start classifying a frame in the stream.
model.detect(video).then(function (predictions) {
// Remove any highlighting we did previous frame.
for (let i = 0; i < children.length; i++) {
liveView.removeChild(children[i]);
}
children.splice(0);
// Now lets loop through predictions and draw them to the live view if
// they have a high confidence score.
for (let n = 0; n < predictions.length; n++) {
// If we are over 66% sure we are sure we classified it right, draw it!
if (predictions[n].score > 0.66) {
const p = document.createElement('p');
p.innerText = predictions[n].class + ' - with '
+ Math.round(parseFloat(predictions[n].score) * 100)
+ '% confidence.';
p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: '
+ (predictions[n].bbox[1] - 10) + 'px; width: '
+ (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;';
const highlighter = document.createElement('div');
highlighter.setAttribute('class', 'highlighter');
highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '
+ predictions[n].bbox[1] + 'px; width: '
+ predictions[n].bbox[2] + 'px; height: '
+ predictions[n].bbox[3] + 'px;';
liveView.appendChild(highlighter);
liveView.appendChild(p);
children.push(highlighter);
children.push(p);
}
}
// Call this function again to keep predicting when the browser is ready.
window.requestAnimationFrame(predictWebcam);
});
}
L'appel le plus important de ce nouveau code est model.detect().
Tous les modèles prédéfinis pour TensorFlow.js disposent d'une fonction de ce type (dont le nom peut varier d'un modèle à l'autre, consultez la documentation pour en savoir plus) qui exécute l'inférence de machine learning.
L'inférence consiste simplement à prendre des données d'entrée et à les exécuter dans le modèle de machine learning (ce qui représente essentiellement un grand nombre d'opérations mathématiques), puis à fournir des résultats. Avec les modèles prédéfinis TensorFlow.js, nous renvoyons nos prédictions sous la forme d'objets JSON, ce qui facilite leur utilisation.
Pour en savoir plus sur cette fonction de prédiction, consultez la documentation GitHub sur le modèle COCO-SSD ici. Cette fonction effectue beaucoup d'efforts en arrière-plan: elle peut accepter n'importe quelle image de ce type. comme paramètre, tel qu'une image, une vidéo, un canevas, etc. L'utilisation de modèles prédéfinis peut vous faire économiser beaucoup de temps et d'énergie, car vous n'avez pas besoin d'écrire ce code vous-même et vous pouvez le travailler "prêt à l'emploi".
L'exécution de ce code devrait maintenant vous donner une image qui ressemble à ceci:
Enfin, voici un exemple de code qui détecte plusieurs objets en même temps:
Excellent ! Imaginez maintenant à quel point il serait facile de créer un appareil tel qu'une Nest Cam avec un vieux téléphone pour recevoir une alerte lorsqu'elle détecte votre chien sur le canapé ou votre chat sur le canapé. Si vous rencontrez des problèmes avec votre code, vérifiez ici ma version de travail finale pour voir si vous avez copié quelque chose de manière incorrecte.
9. Félicitations
Félicitations ! Vous venez de faire vos premiers pas dans l'utilisation de TensorFlow.js et du machine learning dans le navigateur Web. C'est maintenant à vous de prendre ces débuts modestes et d'en faire quelque chose de créatif. Qu'allez-vous fabriquer ?
Résumé
Voici les connaissances que vous avez acquises au cours de cet atelier de programmation :
- Découvrir les avantages de TensorFlow.js par rapport aux autres formes de TensorFlow
- Découvrir dans quelles situations il peut être utile de se lancer avec un modèle de machine learning pré-entraîné
- Création d'une page Web entièrement fonctionnelle qui peut classer des objets en temps réel à l'aide de votre webcam, y compris:
- Créer un squelette HTML pour le contenu
- Définir des styles pour les éléments et les classes HTML
- Configurer un échafaudage JavaScript pour interagir avec le code HTML et détecter la présence d'une webcam
- Charger un modèle TensorFlow.js pré-entraîné
- Utiliser le modèle chargé pour effectuer des classifications continues du flux de la webcam et dessiner un cadre de délimitation autour des objets dans l'image.
Étapes suivantes
Partagez vos créations ! Vous pouvez facilement étendre ce que vous avez créé pour cet atelier de programmation à d'autres cas d'utilisation liés aux créations. Nous vous encourageons à sortir des sentiers battus et à continuer à pirater une fois que vous aurez terminé.
- Vérifiez tous les objets que ce modèle peut reconnaître et réfléchissez à la manière dont vous pourriez utiliser ces connaissances pour effectuer une action. Quelles idées créatives pourraient être mises en œuvre en étendant ce que vous avez fait aujourd'hui ?
Vous pourriez peut-être ajouter une simple couche côté serveur pour envoyer une notification à un autre appareil lorsqu'il voit un objet de votre choix à l'aide de WebSockets. Ce serait un excellent moyen de recycler un ancien smartphone pour lui donner un nouvel objectif. les possibilités sont illimitées !)
- Taguez-nous sur les réseaux sociaux avec le hashtag #MadeWithTFJS. Votre projet sera peut-être présenté sur notre blog TensorFlow, voire lors de futurs événements TensorFlow.
Autres ateliers de programmation TensorFlow.js pour aller plus loin
- Écrire entièrement un réseau de neurones dans TensorFlow.js
- Reconnaissance audio à l'aide de l'apprentissage par transfert dans TensorFlow.js
- Classification d'images personnalisées à l'aide de l'apprentissage par transfert dans TensorFlow.js