Is it wrong to have an infinite loop inside Vue.js instance in order to keep making predictions using Tensorflow.js?

Question

I'm using Tensorflow.js to train and predict foods, the Web API to access my notebook webcam and Vue.js to create a simple page.

I have an infinite loop inside the addExample() method, the while(true), which is responsible for asking the model to predict what is in front of my webcam every frame and re-render the result.

I'd like to know if there is a problem in having an infinite loop inside a method in my Vue instance.

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();
  }
}

This method is triggered when I click the training button, but inside the method it stays in infinite loop. But everytime I need to train the same object or a new one, I have to trigger the method again, which results in entering again in the same loop - but I think the old one keeps running.

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

In case you want to see the code in action, here is a fiddle

Edited: Thank you for the answers. I was able to solve my problem in the way I was expecting. Now, when I trigger the addExample() function, I have only one loop running, instead of having the old ones. I'm saying this based on a very shallow analysis of my GPU utilization percentage in the Task Manager.

In the old way, when I triggered addExample() more than one time, I could see the GPU percentage utilization raising more and more.

Now, the percentage utilization increases only one time.

This is the final code:

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();
  }
}

Thank you again for helping me!

Answer 1

A simple way to remove the while(true) is to use recursion instead.

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");


  const cb = () => {
    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;
    }
    tf.nextFrame().then(cb);
  }

  cb();
}

Answer 2

There is nothing wrong with using await inside a (infinite) loop. It is even better to use await than using .then as the stack trace does not need to be collected by the engine. For more information check out these topics:

• Memory leak in nodejs promise design? (Stackoverflow)
• Asynchronous stack traces: why await beats Promise#then() (Blog post by a V8 developer)
• Building a promise chain recursively in javascript - memory considerations (Stackoverflow)

---

If you need a way to stop the loop after it was started (when the button is clicked again), you could simply change your loop to check which iteration is currently active.

Code Sample

let iteration = 0;

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

This is a (very much) simplified example. Each time addExample is called the iteration variable is increased and the current iteration run is stored. When the button is clicked a second time, the condition of the first iteration will not be met anymore and the (first) loop will stop.