title: When keras model is loaded into tensorjs, it becomes completely inaccurate
body: <p>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. </p>
  
  <p>This is my processImage code</p>
  
  <pre><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);
  
  
  }
  </code></pre>
  
  <p>and finally, the code I use to load test images in python. This is how images are formatted for my model.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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?</p>