How To Request An Image Resolution Be Upscaled To Increase Its Visual Quality

Thanks to the powerful integration with Stability AI, the eLearning Magic Toolkit plugin allows developers to automatically enhance the visual quality of images used within Articulate Storyline 360 projects. This is particularly useful when working with lower-resolution assets that need to be refined for a more polished, professional finish.

Using a combination of prompt-based AI enhancement and advanced upscaling technology, developers can trigger an upscaling request directly within their Storyline experience. The JavaScript example shown below demonstrates how to convert an existing image into a base64 format, send it to the Stability AI platform with a tailored prompt and creativity setting, and return a high-resolution version of the image – all while preserving integration with Storyline variables for seamless visual updates in real-time.

This capability, along with many other special image enhancement features which Storyline developers can take advantage of using our toolkit, further increases the scope of sophisticated AI applications that developers can produce using Articulate Storyline 360.

Here is an example code which uses an image contained within the WordPress site’s wp-content/uploads folder:

const imgURL = "https://mywebaddress.com/wp-content/uploads/stability-img/spacecrew.png";
const instruct = "An editorial photograph of a futuristic space crew walking across a colourful alien planet's rocky terrain."
const creativity = 0.4;

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,
                   '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.storylineMagicEndpointStabilityUpscale, {

     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);
console.log('Image URL:', data);

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

stability_req();