In my project, I am leveraging different technologies such as Tensorflow.js for training and predicting foods, Web API to access the webcam in my notebook, and Vue.js to create a simple web page.
Within the addExample() method, there is an infinite loop represented by while(true). This loop continuously prompts the model to predict the contents of the webcam frame and updates the result on each iteration.
I am curious to know if having an infinite loop inside a method within my Vue instance could potentially cause any issues.
async addExample() {
const selector = document.getElementById('classSelector');
const player = document.getElementById('player');
// Obtain the intermediate activation from MobileNet 'conv_preds' and feed it to the KNN classifier.
const activation = this.net.infer(player, 'conv_preds');
// Add the intermediate activation to the classifier along with the selected class index
this.classifier.addExample(activation, selector.selectedIndex);
console.log("Class '" + selector.value + "' has been 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 executed upon clicking the training button. Despite being triggered only once, it results in entering into an indefinite loop. Subsequent triggering of the same method seems to initiate new loops while the older ones might still be active.
<button type="button" @click="addExample()">Train class</button>
If you wish to view the actual implementation, you can access it via this link.
Update: Thank you for the suggestions provided earlier. I have managed to address my concerns effectively. Now, each time the addExample() function is triggered, it ensures that only one loop is running instead of multiple. This conclusion was drawn by monitoring GPU utilization percentages in the Task Manager.
Prior to this change, each invocation of addExample() would exhibit a gradual increase in GPU utilization percentage.
https://i.stack.imgur.com/gI1dU.jpg
Now, the percentage utilization spikes only once after initiating addExample().
https://i.stack.imgur.com/fiaCZ.jpg
The final revised code snippet is as follows:
async addExample() {
const selector = document.getElementById('classSelector');
const player = document.getElementById('player');
this.infiniteLoopControler += 1;
const internalLoopControler = this.infiniteLoopControler;
// Obtain the intermediate activation from MobileNet 'conv_preds' and pass it to the KNN classifier.
const activation = this.net.infer(player, 'conv_preds');
// Add the intermediate activation to the classifier along with the selected class index
this.classifier.addExample(activation, selector.selectedIndex);
console.log("Class '" + selector.value + "' has been 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 for your valuable assistance!