javascript - 为了继续使用 Tensorflow.js 进行预测，在 Vue.js 实例中有一个无限循环是错误的吗？

Question

我使用 Tensorflow.js 训练和预测食物，使用 Web API 访问我的笔记本网络摄像头，使用 Vue.js 创建一个简单的页面。

我在 addExample() 方法中有一个无限循环，即 while(true)，它负责要求模型预测我前面的内容网络摄像头每一帧并重新渲染结果。

我想知道在我的 Vue 实例中的方法内部是否存在无限循环的问题。

async addExample() {
  const selector = document.getElementById('classSelector');
  const player = document.getElementById('player');

  // Get the intermediate activation of MobileNet 'conv_preds' and pass that
  // to the KNN classifier.
  const activation = this.net.infer(player, 'conv_preds');

  // Pass the intermediate activation to the classifier
  this.classifier.addExample(activation, selector.selectedIndex);

  console.log("Class '" + selector.value + "' added to the model");

  while (true) {
    if (this.classifier.getNumClasses() > 0) {
      const activation = this.net.infer(player, 'conv_preds');

      const result = await this.classifier.predictClass(activation);
      this.confidence = result.confidences[result.classIndex];
      this.label = this.foodClasses[result.classIndex].name;
    }
    await tf.nextFrame();
  }
}

当我点击训练按钮时，这个方法被触发，但在方法内部它一直在无限循环中。但每次我需要训练同一个对象或一个新对象时，我都必须再次触发该方法，这导致再次进入同一个循环 - 但我认为旧的一直在运行。

<button type="button" @click="addExample()">Train class</button>

如果您想查看运行中的代码，这里是 fiddle

已编辑:感谢您的回答。我能够以我期望的方式解决我的问题。现在，当我触发 addExample() 函数时，我只有一个循环在运行，而不是让旧循环运行。我这么说是基于对我在任务管理器中的 GPU 利用率百分比的非常浅薄的分析。

以旧方式，当我多次触发 addExample() 时，我可以看到 GPU 利用率越来越高。

现在，利用率百分比只增加了一倍。

这是最终代码:

async addExample() {
  const selector = document.getElementById('classSelector');
  const player = document.getElementById('player');
  this.infiniteLoopControler += 1;
  const internalLoopControler = this.infiniteLoopControler;

  // Get the intermediate activation of MobileNet 'conv_preds' and pass that
  // to the KNN classifier.
  const activation = this.net.infer(player, 'conv_preds');

  // Pass the intermediate activation to the classifier
  this.classifier.addExample(activation, selector.selectedIndex);

  console.log("Class '" + selector.value + "' added to the model");

  while (internalLoopControler === this.infiniteLoopControler) {
    if (this.classifier.getNumClasses() > 0) {
      const activation = this.net.infer(player, 'conv_preds');

      const result = await this.classifier.predictClass(activation);
      this.confidence = result.confidences[result.classIndex];
      this.label = this.foodClasses[result.classIndex].name;
    }
    await tf.nextFrame();
  }
}

再次感谢您对我的帮助!

Answer 1

在(无限)循环中使用 await 没有错。使用 await 比使用 .then 更好，因为引擎不需要收集堆栈跟踪。有关更多信息，请查看这些主题:

• > Memory leak in nodejs promise design? (计算器)
• > Asynchronous stack traces: why await beats Promise#then() (V8 开发人员的博文)
• > Building a promise chain recursively in javascript - memory considerations (计算器)

---

如果您需要一种在循环开始后停止循环的方法(再次单击按钮时)，您可以简单地更改循环以检查当前处于事件状态的迭代。

代码示例

let iteration = 0;

async function addExample() {
  iteration += 1;
  const myIteration = iteration;
  while (myIteration === iteration) {
    // ...
  }
}

这是一个(非常)简化的例子。每次调用 addExample 时，iteration 变量都会增加并存储当前的迭代运行。第二次单击该按钮时，将不再满足第一次迭代的条件，(第一次)循环将停止。