Tensorflowjs in ionic

Question

I tried to use tensorflowjs in ionic. After converting existing model from python then import from ionic it works only when i runs on my local server (http://localhost:8100/ionic-lab)

However, when i build the project for android tf.loadModel method not working, it fails to load model from local folder ( ie. assets/model )

I already checked this link Tensorflow.js with react-native , but it doesn't help. I guess, lots of hybrid mobile app frameworks are pretty much the same line. Any advice and suggestions will be greatly appreciated.

    import {Component} from '@angular/core';
    import {IonicPage, AlertController} from 'ionic-angular';
    import {HttpClient} from "@angular/common/http";
    import * as tf from "@tensorflow/tfjs";

    @IonicPage()
    @Component({
      selector: 'page-tfpretrainedversion',
      templateUrl: 'tfpretrainedversion.html',
    })
    export class TfpretrainedversionPage {

      kerasTraindedModel: tf.Model;
      KERAS_MODEL_JSON = 'assets/model/model.json';

      constructor(private httpClient: HttpClient,
                  private alertCtrl: AlertController) {
        this.loadPretrainedModel();
      }

      loadPretrainedModel() {

        tf.loadModel(this.KERAS_MODEL_JSON)
          .then((result) => {
            this.kerasTraindedModel = result;
          })
          .catch((error)=>{
            let prompt = this.alertCtrl.create({
              title: 'Error',
              subTitle: error,
              buttons: ['OK']
            });
            prompt.present();
          });
      }
    }

Here is an error message Failed to fetch

And here is a project structure Project structure

Answer 1

TensorflowJs loads the models via fetch(). fetch() does not support loading local-files. https://fetch.spec.whatwg.org/

My Workaround:

Use a polyfill (https://github.com/github/fetch) and replace the fetch.

window.fetch = fetchPolyfill;

Now, it's possible to load local files (file:///) like:

const modelUrl = './model.json'

const model = await tf.loadGraphModel(modelUrl);