Training in browser with TFJS and WebGL in background

Hello, I am trying to train a neural network in the background (or in a tab that is not active).
I am using TFJS (3.11) with React and Ionic to deploy it also for mobile. The training works without problem when the tab of the browser is in foreground or the app is on the foreground with the screen on for the mobile.
When I switch to another tab on the browser or when I turn off the screen of the mobile the training stops. When I go back to the app/web-app the training resumes from where it froze.

Is there a way to keep the app training even when it is moved to the background?

Right now I am trying with web-workers but I am facing some issues with React and I am not guaranteed that it will work.

Best regards,
Nelu

This is a browser level detail. You do need to have the tab visible on the screen to get processing resource allocated to the tab.

As this is implemented at Browser level it is not something TensorFlow.js can change. The reason for this is that many people have tens of tabs open, if all tabs could have unlimited processing your computer would fast come to a halt or use battery for laptop/mobile pretty fast. Thus only active tabs are given most resources.

As you mentioned, Web Workers at the domain level may be a good bet here. Not sure what the problem with React is, as I am a vanilla JS guy myself, but WebWorkers are well supported at the browser level:

Remember you do not have DOM access in web worker, so you will need to stream data to it if you are taking data from say webcam or something, process, and stream back without using DOM elements.

Thus you would also need offscreen canvas support for WebGL acceleration I believe, which is not well supported on iOS / Safari / Firefox:

More details in this blog:

Also we discovered recently that WebGL on WebWorker will still block main GUI:

We have found a potential fix for this but not pushed live yet. This is due to how the GPU is shared on the browser and again is not TFJS issue itself, but we found a workaround for now.

I assume this will gain support over time, but still relatively new right now, in which case you may want to force Web Assembly backend instead:

2 Likes

Thank you very much for your reply.
I managed to implement my solution with web workers, and I can confirm that for the browser web app works as intended (even with WebGL) and continues training even when the tab isn’t in the foreground (I am using Edge).
I am still facing issues with the Mobile Ionic App, but I don’t think it is related to TFJS. I will try also with the WASM backend.
Thank you again to your reply

1 Like

Great to hear! If you are feeling in the mood at some point it would be great to see a blog post or tutorial on your experience here as I am sure others are starting to think about similar things for their own web apps and curious about how others did it. You can shine some light here, I have seen a few folk asking similar questions.