How To Request An Image With Background Transparency Using Stability In Storyline

How To Request An Image With Background Transparency Using Stability In Storyline

The image generation code to using in your Execute JavaScript trigger in Articulate Storyline 360 provides a setting named ‘removeBackground’ which you can change from NO to YES of you wish for the returned image URL in the final step of the script to be generated without background.

The background removal takes place entirely on the Stability AI platform side, and results may vary depending on the type of image and the quality of the foreground and background elements in the scene.

We would recommend setting up some additional prompt information to wrap around the request which the user may have typed in your Storyline experience, by writing a custom ‘userPromptValue’ variable to act as the value sent as the final prompt to the Stability AI platform.

In the example below, we are sharing the prompt that was used to ultimately create the transparent fluffy cloud shapes effect that you can see in our demo. (See video below.)

You will notice that we specifically request for the background to be generated as a solid colour, thus providing the AI with a chroma key to more effectively remove the background as sharply as possible around the edge of the cloud.

let userTypedValue = getVar("UserRequest");

const userPromptValue = userTypedValue + ", made entirely out of white fluffy cotton wool. Set against a solid blue background. There is only white cotton wool in the image. No other real world objects or shapes. The outline of the shape is clearly" + userTypedValue + ". No other colour is included other than the cotton wool.";
const imageRatioSetting = "16:9"; //Choices are 16:9, 1:1, 21:9, 2:3, 3:2, 4:5, 5:4, 9:16, 9:21
const removeBackground = "YES"; // YES or NO 


let sendData = {
  'nonce': parent.storylineMagicNonce,
  'prompt': userPromptValue,
  'aspect_ratio': imageRatioSetting,
  'remove_background': removeBackground
};

sendData = JSON.stringify(sendData);

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-WP-Nonce", parent.storylineMagicRestNonce);

async function stability_req() {
  try {
    const response = await fetch(parent.storylineMagicEndpointStability, {
      method: 'POST',
      headers: myHeaders,
      body: sendData
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    //console.log('Image URL:', data);
    setVar("ReturnedImageURL", data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

stability_req();

Though not always completely perfect, depending on how you ultimately blend the returned image onto your slide in Storyline can help to mask any imperfections (e.g. in our case the cloud is being displayed over the top of a blue sky image.)