Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/index.html

Created March 6, 2024 14:40
Show Gist options
  • Save haehn/ad5a1e127637b6cc2e5d49664708a3f2 to your computer and use it in GitHub Desktop.
Save haehn/ad5a1e127637b6cc2e5d49664708a3f2 to your computer and use it in GitHub Desktop.
Download ZIP
JacobsCatsVsDogz
Raw
index.html
<html>
<head>
<title>CATZ vs DOGZ</title>
<style>
body {
color: white;
background: black;
overflow: hidden;
margin: 20px;
font-family: sans-serif;
}
#dropzone {
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js"></script>
<script>
window.onload = function() {
dropzone = document.getElementById('dropzone');
dropzone.ondragover = function(e) {
e.preventDefault();
}
dropzone.ondrop = function(e) {
e.preventDefault();
file = e.dataTransfer.files[0];
// run prediction
isCatOrDog( file );
}
}
async function isCatOrDog(file) {
model = await tf.loadLayersModel("web/model.json");
img = new Image();
img.src = URL.createObjectURL( file );
img.onload = async function(e) {
dropzone.innerHTML = '';
dropzone.appendChild(img);
tensor = tf.browser
.fromPixels(img)
.resizeNearestNeighbor([244, 244]) // resize
.div(tf.scalar(255)) // normalize
.expandDims();
prediction = await model.predict(tensor).dataSync();
console.log(prediction);
if (prediction[0] > prediction[1]) {
// cat
dropzone.innerHTML += '<br><span style="position:absolute;top:10px;left:10px;font-size:30px">CAT</span>';
} else {
// dog
dropzone.innerHTML += '<br><span style="position:absolute;top:10px;left:10px;font-size:30px">DOG</span>';
}
}
}
</script>
</head>
<body>
<div id='dropzone'><img src='dropzone.png'><br>Drag your image here!</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment