How to properly upload a pretrained model in angular with tensorflow.js?

Question

I'm trying to upload a pretrained Keras model into my existing tensorflow.js model and then making a simple prediction by passing a tensor in the correct format. I'm loading the model from my local drive within the project (in the assets folder)

export class MotionAnalysisComponent implements OnInit {

  model: tf.LayersModel;

  ngOnInit() {
        this.loadModel()
    };

  async loadModel() {
      this.model = await 
  tf.loadLayersModel('C:/Users/..path to folder../assets/tfjs_model/model.json');
      console.log('Prediction from loaded model:');
      this.model.predict(tf.ones([60,60,60]));
    }

I implemented a button in my html code, that should start the code and printing out the predictions in my console. But I'm getting the following errors:

Fetch API cannot load file:///C:/Users/..path to folder../assets/tfjs_model/model.json. URL scheme must be "http" or "https" for CORS request
ERROR Error: Uncaught (in promise): TypeError: Failed to fetch TypeError: Failed to fetch

Possible duplicate of Load Tensorflow js model from local file system in javascript — edkeveked
– edkeveked, Commented Sep 5, 2019 at 7:23

andypotato · Accepted Answer · 2019-09-05 04:10:12Z

3

Assuming you are running this application in a browser you cannot access local file resources. You need to put your model.json file into a folder (for example "assets") inside your Angular project and load the model via http(s) protocol from there.

For example like this:

async loadModel() {
  this.model = await tf.loadModel('/assets/tfjs_model/model.json');
}

answered Sep 5, 2019 at 4:10

andypotato

7225 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alireza Abolhasani · Accepted Answer · 2019-09-05 04:26:21Z

0

A few things to note:

Like model.save(), the loadLayersModel function takes a URL-like string argument that starts with a scheme. This describes the type of destination we are trying to load a model from.

The scheme(Scheme: http:// or https://) is followed by a path.

The url-like string can be replaced by an object that matches the IOHandler interface.

The tf.loadLayersModel() function is asynchronous.

The return value of tf.loadLayersModel is tf.Model

answered Sep 5, 2019 at 4:26

Alireza Abolhasani

254 bronze badges

Collectives™ on Stack Overflow

How to properly upload a pretrained model in angular with tensorflow.js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related