时间戳

首页 > 解决方案 > 如何在 React Web 应用程序中加载 tensorflow.js 模型？

javascript - 如何在 React Web 应用程序中加载 tensorflow.js 模型？

问题描述

我正在开发一个 React Web 应用程序（在 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 不是函数。

所以我还尝试了一个使用承诺的包装函数（正如我在这个答案中看到的那样）：

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

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

TypeError：无法读取未定义的属性“预测”

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

标签： javascriptreactjstypescriptasync-awaittensorflow.js

解决方案

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

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

推荐阅读