Failed to load tensorflowjs model on cordova android

[tymons]

I’am trying to import a model treined in keras to tensorflow.
it works fine with the command “quasar dev”, however when i run with “cordova run android” it shows the message TypeError: Failed to Fetch

<template>
  <div>
    <div class="train-controls">
      <div class="text-center">
        <div class="text-bold">
          Vendas de Sorvetes<br />
          <img src="~assets/sorvete.png" style="height: 100px; width:100px" />
        </div>
        Temperatura em Celcius<br />
        <input
          class="field element"
          v-model="valueToPredict"
          type="number"
          placeholder="digite um inteiro"
        />
        <div class="element">{{ predictedValue }}</div>
        <button class="element button--green" v-on:click="carregar_modelo">
          Carrega Treino
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import * as tf from "@tensorflow/tfjs";


export default {
  data() {
    return {
      predictedValue: "Clique em Predizer Vendas",
      valueToPredict: "",
      model: tf.sequential()
    };
  },
  mounted() {
    this.carregar_modelo();
  },
  methods: {
    async carregar_modelo() {

      if (this.$q.platform.is.android) {
        try {


          this.model = await tf.loadLayersModel("model/model.json");

        } catch (error) {
          alert(error);
        }
      } else {
        this.model = await tf.loadLayersModel("model/model.json");
      }

    },
    predict() {
      let valor = this.model.predict(
        tf.tensor2d([this.valueToPredict], [1, 1], "float32")
      );

      this.predictedValue = "R$" + Number(valor.dataSync()).toFixed(2);
    }
  }
};


[dobbel]

if you put your code on github people can help you better.

[tymons]

I forgot to put how to solve this
it was a problem with the fetch function on android.
to fix it
i instaled “npm i whatwg-fetch”

import { fetch as fetchPolyfill } from “whatwg-fetch”;

on mounted() function added
window.fetch = fetchPolyfill;

<template>
  <q-layout class="layoutHome">
      <img id="imagemSorvete" src="~assets/imagem_sorvete.jpg" />
      <q-input class="text-dark" maxlength="3" v-model="valorTemperatura" label="Temperatura em Celsius" placeholder="Digite a temperatura..." @reset="limparCampos" />
      <q-input class="text-dark" v-model="valorPreditoLucro" label="Valor do Lucro" readonly/>

      <div :class="$q.screen.width <= 350 ? 'layoutBotoes row' : 'layoutBotoes'">
        <q-btn id="botaoPredizerLucro" :class="$q.screen.width <= 350 ? 'col' : ''" color="primary" label="Predizer Lucro" v-on:click="predizerLucroVendas" />
        <q-btn id="botaoLimparCampos"  :class="$q.screen.width <= 350 ? 'col' : ''" color="primary" label="Limpar Campos" v-on:click="limparCampos" />
      </div>
  </q-layout>
</template>
<script>
import * as tf from "@tensorflow/tfjs";
import { fetch as fetchPolyfill } from "whatwg-fetch";
import { Dialog } from 'quasar'

export default {
  data() {
    return {
      valorPreditoLucro: "",
      valorTemperatura: "",
      model: tf.sequential()
    };
  },
  mounted() {
    try {
      window.fetch = fetchPolyfill;
      this.carregar_modelo();
    } catch (error) {
      alert(error);
    }
  },
  methods: {
    async carregar_modelo() {
      if (this.$q.platform.is.android) {
        try {
          this.model = await tf.loadLayersModel("model/model.json");
        } catch (error) {
          alert(error);
        }
      } else {
        this.model = await tf.loadLayersModel("model/model.json");
      }
    },
    predizerLucroVendas() {

      if(this.valorTemperatura == "") {
        this.popupTemperaturaNula();
      }
      else if(this.valorTemperatura >60 || this.valorTemperatura < -90) {
        this.popupTemperaturasInvalidas();
        this.limparCampos();
      }
      else {
        let valor = this.model.predict(
        tf.tensor2d([this.valorTemperatura], [1, 1], "float32")
      );

      this.valorPreditoLucro = "R$ " + Number(valor.dataSync()).toFixed(2);
      }
    },
    limparCampos() {
      this.valorTemperatura="";
      this.valorPreditoLucro="";
    },
    popupTemperaturaNula(){
      this.$q.dialog({
        title: 'Temperatura Nula',
        message: 'O campo "valor da temperatura" está nulo'
      }).onOk(() => {
        
      }).onCancel(() => {
        
      }).onDismiss(() => {
        
      })

      this.limparCampos();
    },
    popupTemperaturasInvalidas() {
      this.$q.dialog({
        title: 'Temperatura Inválida',
        message: 'Temperaturas maiores que 60ºC ou menores que -90ºC não são aceitas'
      }).onOk(() => {
        
      }).onCancel(() => {
        
      }).onDismiss(() => {
        
      })

      this.limparCampos();
    }
  }
};
</script>