Execution `worker.recognize` repeatedly causes "Out of Memory" error in JSFiddle about tesseract.js

[Balearica]

Edit: This explanation is not the root cause for this user, however it may be useful for other users experiencing an 'out of memory' error. See comments below.

Copying the code from the JSFiddle below for the benefit of other users, as opening will indeed freeze/crash the page.

let worker
let i=0;
const x = 50;
const image = document.querySelector('img');
async function OCRImageByTesseract() {
  i++;
  if (i%x==0) {
    worker = worker || await Tesseract.createWorker('eng');
    const result = await worker.recognize(image.src);
    console.log(i/x, result)
  }
    requestAnimationFrame(OCRImageByTesseract)
}
// loop start;
requestAnimationFrame(OCRImageByTesseract);

Short answer: I believe this would be resolved by switching to using a scheduler rather than using worker.recognize. The basic syntax for schedulers is explained here, and there is a scheduler example in the examples directory.

Longer answer: I believe this issue is due to the fact that this code sends new jobs to the worker before the previous job is completed. Workers have no mechanism for queuing jobs--workers were written with the assumption that a new worker.recognize function would not be run until the previous call to worker.recognize completed. Support for running jobs asynchronously and/or in parallel was added later with the addition of schedulers. As a result, Tesseract.js behaves in unexpected and undesirable ways when this is not the case. This was recently discussed in #875.

[Balearica]

You're right, my original explanation was incorrect. I was unfamiliar with the requestAnimationFrame function, however it looks like calling that function is the equivalent of just calling OCRImageByTesseract once. Therefore, this snippet is waiting for worker.recognize to finish before running it again.

I do not know why this code is causing the page to crash in JSFiddle, however I now suspect the issue is with JSFiddle rather than Tesseract.js. I was unable to replicate this issue outside of JSFiddle, even when copy/pasting the exact code from the JSFiddle that crashes.

If you are able to replicate this problem using a standard web server, please create a repo with a reproducible example, or alternatively paste an HTML snippet that can be run as a single-file site, and I can look into it further. If the issue cannot be replicated anywhere outside of JSFiddle, then the issue should be raised with that project.

[horihiro]

I checked same code on CodePen, but this issue cannot be reproducible.
So this might be depends on JSFiddle as you suspected.

[horihiro]

Thank you @Balearica
Let me confirm one thing.

Doesn't the below code using await wait until finishing worker.recognize though the return value is assigned to result?

const result = await worker.recognize(image.src);

What I want to do is just executing worker.recognize repeatedly, not parallel execution.

[horihiro]

Thank you @Balearica !
I will check if the issue can be reproducible except on JSFiddle