title: TensorFlow.js returns always the same wrong prediction (although the underlying Python-model works fine)
body: <p>I have to develop a mobile application with the Ionic Framework (so the code is completely written in HTML and JavaScript/TypeScript) which uses neural networks for image classification.
  So I've trained a simple model with only 3 classes in Python and tested it - it works nearly perfect, every tested image is classified correctly with 90-100% accuracy.</p>
  <p>So I converted the trained Keras-Model into JSON, but when I classify one of the same images as in the Python-tests in my Ionic-App I get the same wrong result, which is something like this:</p>
  <p><code>[9.851827087459242e-8, 0.000011355405149515718, 0.9999885559082031]</code></p>
  <p>There may be a small difference between the values, but every time the third value is something like 0.999..., so every image is classified as the same (wrong) class.</p>
  <p>I tried to draw an image to HTML-Canvas and read it:</p>
  <pre class="lang-js prettyprint-override"><code>var canvas = &lt;HTMLCanvasElement&gt; document.getElementById('imageCanvas');
  var ctx = canvas.getContext('2d');
  var imgElem = &lt;HTMLImageElement&gt; document.getElementById('imgID');
  ctx.drawImage(imgElem , 0, 0, canvas.width, canvas.height);
  const imgData: ImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  </code></pre>
  <p>After that I converted the imageData into the correct input shape for the neural network:</p>
  <pre class="lang-js prettyprint-override"><code>let img = tf.browser.fromPixels(imgData, 3);
  img = img.reshape([-1, 192, 192, 3]);
  img = tf.cast(img, 'float32');
  </code></pre>
  <p>Finally I get the prediction results with this function:</p>
  <pre class="lang-js prettyprint-override"><code>const model = await tf.loadLayersModel('../../assets/tfjs_model/model.json').then(model =&gt; {
      const output = model.predict(smallImg) as any;
      var prediction = Array.from(output.dataSync()); 
  });
  </code></pre>
  <p>I also tried to read the img-Data directly through the img-tag/URL (as HTMLImageElement instead of HTMLCanvasElement), because I heard that I have to ensure that the image has loaded completely:</p>
  <pre class="lang-js prettyprint-override"><code>const model = await tf.loadLayersModel('../../assets/tfjs_model/model.json');
  imgData.onload = function () {
      let img = tf.browser.fromPixels(imgData, 3);
      img = img.reshape([-1, 192, 192, 3]);
      img = tf.cast(img, 'float32');
  
      const output = model.predict(img) as any;
      var prediction = Array.from(output.dataSync()); 
  }
  imgData.src = &quot;../../assets/img/img1.jpg&quot;;
  </code></pre>
  <p>But unfortunately this solution leads to the same wrong results as mentioned above...</p>
  <p>I've already read every question and answer to this topic on Stackoverflow and some other pages, but every try turns into the same bad result.</p>
  <p>So I really hope that someone can help me to find another solution or to find out what's wrong with my code.</p>
  <p>Thank you in advance!</p>
  <p><strong>EDIT:</strong></p>
  <p>My Python-code looks like this (an extract of it):</p>
  <p>Before the training I do this:</p>
  <pre class="lang-js prettyprint-override"><code>img = cv2.imread(path,1)
  img = cv2.resize(img, (192, 192), 3)
  test_images.append([np.array(img), one_hot_label(i)])
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>tr_img_data = np.array([i[0] for i in training_images]).reshape(-1,192,192,3)
  tr_lbl_data = np.array([i[1] for i in training_images])
  tst_img_data = np.array([i[0] for i in testing_images]).reshape(-1,192,192,3)
  tst_lbl_data = np.array([i[1] for i in testing_images])
  
  input_shape = tr_img_data.shape[1:]
  
  tr_img_data = tr_img_data.astype('float32')
  tst_img_data = tst_img_data.astype('float32')
  </code></pre>
  <p>After that the setup of the model begins.</p>
  <p>And in my code for the testing/use of the trained model I do this:</p>
  <pre class="lang-js prettyprint-override"><code>img = cv2.imread(file,1)
  img = cv2.resize(img, (192, 192), 3)
  img = img.reshape((-1, img.shape[0], img.shape[1], 3))
  img = img.astype(&quot;float&quot;)
  </code></pre>
  <p>After that I return the img and call the function for the prediction.</p>