如何在反应网络应用程序中加载 tensorflow.js 模型？

Question

我正在开发一个 React 网络应用程序（在 Typescript 中），我想在其中加载一个 tensorflow.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 is not a function.

所以我也尝试了一个使用 promise 的包装函数（正如我在中看到的）：

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

但承诺似乎永远不会解决并给了我：

TypeError: Cannot read property 'predict' of undefined

我不确定我做错了什么，或者我不明白什么。我希望你们能指出这里出了什么问题。谢谢！

Answer 1

我发现我的包装器想法是多么愚蠢，现在不是在构造函数中而是在 ComponentDidMount 中加载模型，这就成功了！

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

如何在反应网络应用程序中加载 tensorflow.js 模型？

How to load a tensorflow.js model in a react web app?

javascript

async-await

typescript

reactjs

tensorflow.js