Skip to content

Instantly share code, notes, and snippets.

@danielz02
Created January 15, 2020 16:47
Show Gist options
  • Select an option

  • Save danielz02/98d0cbd3d972d8a1fd0181148edff0a9 to your computer and use it in GitHub Desktop.

Select an option

Save danielz02/98d0cbd3d972d8a1fd0181148edff0a9 to your computer and use it in GitHub Desktop.
Use TensorFlow.js to classify image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flow</title>
</head>
<body>
<div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"></script>
<input type='file' />
<br><img id="img" src="#" alt="Your Image" height=200 width=100>
<script type="application/javascript">
document.getElementById("img").style.visibility = "hidden";
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
const img = document.querySelector('img'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to blob url
img.onload = imageIsLoaded;
}
});
});
function imageIsLoaded() {
document.getElementById("img").style.visibility = "visible";
document.getElementById("img").style.height = "auto";
console.log("Image Loaded");
const img = document.getElementById("img");
mobilenet.load().then(model => {
model.classify(img).then(predictions => {
console.log(predictions);
alert("The input image is probably \n" +
"0) " + predictions[0].className + " \n" +
"1) " + predictions[1].className + " \n" +
"2) " + predictions[2].className);
})
})
}
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment