Search code examples
angularweb-workertensorflow.js

Use Web Worker to execute model.predict of tensorflowjs - Angular 11


I'm trying to execute the model.predict function inside a web worker and I can't find anywhere how can I import Tensorflowjs inside the web worker.

I can use the importScripts('cdn') but how can I reference to tensorflow to use it's functions?

This is the code up until now:

worker.js

/// <reference lib="webworker" />
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js');

addEventListener('message', async ({ data }) => {
  const model = data.model;
  const pred = await model.predict(data.tensor);
  postMessage(pred);
});

service.ts

predict() {
   if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('../workers/model.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(Array.from(data.dataSync()));
  };
  worker.postMessage({tensor, model: this._model});
  } else {
    // Web Workers are not supported in this environment.
    // You should add a fallback so that your program still executes correctly.
  }
}

Solution

  • The data exchanged between the main worker and child workers whould be serializable. Therefore, you cannot pass the model itself nor a tf.tensor. You can on the other hand pass the data and construct the tensor in your workers.

    For the compiler to know that you imported a global variable, you need to declare tf

    declare let tf: any // or find better type