Background removal tool - discussion

<script>
(function() {
  function startBgRemovalWatcher() {
    var outputArea = document.getElementById('outputAreaEl');
    if (!outputArea) {
      setTimeout(startBgRemovalWatcher, 800);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      if (window.input?.removeBackground !== "true") return;

      mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType !== 1) return;

          var iframes = [];
          if (node.tagName === 'IFRAME') {
            iframes.push(node);
          } else {
            iframes = Array.from(node.querySelectorAll('iframe'));
          }

          iframes.forEach(function(iframe) {
            if (iframe._bgHandled) return;
            iframe._bgHandled = true;

            var ctn = iframe.closest('.t2i-image-ctn') || iframe.parentElement;
            ctn.style.position = 'relative';

            var attempts = 0;
            var maxAttempts = 240;
            var poll = setInterval(function() {
              attempts++;

              var out = iframe.textToImagePluginOutput;
              if (out && out.dataUrl) {
                clearInterval(poll);

                var img = document.createElement('img');
                img.src = out.dataUrl;
                var iframeRect = iframe.getBoundingClientRect();
                img.style.cssText = 'display:block; border-radius:3px; width:' + iframeRect.width + 'px; height:' + iframeRect.height + 'px; object-fit:contain;';

                if (out.dataUrl.startsWith('data:image/png')) {
                  img.style.background =
                    'repeating-conic-gradient(#888 0% 25%, #fff 0% 50%) 0 0 / 20px 20px';
                }

                iframe.style.display = 'none';
                iframe.parentElement.insertBefore(img, iframe);

                console.log('[BG Removal] Done! Displaying PNG.');
              }

              if (attempts >= maxAttempts) {
                clearInterval(poll);
                console.warn('[BG Removal] Timed out.');
              }
            }, 1000);

          });
        });
      });
    });

    observer.observe(outputArea, { childList: true, subtree: true });
    console.log('[BG Removal Watcher] Active and watching outputAreaEl.');
  }

  startBgRemovalWatcher();
})();
</script>

Forgot to post the HTML part I used. If anyone have any idea how I can add an overlay to that, I would be so happy. It's hard to make it work with an overlay! It always removes one and keeps for rest of the images.

Or if anyone needs to check: https://perchance.org/tlgklz-image Just fork it out.