Model doesn't predict the correct label even when the input is from the dataset through Phone's Camera

[haidernawaz99]

Describe the bug
I am running the model on React Native. I input the image taken from the phone's camera into the model, and almost always get an incorrect label. The Input itself is pictures taken from the dataset via my Phone's Camera.

Steps to Reproduce

1. I open the picture of the leaf on my laptop screen (from Kaggle)
2. I take its picture from the phone's camera.
3. Output is incorrect class index.

Screenshots
I am attaching the inputs to the model as it is.

Input 1

Input 2

Output of Input 2

This should be "32": "Tomato___Septoria_leaf_spot", not "36": "Tomato___Tomato_mosaic_virus".

Am I doing something wrong? Is the input to the model wrong? I am very new to ML, so I have very little idea as to how I can improve the classification. Would other models yield the same incorrect labels?

Smartphone (please complete the following information):

• Device: Samsung Galaxy A52
• OS: Android 12
• Browser: Nope, Bare React Native

Code
`
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Alert } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import { fetch, bundleResourceIO, decodeJpeg } from '@tensorflow/tfjs-react-native';
import * as jpeg from 'jpeg-js';
import * as FileSystem from "expo-file-system";

export default function CaptureResult({ navigation, route }) {
const [tfReady, setTfReady] = useState(false);
const [diseaseDetector, setDiseaseDetector] = useState("");

async function loadModel() {

    await tf.setBackend('cpu');
    await tf.ready();
    setTfReady(true);
    console.log("[+] TF Ready!");


    console.log("[+] Loading custom Disease detection model")
    const modelJson = await require("../../assets/model/model.json");
    const modelWeight = await require("../../assets/model/group1-shard.bin");
    // const diseaseDetector = await tf.loadLayersModel(bundleResourceIO(modelJson, modelWeight));
    const diseaseDetector = await tf.loadLayersModel('https://coverimages.blob.core.windows.net/plantai-tfjs-model/model.json');
    console.log("[+] Model Loaded!");

    setDiseaseDetector(diseaseDetector);
}




const getDisease = async () => {


    const fileUri = `file://${route.params.photo}`;
    console.log("[+] Retrieving image  :" + fileUri)
    const imgB64 = await FileSystem.readAsStringAsync(fileUri, {
        encoding: FileSystem.EncodingType.Base64,
    });


    const imgBuffer = tf.util.encodeString(imgB64, "base64").buffer;
    const newData = new Uint8Array(imgBuffer);


    let offset = tf.scalar(255)
    let imageTensor = decodeJpeg(newData).resizeNearestNeighbor([224, 224]).toFloat().expandDims(); // transforms byte array into 3d tensor
    let imageTensor_scaled = imageTensor.div(offset)
    let prediction = await diseaseDetector.predict(imageTensor_scaled).data();

    console.info(prediction);
    let predicted_class = tf.argMax(prediction)
    let class_idxs = Array.from(predicted_class.dataSync());
    console.log(class_idxs)
    let class_idx = class_idxs[0]
    console.log(class_idx) // <--- THIS USUALLY GIVES '7', which I match from the class_indices.json file, which comes out to be corn.

    console.log("[+] Prediction Completed")

}

getDisease()



useEffect(() => {
    loadModel();
}, []);

return (
    <Image source={{ uri: `file://${route.params.photo}` }} style={StyleSheet.absoluteFill} />


);

}`