ml5.js tf.js featureExtractor addImage memory leak WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

Question

images resolution is 100x100, on image ~900 (based on memory load) screen become black and error appear: Couldn't parse line number in error: WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

<html>
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://unpkg.com/ml5@latest/dist/ml5.min.js"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <script>
        /* ===
      ml5 Memory Leak Example
      === */

      //init
      base64Images = [  "data:image/png;base64,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"
      ];

      curImg = 0;
      imgCount = 1000;

      //ml5
      featureExtractor = ml5.featureExtractor("MobileNet", function () {
        classifier = featureExtractor.classification();

        addSamplesEach();
      });

      //add samples loop
      function addSamplesEach() {
        if (curImg >= imgCount) {
          return;
        }

        let img = new Image();
        img.crossOrigin = "Anonymous";

        img.onload = function () {
          console.log('added...')

          const img = this;

          classifier.addImage(img, "label", function () {
            curImg++;
            addSamplesEach();
          });
        };

        img.src = base64Images[0];
        img = null;
      }
    </script>
  </body>
</html>

the only working solution I found is turn off — Use hardware acceleration when available in Chrome

ml5.tf.setBackend("cpu"); — also works in same way

another useful thing was ml5.tf.ENV.set('WEBGL_PACK', false); — adding images become really fast, but memory leak still persist and this didn't solved issue :(

it looks like problem somewhere inside imageUtilities.js

function imgToTensor(input, size = null) {
  return tf.tidy(() => {
    let img = tf.browser.fromPixels(input);
    if (size) {
      img = tf.image.resizeBilinear(img, size);
    }
    const croppedImage = cropImage(img);
    const batchedImage = croppedImage.expandDims(0);
    return batchedImage.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
  });
}

as I understand from this tf.tidy should do all good memory cleaning things in background, but it didn't...

maybe someone know how to force to clean memory without loosing progress on adding data to model?

ml5.js tf.js featureExtractor addImage memory leak WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

0 Answers0