client side tensorflow.js image classification problem

Question

im trying to create a client side web app that uses a pretrained model to classify an image as a fruit or vegetable.

the model was pretrained in azure custom vision and was exported as a tensorflow js model.

app.js code:

// Load the model
const MODEL_URL = 'model/model.json';

let model;

(async function () {
    model = await tf.loadGraphModel(MODEL_URL);
    console.log('Model loaded successfully');
})();

let highestPrediction;

const CLASS_NAMES = ['Apple', 'Banana', 'Carrot', 'Onion', 'Orange', 'Potato'];

async function classifyImage() {
    // Get a reference to the image input field and result paragraph
    const imageUpload = document.getElementById('frame');
    const previewImage = document.getElementById('frame-preview');
    const result = document.getElementById('result');

    // Get the uploaded image file
    const imageFile = imageUpload.files[0];

    // Load the image into an HTMLImageElement using a Promise
    const image = await new Promise(resolve => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.src = URL.createObjectURL(imageFile);
    });

    // Convert the image to a TensorFlow.js tensor
    const tensor = tf.browser.fromPixels(image).resizeNearestNeighbor([224, 224]).toFloat().div(tf.scalar(255)).expandDims();

    // Run the tensor through the model to get the predictions
    const predictions = await model.predict(tensor).data();

    // Display the predictions
    const output = Array.from(predictions)
        .map((p, i) => ({ probability: p, className: CLASS_NAMES[i] }))
        .sort((a, b) => b.probability - a.probability)
        .slice(0, 6);
    console.log(output);

    // Get the ul element to add the list items to
    const resultList = document.getElementById("resultList");

    // Clear any existing results
    resultList.innerHTML = "";

    // Create a list item for prediction and add it to the ul element
    highestPrediction = output[0];
    const listItem = document.createElement("p");
    listItem.innerHTML = `Prediction: ${highestPrediction.className} <br> Confidence: ${(highestPrediction.probability * 100).toFixed(2)}%`;
    resultList.appendChild(listItem);

}

// Add event listener to the submit button
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
    event.preventDefault();
    classifyImage();
});


//preview image uploaded 
function preview(input) {
    const previewImage = document.getElementById('frame-preview');
    const imageFile = input.files[0];

    if (imageFile) {
        previewImage.src = URL.createObjectURL(imageFile);
    }
}

    const imageUpload = document.getElementById('frame');
    imageUpload.addEventListener('change', function () {
    preview(this);
});



// Get a reference to the result paragraph
    const result = document.getElementById('result');

The html is below :


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Image Upload App</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  </head>
  <body>
    <h1>Image Upload App</h1>
    <div>
      Image Preview
      <img id="frame-preview" src="" />
    </div>
    <form>
      <input type="file" id="frame" accept="image/*" />
      <button type="submit">Classify Image</button>
    </form>
    <div><ul id="resultList"></ul></div>
    <script src="app.js"></script>
  </body>
</html>

its basic html and js with tensorflowjs integrated. it works in the sense that it takes the file and shows a preview but it is predicting that everything is an apple. that is the first class name in the array and i suspect its going to that as default.

I want to know what the highest predicted object is for something i want to try later on but im confused why the predictions aren't as accurate when the model is 99% accurate on the azure custom vision portal when i use quick test.

this is my first time using this kind of thing so would be grateful for any kind of suggestions on how to fix this.

i am using vs code with the live server extension to see the page too and have "@tensorflow/tfjs": "^4.4.0"

client side tensorflow.js image classification problem

0 Answers0