<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
<body>
<h1>Image Classification</h1>
<h2>With MobileNet and ml5.js</h2>
<div id="myResult">Scanning ...</div>
<img id="myImage" src="pic1.jpg" width="100%">
<script>
let classifier;
let img;
classifier = ml5.imageClassifier("MobileNet");
img = document.getElementById("myImage");
classifier.classify(img, gotResult);
function gotResult(results) {
let label = results[0].label;
let confidence = (results[0].confidence * 100).toFixed(2);
document.getElementById("myResult").innerHTML = label + "<br>Confidence: " + confidence + "%";
}
</script>
</body>
</html>