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

One of the special features of the Stability AI image generation platform is the ability to perform ‘Outpainting’ of an image. This will effectively expand upon the border of an original image in order to display a zoomed out area containing the original image and more detail as generated by the AI.

You can perform this action using the following code example in Articulate Storyline as an Execute JavaScript trigger:

const imgURL = "http://mywebsite.com/wp-content/uploads/stability-img/stabilityoutpaintingimg.png"; //Update this URL with the address of an image that has been uploaded to your WordPress website.
const instruct = "A modern office area with string lights across the ceiling and office plants." //Update with details of what the outpainted area of the image should contain.
const creativity = 0.5; //A value between 0 and 1. 0.5 provides the most stable result.
const leftPixelExpand = 1600; //Update based on pixel value of final image, for example 1280x720 would expand the image in this case by 320px.
const rightPixelExpand = 1600;
const topPixelExpand = 900;
const bottomPixelExpand = 900;

async function urlToBase64(url) {
const response = await fetch(url);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result.split(',')[1]);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}

async function stability_req() {
try {
const base64Image = await urlToBase64(imgURL);
const sendData = JSON.stringify({
'image': base64Image,
'left': leftPixelExpand,
'right': rightPixelExpand,
'top': topPixelExpand,
'bottom': bottomPixelExpand,
'prompt': instruct,
'creativity': creativity,
'nonce': parent.storylineMagicNonce
});

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

const response = await fetch(parent.storylineMagicEndpointStabilityOutpaint, {
method: 'POST',
headers: myHeaders,
body: sendData
});

if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP error! status: ${response.status}, response: ${errorText}`);
}

const data = await response.json();
setVar("imageurl", data); //Use the image URL provided in order to load the image back into Storyline, or to share via another method using your WordPress website.
console.log('Image URL:', data);

} catch (error) {
console.error('Error fetching data:', error);
}
}

stability_req();