Как загрузить модель tenorflow.js в реагирующее веб-приложение? - PullRequest
Новая
       7

Как загрузить модель tenorflow.js в реагирующее веб-приложение?

0 голосов
/ 11 января 2019

Я работаю над веб-приложением React (в Typescript), в котором я хочу загрузить модель tenorflow.js, а затем применять ее каждый раз после обновления компонента. Я смог загрузить и применить свою модель в небольшом демонстрационном приложении без React, но теперь столкнулся с некоторыми проблемами с функцией асинхронной загрузки:

Моя идея состояла в том, чтобы загрузить модель в конструктор компонента, но асинхронную функцию нельзя использовать в конструкторе. Поэтому я попытался создать своего рода функцию-обертку: 

export default class MyGreatComponent extends React.Component<{pixels}> {
  model;
  constructor(props) {
    super(props);
    this.model = this.loadmodel('http://localhost:3333/model.json');
  }

  async loadmodel(p: any) {
    try {
      const model = await tf.loadModel(p);
      return model;
    } catch (error) {
      console.log("error while loading model: ");
      console.log(error);
      return error;
    }
  }
...
}

А потом, когда компонент обновится и я захочу применить модель: 

componentDidUpdate() {
      ... // get data etc
      const t4d = tf.tensor4d(imgarray_n, [1, width, height, 3]);
      var prediction : any = this.model.predict(t4d);
  }

Однако это дает:

TypeError: this.model.predict не является функцией.

Итак, я также попробовал функцию-оболочку, которая использует обещание (как я видел в этот ответ ): 

loadmodel(p: any){
    tf.loadModel(p).then(model => {
      return model;
    });
  }

Но обещание, кажется, никогда не разрешается и дает мне:

TypeError: Невозможно прочитать свойство 'предсказывать' неопределенного

Я не уверен, что я делаю неправильно или что я не понимаю. Я надеюсь, что вы, ребята, можете указать, что здесь происходит не так. Thnx!

1 Ответ

0 голосов
/ 11 января 2019

Я понял, насколько глупа была моя идея обёртки, и теперь загружаю модель не в конструкторе, а в ComponentDidMount, и это помогло! 

async componentDidMount() {
    this.model = await tf.loadModel('http://localhost:3333/model.json');
  }
...