tfjs: tf.loadModel not working in ionic

TensorFlow.js version

0.10.0

Browser version

cli packages: (C:\Users\Administrator\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
Node              : v8.9.1
npm               : 5.6.0
OS                : Windows 10

Describe the problem or feature request

tf.loadModel not working, it fails to load model from local folder ( ie. assets/model ) however, web version is working, when it runs on http://localhost:8100/ionic-lab

Code to reproduce the bug / link to feature request

import {Component} from '@angular/core';
import {IonicPage, AlertController} from 'ionic-angular';
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,
              private loadingService: LoadingServiceProvider) {
    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 a error message screenshot_2018-05-08-05-43-54

and here is a data structure pretrainedmodel

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 19 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

To make this happen, I used this workaround in a Cordova-Projekt:

Import a polyfill (https://github.com/github/fetch) and replace the global-fetch.

window.fetch = fetchPolyfill;

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

const modelUrl = './model.json'

const model = await tf.loadGraphModel(modelUrl);

Any follow up on this issue? @gabrielglbh Thanks!