Error loading model.json Tensorflow.js, IOHandler provided does not have the `load` method implemented

user_11710058 0
Viewed 1181

I'm getting the following error when I try to load my trainned model on my web app, the json is reached from the path properly (I've tryed to print with console.log and it's OK), seems that the problem is when tf.loadLayers try to load it...

Vue App Code

  import * as tf from '@tensorflow/tfjs';

  export default {
    data(){
      return {
        modelJSON: require('../model/jsmodel/model.json'),
      }
    },
  mounted(){
    this.loadModel();
  },
  methods: {
      async loadModel(){
        this.model = await tf.loadLayersModel(this.modelJSON)
      },
...

Error

models.js?411e:207 Uncaught (in promise) Error: Cannot proceed with model loading because the IOHandler provided does not have the `load` method implemented.
    at loadLayersModelFromIOHandler (models.js?411e:207)
    at loadLayersModelInternal (models.js?411e:190)
    at Module.loadLayersModel (exports.js?79b0:220)
    at _callee$ (SingleTweet.vue?b47c:40)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
tensorflow.js keras tensorflow javascript
1 Answers

I checked the source code and it looks that the proper handler from static files manifesto json of the model imported with ES6 or CommonJS isn't implemented, so as a workaround it worked for me over http, you can place your model to a storage or start local server and disable CORS in a browser for the page where you open your app. I think the issue can be opened on github project.

  1. Install http server, e.g.

    npm install http-server -g

  2. Launch your dev server

    npm run dev

  3. Launch server to serve files from the models folder

    http-server

  4. Change this.modelJSON to path to JSON file, in my case

    const modelJSON = 'http://127.0.0.1:8087/model.json'

  5. Disable CORS to allow cross-domain requests, there is a plugin to do it.

The model can be placed e.g. to CloudStorage or to any other server with statics.

user_25044770
Related