Cannot load pre-trained CharRNN model in Vue-setup

[oskarpyke]

Dear ml5 community,

I'm submitting a new issue. Please see the details below.

→ Step 1: Describe the issue 📝

I'm trying to load a pre-trained CharRNN model into my Vue project, but it looks like the JSON isn't being read properly. There's probably some kind of webpack asset management problem, but the error message doesn't give me a lot of elbowroom for troubleshooting:

localhost/:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.r.onload (webpack-internal:///./node_modules/ml5/dist/ml5.min.js:207)

This is the code in question:

   17<template>
   16   <div id="app"></div>
   15 </template>
   14
   13 <script>
   12 import ml5 from "ml5";
   11
   10 export default {
    9   name: "App",
    8   methods: {
    7     getPrediction(text) {
    6       console.log('retrieving prediction!')
    5       const rnn = ml5.charRNN("./assets/models/mymodel/", () => {
    4         console.log("module loaded");
    3       });
    2       console.log('state', rnn.state)
    1       rnn.generate({ seed: text }, (res, err ) => {
  18
    1         console.log('generation complete')
    2         console.log(res, err)
    3       });
    4     },
    5   },
    6   mounted() {
    7     this.getPrediction('The meaning of life is')
    8   },
    9 };
   10 </script>

[bomanimc]

Thanks @oskarpyke for sharing this issue and some of the code in question. I agree with your confusion, and it'd be great o have your help in addressing this since I haven't worked with Vue. Could you possibly point me to a repo/REPL for your Vue project or a minimal example that I can use to test and debug this?

[sidneykingsley]

@bomanimc Hello, I've also found this error trying to do a similar thing. Would you be able to help?

[sidneykingsley]

A solution to this issue that I found is to place the model folder in the 'public' folder and then link to it naturally from your Vue component.

For example:

Link your trained model weights like this: const rnn = ml5.charRNN('/ml5-model/', () => {console.log('Model loaded')})

Rather than this: (how one might think to link it as it is in a separate folder to 'src') const rnn = ml5.charRNN('../../public/ml5-model/', () => {console.log('Model loaded')})