如何在 React 组件中使用 deeplearn.js

Question

我目前正在使用 React 和 deeplearn.js 创建一个项目，但在将两者结合时遇到了障碍。在我的 React 应用程序中，我正在导入我用来进行分类的 this deeplearnjs library 模型。不幸的是，当我尝试调用 predict() 方法时出现以下错误：

TypeError: _this.variables is undefined

对于以下部分代码：

SqueezeNet.prototype.predictWithActivation = function (input, activationName) {
   var _this = this;
   var _a = this.math.scope(function () {
      var activation;
      var preprocessedInput = _this.math.subtract(input.asType('float32'), _this.preprocessOffset);

当我在正常的 HTML 中使用生成的 Javascript 时，它工作得很好，所以我不确定为什么我在反应中得到这个错误。我感觉这与更严格的 React 规则或 Javascript 版本控制有关，但我不确定。

谢谢！

更新

最简单的重现方法如下：

使用 create-react-app
运行 yarn add deeplearn 和 yarn add deeplearn-squeezenet

将App.js修改为：

import React, { Component } from 'react';
import {ENV, Array3D} from 'deeplearn';
import {SqueezeNet} from 'deeplearn-squeezenet';

class App extends Component {
  constructor() {
    super();
    var net = new SqueezeNet(ENV.math);
    net.load();

    var img = new Image(227, 227);
    img.src = 'boat.jpg';
    img.onload = function () {
      var pixels = Array3D.fromPixels(img)
      var res = net.predict(pixels);
    };
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default App;

将以下文件下载到 public 文件夹中：https://raw.githubusercontent.com/PAIR-code/deeplearnjs/master/models/squeezenet/cat.jpg
运行 yarn start

作为参考，我使用的是 React 16.2.0

Answer 1

您的代码可能会失败，因为某些方法调用是异步的（例如 .load()）。

以下是如何让您的示例与 React 一起工作：

使用 create-react-app
运行 yarn add deeplearn 和 yarn add deeplearn-squeezenet
将cat.jpg添加到public folder

修改App.js如下

import React, { Component } from 'react';
import { ENV, Array3D } from 'deeplearn';
import { SqueezeNet } from 'deeplearn-squeezenet';

const math = ENV.math;
const squeezeNet = new SqueezeNet(math);

class App extends Component {
  constructor() {
    super();
    this.state = {
      statusText: 'Loading Squeezenet...'
    }
  }

  buildSuggestions(obj){
    return Object.keys(obj).map(
      key => `${obj[key].toFixed(5)}: ${key}`
    );
  }

  imageLoadHandler(e) {
    const img = e.target;
    squeezeNet.load()
      .then(() => {
        this.setState({ statusText: 'Predicting...' });
        const pixels = Array3D.fromPixels(img);
        const result = squeezeNet.predict(pixels);
        this.setState({ statusText: '' });
        squeezeNet.getTopKClasses(result, 5)
          .then((obj) => {
            this.setState({ statusText: this.buildSuggestions(obj) });
          });
      });
  }

  render() {
    const text = Array.isArray(this.state.statusText)?
      this.state.statusText :
      [this.state.statusText];

    return (
      <div>
        <img src="cat.jpg"
             alt="cat"
             onLoad={this.imageLoadHandler.bind(this)}
        />
        <div id="result">
          { text.map(el => <div key={el}>{el}</div>) }
        </div>
      </div>
    );
  }
}

export default App;

然后运行yarn start

如何在 React 组件中使用 deeplearn.js

How to use deeplearn.js in a React component

javascript

node.js

reactjs

yarnpkg

deeplearn.js