Sending a request to the Create Image API to create an AI-generated graphic requires exactly the same process to be followed in Articulate Storyline to set up your Execute JavaScript command to trigger at the exact moment that you wish it to, except this time we will be using a different code snippet.

Here is a basic example containing a simple prompt to generate a photograph of a subject which the user has typed (e.g. by typing into a text entry field which places what has been typed into a text variable named ‘StorylineTextVariable’):

var player = GetPlayer();
const userpromptvalue = "Create a photographic image of: " + player.GetVar('StorylineTextVariable');

var sendData = {
    'nonce': parent.storylineMagicNonce,
    'value': userpromptvalue,
    'api': 'imageGeneration',
};

sendData = JSON.stringify( sendData );

const myHeaders = new Headers();

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

async function openai_req() {

  fetch(parent.storylineMagicEndpoint, {
      method:'POST',
      headers: myHeaders,
      body: sendData
  })

  .then(res => res.json())
  .then(data => {
    if ( Object.prototype.hasOwnProperty.call(data.data, 'data') && Object.prototype.hasOwnProperty.call(data.data.data, 'data') ) {
        var apiReturnedImage = data.data.data.data[0].url;
        apiReturnedImage = apiReturnedImage.trim();
        player.SetVar("StorylineVariableToStoreImgURL",apiReturnedImage);
    }else{
        console.error('Error fetching data:', error);
    }

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

openai_req();

The end result of this script once an image has been generated is that a URL for where the image can be accessed will be returned and stored to a Storyline text variable, in the case of the example above this will be saved as StorylineVariableToStoreImgURL.

Unlike text responses from the ChatGPT API, we cannot simply load the image into a published activity to be displayed to the user on the slide.

In order to accomplish this we must go through a process of replacing an existing image, already contained on a slide within our activity, to essentially swap out the source URL of the original image with the new URL generated by the Create Image API.

To do this, follow the steps below which are also demonstrated in this video:

Step 1 – Add a blank image to your slide/layer which is the same dimensions as the image being generated (e.g. 512x512px)

If you need a blank PNG (fully transparent) image file to use in your project you can download one we created ourselves here – LINK

Step 2 – Add an Alternative Text value to the image

Right click on the image and open the Accessibility options. Here write an Alternative Text value into the box shown, and make sure the ‘Object is visible to accessibility tools’ tickbox is checked.

Tip – It is good practice to use this box to write alt text value relating to the image intended to be displayed, just make sure that you use no spaces or underscores between words if possible.

Step 3 – Create an Execute JavaScript command to trigger when the slide/layer containing the dynamically generated image will be opened

Into this Execute JavaScript script window, paste the following code snippet:

var player = GetPlayer();
var imgsrc = player.GetVar("StorylineVariableToStoreImgURL");

var container = document.querySelector('[data-acc-text="mypic"]');
var imgElem = container.getElementsByTagName('image')[0];
imgElem.setAttribute("xlink:href", imgsrc);

This code snipped will find the image element on the slide based on the Alt Text value that you applied in the previous step, and then replace the image source value with the URL that was generated by the Create Image API.

Step 4 – Show the slide/layer only when the dynamically generated image has been created

In order to prevent the slide/layer designed to display the dynamically generated image from being shown to the user too early, you can use a trigger in Storyline to show the slide/layer but only at the moment where the StorylineVariableToStoreImgURL variable has a URL value in place to work with.

For example, your trigger may look something like this:

In this case the layer containing the image itself will only be displayed to the user once the variable containing the URL value needed is no longer empty.

Read the rest of our Knowledge Base pages to make the most of eLearning Magic Toolkit.