I want to send the text variable qpart_04 to a chatbot via API and then output the bot’s response in a text field in ActivePresenter. The following JS code works if I insert the API key and the bot ID (tested via RunJS - JavaScript Playground | Run JavaScript Online). However, when I run it via ActivePresenter in the preview, I get an error message (“localhost:30068 Error parsing the presentation”):
const myHeaders = {
‘Api-Key’: ‘{API_KEY}’,
‘Content-Type’: ‘application/json’,
};
const myBody = JSON.stringify({
botId: ‘{BOT_ID}’,
messages: [
{
role: ‘user’,
content: ‘Hi’,
},
],
temperature: 0.1,
});
const requestOptions = {
method: ‘POST’,
headers: myHeaders,
body: myBody,
redirect: ‘follow’,
};
const response = await fetch(‘https://api.tinytalk.ai/v1/chat/completions’, requestOptions);
if (!response.ok) {
const errorData = await response.json();
throw Error(errorData.message);
}
const data = response.body;
if (!data) {
// handle behaviour
}
const reader = data.getReader();
const decoder = new TextDecoder();
let done = false;
while (!done) {
const { value, done: doneReading } = await reader.read();
done = doneReading;
const chunk = decoder.decode(value);
// Log the chunk of data received from the server until we are done
console.log(chunk);
}
Furthermore, I don’t know how to display the bot’s response in a text field in ActivePresenter. The bot delivers text chunks. Is it possible to output these chunks one after the other in a text field, or do the chunks first have to be combined into an overall response using a JS script and assigned to another text variable?
Please try putting your current script into an async function and call that function.
async function myFunc() {
// original code...
}
myFunc();
Is it possible to output these chunks one after the other in a text field, or do the chunks first have to be combined into an overall response using a JS script and assigned to another text variable?
Both ways are OK, @mattrick
You are using JS script, so use the text() function of the object to set it, there is no need to use variables.
For example, add text chunk to object:
var textField = prez.object('text field name');
textField.text(textField.text() + chunk);
the first part with the async function works - thank you very much!
Unfortunately, I don’t quite understand the second part yet. I have a text field on a slide, and the bot’s response should be displayed in this field. I don’t know where to put the code you suggested:
var textField = prez.object(‘text field name’);
textField.text(textField.text() + chunk);
… … …
const chunk = decoder.decode(value);
// Log the chunk of data received from the server until we are done
console.log(chunk);
var textField = prez.object(‘Textfeld_19’);
textField.text(textField.text() + chunk);
}
}
myFunc();
I would like to output the answer in Textfeld_19 on a slide. It does not work via %textField%. The text field remains empty in the preview.
Please open your browser’s Developer Tools (F12) and navigate to the Console tab to check if the text chunk appears in the logs.
If it doesn’t show up, your script may not receive data from the server.
I would like to output the answer in Textfeld_19 on a slide.
If you see it, check the object name to see if you typed it correctly. Maybe the letter “i” is missing.
Thank you for your reply. The browser console shows me the error that the variable qpart_04 is not defined in the JS script. In ActivePresenter I have defined qpart_04 as a text variable, and it is also assigned a specific text. However, the JS script does not seem to process this value.
If I replace qpart_04 with the text “Hi” in the script, the script runs. However, in the text field in which the bot’s response is to be output, I then receive the chunks one after the other - combined with additional data.
Here is the complete code again:
async function myFunc() {
const myHeaders = {
‘Api-Key’: ‘{API_KEY}’,
‘Content-Type’: ‘application/json’,
};
const myBody = JSON.stringify({
botId: ‘{BOT_ID}’,
messages: [
{
role: ‘user’,
content: qpart_04,
},
],
temperature: 0.1,
});
const requestOptions = {
method: ‘POST’,
headers: myHeaders,
body: myBody,
redirect: ‘follow’,
};
const response = await fetch(‘https://api.tinytalk.ai/v1/chat/completions’, requestOptions);
if (!response.ok) {
const errorData = await response.json();
throw Error(errorData.message);
}
const data = response.body;
if (!data) {
// handle behaviour
}
const reader = data.getReader();
const decoder = new TextDecoder();
let done = false;
while (!done) {
const { value, done: doneReading } = await reader.read();
done = doneReading;
const chunk = decoder.decode(value);
// Log the chunk of data received from the server until we are done
console.log(chunk);
var textField = prez.object(‘Textfeld_19’);
textField.text(textField.text() + chunk);
}
}
myFunc();
So the bot itself is working correctly: I send the message “Hi” and receive the response “Hi! How can I help you study today?” (In German: Hallo! Wie kann …)
So what does not work is the transfer of the value of qpart_04 to the script and the output of the answer in the text field.
You can use prez.variable('qpart_04') to get value.
About getting the text response from the server is up to you. It is not related to ActivePresenter, @mattrick
You can see doc of that API yourself to extract text from response.
Thank you for your last hint. This has solved my problem in conjunction with a modified script. The script now does not output chunks, but the complete response:
// This is the message that the bot sends
const message = result.choices[0].message.content;
console.log(message);
var textField = prez.object(‘Textfeld_19’);
textField.text(textField.text() + message);
}
myFunc();
With this script, it is now possible to create flashcards with ActivePresenter where students receive AI feedback. So I ask questions and let students answer them. Instead of simply showing students the correct and static answer, they receive individualized AI feedback.