So, dev/devs thank you very much for this implementation!

It took me some time to make it work on generator but glad to make it happen.

Though I wonder, when will be the ‘official’ implementation for it. Cause I am not that good at coding so with some help, I manage to push the update on my own generator with some framework editing!

I guess I don’t need to edit framework and plugin itself but I did it anyway.

Any updates would be amazing, thank you very much for this!

  • tlgklxzOP
    link
    fedilink
    English
    arrow-up
    1
    ·
    5 months ago
    <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.