Intelligence Artificielle : Classification d'images avec TensorFlow en Javascript
Cet exemple vous montre comment concevoir une application de classification d'images basée sur l'Intelligence Artificielle (IA ou Artificial Intelligence AI)
MobileNet et TensorFlow nous permettent de classifier une image, c'est-Ă -dire de reconnaitre un objet dans une image.
La classification n'est pas toujours prĂ©cise mais compte tenu de la rapiditĂ© et de la simplicitĂ© Ă mettre cette solution en place, la prĂ©cision est tout de mĂȘme honorable.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI - Classification d'images</title>
<!-- TensorFlow.js-->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.8.4"> </script>
<!-- MobileNet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.0.4"></script>
<style>
#img-input {
display: block;
margin: 0 auto;
}
#img {
display: block;
margin: 25px auto 0 auto;
width: 100%;
max-width: 500px;
border: 2px solid black;
}
table {
margin: 25px auto 0 auto;
}
table,
td,
caption {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<input type="file" id="img-input" onchange="loadFile(event)" />
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" />
<table class="table">
<caption>Prédictions</caption>
<thead>
<tr>
<th>Objet</th>
<th>Probabilité</th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
<script>
/* Balise image */
const img = document.getElementById("img");
/* Le corps du tableau */
const result = document.getElementById("result");
/* Le formateur pour formater les pourcentages */
const formatter = new Intl.NumberFormat("fr-FR", { maximumSignificantDigits: 3 });
function loadFile(event) {
/* Affiche le fichier chargé dans la balise img */
img.src = URL.createObjectURL(event.target.files[0]);
/* Charge le modèle */
mobilenet.load().then(model => {
/* Retourne les prédictions */
model.classify(img).then(predictions => {
console.log("Predictions: ");
console.log(predictions);
displayPredictions(predictions);
});
});
};
function displayPredictions(predictions) {
/* Vide le corps du tableau */
result.innerHTML = "";
/* Pour chaque prédiction */
for (prediction of predictions) {
/* Ajoute une ligne au tableau */
result.innerHTML += `<tr>
<td>${prediction.className}</td>
<td>${formatter.format(prediction.probability * 100)} %</td>
</tr>`
}
}
</script>
</body>
</html>La logique de cet exemple d'application web se décompose en plusieurs points :
L'utilisateur charge une image via le input file.
L'image chargée est placée dans la source (src) de la balise image.
TensorFlow et MobileNet tentent de classifier l'image et retournent les prédictions.
Les prédictions sont ensuite affichées dans un tableau.
Commentaires
Enregistrer un commentaire