Follow the next steps to create a binary image classifier with your own data that you can easily add to your web page.
Add your own images of each class to the respective box and name it! No images are uploaded, all the processing is done in your machine.
Press the button and wait until you get an notification saying your training is done. You can retrain the times you want after adding new images in the previous step.
Eyeball the results in some test images, for that all you have to do is drop them in the box. You should test with images different from the ones you trained with to make sure your classifier can deal with unseen data!
Once you are satisfied with your model download it and the sample code that you can use to easily integrate it in your web page. Allow download of multiple files and save them all in the same directory. Do not change the names. The only code you will need to add to your page is also written bellow.
<!DOCTYPE html>
<html>
<body>
<!-- Tensorflow library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<!-- Library with the methods needed for classification -->
<script src="classifier.js"> </script>
<h1>Example page showing how to use the image classifier</h1>
<p>Prediction:</p>
<!-- The image you want to classify -->
<img id="myImage" src="" >
<div id="pred"></div>
<button type="button" id="predict" onclick="doPredict()">Predict</button>
<script src="index.js"> </script>
</body>
</html>
async function doPredict()
{
testImage = document.getElementById("testImage");
// Predict takes as input an img element and returns 0 or 1
// that correspond to your classes A and B respectively.
const classId = await predict(testImage);
var predictionText = "";
// Replace this with your classes names
switch(classId){
case 0:
predictionText = "A";
break;
case 1:
predictionText = "B";
break;
}
document.getElementById("pred").innerText = predictionText;
}