mediapipe adds <script>s to the DOM each time a task runner is created

tzahola commented 4 days ago

Every time you create e.g. an ImageSegmenter with ImageSegmenter.createWithOptions({wasmBinaryPath: ..., wasmLoaderPath: ...}) a <script> element is added to the document with wasmLoaderPath. If you later create a new instance, then another <script> is appended to the DOM. Every single time.

It would be nice if mediapipe only added a <script> to the DOM if the script in question wasn't loaded previously, thus preventing apps from accumulating many redundant nodes in their DOM.

kuaashish commented 3 days ago

Hi @tzahola,

Thank you for your observation. Could you please provide additional details or logs related to your query? Sharing the steps to reproduce the issue would also be very helpful.

tzahola commented 3 days ago

Ok. Create the following HTML page:

<html>
<head>
</head>
<body>
<script type="module">
  import {
    FilesetResolver,
    ImageSegmenter,
  } from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17';

  const button = document.createElement('button');
  button.innerText = "Create ImageSegmenter";
  button.addEventListener('click', async () => {
    const segmenter = await ImageSegmenter.createFromOptions(await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm'), {
      baseOptions: {
        modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/image_segmenter/deeplab_v3/float32/1/deeplab_v3.tflite',
        delegate: 'GPU',
      },
      outputCategoryMask: false,
      outputConfidenceMasks: true,
      runningMode: 'VIDEO',
    });
    segmenter.close();
  });
  document.body.appendChild(button);
</script>
</body>
</html>

Open it in your browser, and click the button a few times. Now check the DOM tree in the dev tools. Notice that each time you've clicked the button, another <script> element was added to <body>. They are identical, this it would be enough to add it only once. This is the bug.

google-ai-edge / mediapipe

mediapipe adds <script>s to the DOM each time a task runner is created #5697