CODEWITHSUNDEEP
pythontensorflowkerastensorflow.js
kwame adaboh
kwame adaboh

Reputation: 13

When keras model is loaded into tensorjs, it becomes completely inaccurate

I am trying to build an image recognition web app for a keras model that i found on kaggle. I'm a complete beginner to this stuff. This is my first time working on a ML project. The model works fairly well in keras/tensorflow (forgive me if my terminologies are inaccurate), but when i load the model into my webapp via tensorjs and make predictions, its hilariously inaccurate, even with training data. I dont know exactly what's going on, but I have a hunch that it involves how my image is being processed in the web app. I just dont know exactly what i have to change.

This is my processImage code

function processImage(image)
{

    let tensor = tf.browser.fromPixels(image)

    const resized = tf.image.resizeBilinear(tensor, [256, 256]).toFloat()

    const offset = tf.scalar(255.0);
    const normalized = tf.scalar(1.0).sub(resized.div(offset));

    const batched = normalized.expandDims(0);
    return batched;



} 


async function start()
{


    model=await tf.loadLayersModel('http://localhost:8013/pokemonClassifier/model/model.json');
    console.log(classNames.length)

    console.log($('#custom-text').text());

    if(model==undefined)
    {
        alert('No model present');
    }

    if($.trim($('#custom-text').text())=='No file chosen, yet.')
    {
        alert('please load an image before starting model');


    }
        let image=document.getElementById("preview");
        console.log(image);
        let tensor=processImage(image);

        let predictions= await model.predict(tensor).data();
        console.log(predictions);
        let results = Array.from(predictions)
        .map(function (p, i) {
          return {
            probability: p,
            className: classNames[i]
          };
        }).sort(function (a, b) {
          return b.probability - a.probability;
        }).slice(0, 5);

        alert(results[0].className);
        console.log(results);


}

and finally, the code I use to load test images in python. This is how images are formatted for my model.

def load_image(img_path, show=False):

    img = image.load_img(img_path, target_size=(256, 256))
    img_tensor = image.img_to_array(img)                    # (height, width, channels)
    img_tensor = np.expand_dims(img_tensor, axis=0)         # (1, height, width, channels), add a dimension because the model expects this shape: (batch_size, height, width, channels)
    img_tensor /= 255.                                      # imshow expects values in the range [0, 1]

    if show:
        plt.imshow(img_tensor[0])                           
        plt.axis('off')
        plt.show()

    return img_tensor

I really just need someone to tell me the discrepancies between the load_image formatting which I use for my model and the processImage code I used in javascript. What do I need to add or remove from the javascript code so that my image will be processed properly?

Upvotes: 1

Views: 141

Answers (1)

edkeveked
edkeveked

Reputation: 18401

The preprocessing applied is different in js and python.

in python

normalized = data / 255

and in js

normalized = 1 - (data / 255)

To have the same normalization in js, the normalization should be:

const normalized = resized.div(offset)

Upvotes: 1

Related Questions