Hi folks,

I want to be able to generate an image and manipulate it on the page in relation to other elements.

I know that when using the image generator we can access the dataUrl from the fulfilled Promise to get the raw image. eg.

let window.generated_images = []
...
image = {import:text-to-image-plugin}

let promptData = {
      prompt: "blah",
      negativePrompt: "Not blah",
      resolution: "512x768",
      style: "margin:0.25rem",
    };

let generator = image(promptData);

generator.then(x=>function(x){
  window.generated_images.push(x.dataUrl);
});
...
// Add all generated_images to the page by creating and adding <img> elements.
// Do some cool stuff like automatically detecting and appending images to sections depending on associated conditions.

But by doing this we lose access to a number of features which a packaged with the iframe. eg.

1. Saving to Gallery
2. Inspecting the prompt
3. "Chat With This Character" button etc.

When attempting to access the elements within the relevant iframe I get with an XSS error.

Is there anyway for me to manipulate the iframe contained image elements after they've been generated? Or to add the lost functionality back to the dataUrl images?