Adding Chat GPT functionality to Storyline

Easy solution is creating a Google Cloud function ( NodeJS ) that you can call for a OpenAI request. Then it is secure and works well.

The code listed below works when using it directly in either Lectora or Storyline. For Storyline you would need to change several lines. Especially you need to change the getting and setting of variables....and the aiBearer is offcourse your own key. But using it like this ISNOT SAFE !

/*
OpenAI API related functions
*/

function setAIsettings(){

aiCompletions = "https://api.openai.com/v1/chat/completions";
DALEurl = "https://api.openai.com/v1/images/generations";
aiModel = VaraiModel.getValue(); // Lectora variable
aiBearer ="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Bearer code from OpenAI
aiInstructions = VaraiInstructions.getValue(); // Lectora variable
console.log("instruct: "+aiInstructions);
inlineQuestion = VarinlineQuestion.getValue(); // Lectora variable

chatMessages = [
{role: "system",content: aiInstructions },
{role: "user", content: inlineQuestion },
];
OpenAIArray.push({role: "system",content: aiInstructions });

window.localStorage.setItem('AIcalls', JSON.stringify(OpenAIArray));
}

function OpenaiFetchAPI() {
console.log("Calling OpenAI and getting localStorage");
/*
For history in chatGPT we use localStorage.
So we first get all previous questions and then we create a new 'message' for chatGPT
*/

savedQuestionsArray = JSON.parse(window.localStorage.getItem('AIcalls'));
console.log("savedQuestions "+savedQuestionsArray);
inlineQuestion = VarAIprompt_01.getValue();// Variable in your tool. This is for Lectora. Storyline uses other syntax
savedQuestionsArray.push({role: "user", content: inlineQuestion });
window.localStorage.setItem('AIcalls', JSON.stringify(savedQuestionsArray));

var url = aiCompletions;
var bearer = 'Bearer ' + aiBearer;
fetch(url, {
method: 'POST',
headers: {
'Authorization': bearer,
'Content-Type': 'application/json'
},
body: JSON.stringify({
messages:savedQuestionsArray,
max_tokens: 1000,
temperature: 1,
model:aiModel,
top_p: 1,
n: 1,
stream: false
})

}).then(response => {

return response.json();

}).then(data=>{
console.log(data);

console.log(data.choices[0].message.content);

AIresponse = data.choices[0].message.content;
console.log("response: "+AIresponse);
showResults();

})
.catch(error => {
console.log('Something bad happened ' + error);
});

}

/*
To ensure AI remembers questions and answers given we use LocalStorage
*/

function setLocalStorage(_arr){
window.localStorage.setItem('AIcalls', JSON.stringify(_arr));
}
function getLocalStorage(){
let tmpArray = JSON.parse(window.localStorage.getItem('AIcalls'));
return tmpArray;
}
function clearLocalStorage(){
window.localStorage.clear();
}

Do remember you have to change these things. It will not work just copying and pasting.

When you have this code setup properly, you can set your variables. Then call setAISettings( ); on start of a slide... and then when a user asks a question...fill the variable 'inlineQuestion' and call OpenAIFetchAPI( );

The function showResults( ) does exactly what it says ;-)