Integrating / embedding chat GPT for multiple turns

wingated · 2024-02-27T00:51:54+00:00

I’ve seen a bunch of people asking about how to embed chat GPT into a qualtrics survey. I managed to construct a working version of a multi-turn interaction with chatGPT, and so I’m posting the code here. Hopefully it helps someone.The basic idea is to dynamically alter properties in the webpage, including adding custom buttons and changing the question text. You can see a demo of the survey here. Because of the way that it directly alters various webpage properties, I’m quite sure that it will break easily. For example, I don’t know what happens if you have multiple questions on the same page. There be dragons there.The results of the conversation get stored in an embedded field.I just created a single question with a text area answer, and then dropped this code into the question’s “addOnLoad” method. // this question will drop a JSON version of the conversation into this embedded data locationconst EMBEDDED_DATA_DEST = "convo_history";// adjust as neededconst OPENAI_API_KEY = "Bearer XXX-PUT-YOUR-API-KEY-HERE-XXX";const OPENAI_ENDPOINT = "https://api.openai.com/v1/chat/completions";const OPENAI_MODEL = 'gpt-4';// after this many turns, the conversation will be disabled and the respondent will be able to advance to the next questionconst MAX_TURNS = 6;//// ----------------------------------------------------------------//// these are all used to construct the initial set of messagesconst GPT4_SYS_PROMPT = `You are an expert in helping individuals cultivate gratitude in their lives. You are acting as a therapist. Your goal is help the user feel more grateful in life. You have been trained in the latest academic literature about gratitude. You know that when asked what they are grateful for, most people will respond with a list of things. However, you also know that when people reflect on relationships the benefits are much greater. Therefore, you must guide the user to reflect on relationships that are important, that have shaped them, and that have shaped how they treat others.You have three specific goals:First, you must get them to identify a benevolent relationship that has had meaningful impact on their live. Ideally, this relationship would involve some sort of sacrifice on the part of the giver.Second, you must get them to reflect their feelings about that relationship and its impact.Third, you must get them to express how this relationship will change their behavior. In other words, how will this relationship drive some sort of outward expression? How will they "pay it forward"?`;const GPT4_INITIAL_TURN = "Hello! Thank you for meeting with me today. Could we start by having you tell me a bit about yourself?"const GPT4_SECOND_TURN = "Perfect. Now, can you please list three things that you are grateful for?"// grabbing some data from another questionconst user_demographics = "${e://Field/description}";//// ----------------------------------------------------------------//// the initial converationvar messages = [{role: 'system', content: GPT4_SYS_PROMPT}, {role: 'assistant', content: GPT4_INITIAL_TURN}, {role: 'user', content: user_demographics}, {role: 'assistant', content: GPT4_SECOND_TURN} ];Qualtrics.SurveyEngine.setEmbeddedData( EMBEDDED_DATA_DEST , JSON.stringify( messages ) );//// ----------------------------------------------------------------// ----------------------------------------------------------------// ----------------------------------------------------------------//// store this reference for future useconst question_this = this;var initial_messages_length = messages.length; // check this laterthis.disableNextButton();// I had no luck hiding the "done" button, so I'm just deleting itjQuery(".advanceButtonContainer").empty();// create my own buttonjQuery("<div style='display:inline-block;padding:20 20 20 20;'><input type='button' value='Submit response' class='AdvanceButton Button' id='submitButton' disabled /></div>").appendTo( jQuery(".QuestionOuter") );jQuery("#submitButton").prop("disabled",false);jQuery("#submitButton").click( function() { /*Things that should happen when they click the button:1) Check that their input was not empty2) Disable the submit button3) Construct the new set of messages4) Update the global conversation structure5) Store a json version of the GCS6) Ping the GPT API7) Once we have a response, clear the question text and replace it by the GPT respone8) clear the input text area9) re-enable the submit button10) check to see if it's time for the convo to end / enable the "next" button*/ var current_user_response = jQuery(".InputText").val(); if ( ( current_user_response == undefined) || ( current_user_response.length == 0 ) ) { alert("Please enter a response"); return; } jQuery("#submitButton").prop("disabled",true); messages.push( { role: 'user', content: current_user_response, }); Qualtrics.SurveyEngine.setEmbeddedData( EMBEDDED_DATA_DEST , JSON.stringify( messages ) ); const data = { model: OPENAI_MODEL, messages: messages, max_tokens: 1000, temperature: 1.0, }; console.log( "initiating gpt query..." ); console.log( messages ); fetch( OPENAI_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': OPENAI_API_KEY }, body: JSON.stringify(data) }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { // // GOT A RESPONSE! // console.log('API Response:', data); message = data.choices[0].message.content; console.log("Message: ", message); $$('.QuestionText')[0].innerText = message; messages.push( { role: 'assistant', content: message }); Qualtrics.SurveyEngine.setEmbeddedData( EMBEDDED_DATA_DEST , JSON.stringify( messages ) ); jQuery(".InputText").val( '' ); // reset answer field for next question jQuery("#submitButton").prop("disabled",false); // CHECK TO SEE IF THE CONVO HAS ENDED if (( messages.length - initial_messages_length ) / 2 >= MAX_TURNS) { question_this.enableNextButton(); jQuery("#submitButton").prop("disabled",true); jQuery(".InputText").val( '' ); $$('.QuestionText')[0].innerText = "Thank you for your answers. Please click the 'Next' button below"; } }) .catch(error => { console.error('There was a problem with the fetch operation:', error); Qualtrics.SurveyEngine.setEmbeddedData("API Error" , "true"); question_this.enableNextButton(); });});

Integrating / embedding chat GPT for multiple turns | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded