Étude ChatGPT | Guide

Aperçu

Dans cette démo ChatGPT, que vous pouvez également importer dans votre compte et utiliser comme modèle pour construire votre étude ChatGPT, vous pouvez voir que lorsque un participant écrit une invite, la réponse de ChatGPT apparaît directement dans Labvanced !

Comme montré ci-dessous, il y a une zone de chat où tout l'historique est affiché et un champ de saisie où le participant écrit son invite :

C'est ainsi que la démo apparaît en action avec les données enregistrées qui sont montrées à la fin de la vidéo :

Dans ce guide, nous discuterons étape par étape comment configurer une étude ChatGPT afin que vous puissiez vous familiariser avec son contenu et commencer à intégrer cette fonctionnalité puissante dans votre prochaine étude !

Remarque : Afin d'établir une connexion avec ChatGPT dans votre étude, vous devez entrer votre propre clé API unique dans l'onglet Settings sous Special Features dédié à Open AI Integration.

Variables dans la tâche ChatGPT

Variables détiennent et stockent les données enregistrées, y compris des valeurs chaîne et numériques. Très souvent, les chercheurs qui sont à l'aise avec l'utilisation de Labvanced créeront une variable sur le champ, comme lors de la création d'un événement.

Aux fins de cette démo, nous listerons les variables à l'avance comme décrit dans la section suivante :

Ajouter des objets au canevas

Pour configurer l'interface de chat et présenter les instructions, plusieurs types d'objets différents doivent être ajoutés au canevas, comme décrit ci-dessous.

Objets de texte d'affichage

Les objets de texte d'affichage sont nécessaires pour cette étude ChatGPT afin de :

1. Présenter des instructions
2. Afficher l'historique du chat à l'écran

Dans cette démo, nous avons créé et nommé les éléments d'affichage suivants :

Créer un effet de boîte de chat

Avant de plonger plus profondément, parlons de la boîte de chat où la conversation sera affichée.

Comme Labvanced est une application qui fonctionne dans le navigateur, elle s'affiche du haut de l'écran vers le bas. Cela influence la manière dont les informations sont présentées. Afin de créer un effet de chat, nous devons entrer une commande CSS pour l'objet Chat Box afin que le texte de chat soit inversé, les nouveaux textes étant affichés en bas (nous voulons cela car c'est ainsi que le chat ressemble dans la vie réelle avec les nouveaux messages apparaissant en bas).

Pour créer cet effet, vous sélectionnez simplement l'objet Chat Box et dans le panneau de droite où les propriétés de l'objet sont répertoriées, faites défiler vers le bas jusqu'à la zone pour Change CSS Properties et insérez ce fragment de code : p{ height: 300px; overflow: auto; display: flex; flex-direction: column-reverse; padding: 10px }

Cela est accompli avec l'option de style CSS column-reverse qui inverse essentiellement le flux du texte, montrant finalement le nouveau message en bas du chat, au lieu du haut.

Cela devrait ressembler à ceci :

Dès que vous saisissez ce fragment de code, le nom de la variable ChatString passera au bas de l'objet.

En utilisant ce même panneau Object Properties, vous pouvez également spécifier le style de la boîte de chat en attribuant un Border-Size et Border-Color qui, dans l'exemple ci-dessus, a le Border-Size réglé sur 2 et le Border-Color sur noir.

Valeur de départ : Texte à l'intérieur de la boîte de chat

En général, quand quelqu'un accède à ChatGPT, il y a un certain type de message d'invite, dans le style de ‘Salut, comment puis-je vous aider aujourd'hui ?’ Vous pouvez ajouter un tel message de départ en accédant à la variable créée (qui est liée à l'objet Chat Box) et en lui donnant une Start Value en la tapant sous le Variable Properties.

Comme montré ci-dessus, nous utilisons le message de départ suivant dans cette démo : Bienvenue ! Veuillez commencer à taper dans le champ de saisie ci-dessous pour commencer 😃 <br><br>

Remarque : Le <br> est une balise HTML pour créer un saut de ligne dans le texte afin qu'une nouvelle ligne soit créée lorsque qu'une nouvelle ligne du chat est créée et ajoutée dans la boîte de chat.

Champ de saisie

Le champ de saisie est où le participant écrira son invite qui sera envoyée à ChatGPT. Pour en créer un, il suffit d'insérer un objet de saisie depuis le panneau d'objets sur le côté de l'éditeur.

Lors de son insertion, vous serez invité à nommer la variable associée à cet objet. Pour cette démo, nous avons nommé cet objet input.

IMPORTANT : De plus, pour contrôler davantage les options associées à cet objet particulier, sous le panneau de droite Object Properties, lorsque cet objet est sélectionné, assurez-vous que les options suivantes sont indiquées :

• L'option Show Question Header: est désélectionnée
• Input type est sélectionné pour être text.
• Focused est marqué comme true ce qui rendra le champ de saisie actif (c'est-à-dire que le participant n'a pas besoin de cliquer dedans à chaque fois pour pouvoir taper).

Aperçu des événements

Les événements sont nécessaires dans cette étude ChatGPT afin d'accomplir les actions suivantes :

1. Afficher et envoyer l'invite du participant à ChatGPT
2. Recevoir et afficher la réponse de ChatGPT
3. Enregistrer les chaînes de chat (écrites par le participant et créées par ChatGPT)
4. Progresser vers le prochain essai

Aux fins de ce guide, nous avons créé et nommé deux événements principaux sous lesquels les actions ci-dessus seront abordées :

• Événement sortant : c'est-à-dire, envoyer un message à ChatGPT et l'afficher dans le chat
• Événement entrant : c'est-à-dire, recevoir un message de ChatGPT et l'afficher dans le chat

ÉVÉNEMENT SORTANT

L'événement sortant fait référence aux actions qui se produiront lorsque le participant enverra son enquête à ChatGPT, c'est-à-dire que c'est l'information qui sort de Labvanced et va à OpenAI.

Avec cet événement, nous visons à :

1. Présenter le texte écrit du champ de saisie dans la zone de chat
2. Sauvegarder la demande écrite du participant en tant que données variables
3. L'envoyer à ChatGPT

Déclencheur

Le déclencheur qui active cet événement est le type de déclencheur Enter on Input avec pour cible spécifique l'objet input que nous avons créé précédemment. Ainsi, lorsque le participant appuie sur entrer en utilisant cet objet, cet événement se déclenche.

Actions

Une fois cela spécifié, nous passons à la définition des actions qui se produisent à la suite de ce déclencheur.

Ensemble, cette variable va regrouper la requête du participant (la saisie) dans un format semblable à un chat en la précédant du texte ‘Vous :’ et en ajoutant un espace de rupture pour commencer une nouvelle ligne.

• L'action Set/Record Variable contient la variable chatString que nous avons créée précédemment.
• Il y a plusieurs Arithmetic opérations qui créent essentiellement l'effet d'un chat. En combinant les éléments de chaîne avec le (+), vous les ajoutez et allongez la chaîne en combinant des variables et des valeurs.
• Voici une explication des valeurs dans cette opération arithmétique :
  • ChatString : Appelle la variable spécifique et le reste qui suit sera ajouté à celle-ci.
  • You: : Une valeur de chaîne constante que vous saisissez pour donner au participant son label.
  • input : La variable nommée input, c'est-à-dire ce que le participant a saisi dans le champ de saisie s'affichera maintenant ici dans la boîte de chat.
  • <br><br> : Une valeur de chaîne constante qui crée une nouvelle ligne en utilisant <br> HTML.

La deuxième action que nous avons dans cet événement est l'action Send to OpenAI qui utilise une API pour envoyer ce que le participant a écrit (c'est-à-dire le contenu de la variable input) à OpenAI.

Nous voulons également diminuer la valeur variable de PromptsLeft de 1 (rappelez-vous qu'au début, nous avons permis au participant d'envoyer 5 demandes).

Une fois que le participant appuie sur entrer, nous voulons également qu'il passe à l'essai suivant. Pour cela, nous avons utilisé un Jump Action et spécifié Next Trial.

REMARQUE : Nous avons créé 6 essais pour cette étude ChatGPT et vous comprendrez plus tard dans la section ci-dessous que montre les données enregistrées. Bien sûr, il existe de nombreuses façons de gérer comment les essais sont utilisés et pour cette démo, nous avons choisi cette approche. Si vous avez des questions, n'hésitez pas à nous contacter !

ÉVÉNEMENT EN COURS

Typiquement, cela prend du temps, environ 100 à 500 millisecondes pour obtenir une réponse de ChatGPT. Une fois la réponse reçue, elle peut être utilisée comme déclencheur pour :

1. Enregistrer la réponse en tant que variable stockée
2. Présenter la réponse visuellement dans le chat
3. Naviguer vers l'essai suivant

Déclencheur

Le OpenAI Trigger utilise l'API pour recevoir la réponse de ChatGPT et stocker cette valeur dans le cadre de données à 2 colonnes (nommé df ici) que nous avons créé précédemment.

Actions

Une fois cela spécifié, nous passons à la définition des actions qui se produisent en conséquence de ce déclencheur.

De la même manière que nous avons affiché la saisie du participant dans l'étape précédente, nous allons maintenant faire de même pour montrer la réponse de ChatGPT dans le chat.

La différence ici est qu'au lieu de ‘Vous :’, nous écrivons ‘chatGPT :’ comme valeur de chaîne constante pour précéder la réponse dans le chat… et au lieu de la variable ‘input’, nous appelons la Chat GPT Answer en la choisissant comme valeur spécifique au déclencheur qui est listée en cliquant sur l'icône de crayon.

L'action ci-dessous est également ajoutée pour enregistrer la réponse de ChatGPT (qui est automatiquement reçue de l'API) comme sa propre valeur.

Parce que la tâche se terminera automatiquement lorsque le nombre de demandes atteindra 0, nous voulons donner au participant la chance de lire la dernière réponse de ChatGPT, donc nous retardons la fin du dernier essai de 3000 ms en utilisant un Control Action appelé Delayed Action où le Requirement Action stipule que si la variable PromptsLeft est égale à 0, alors l'expérience progresse vers la Next Task..

Écran de fin et sauvegarde des données - Tâche 2

Dans notre cas, la prochaine tâche s'appelle 'Fin' et c'est un écran de remerciement où l'expérience est définie pour accepter la session, c'est-à-dire que l'étude est terminée.

Événement d'acceptation de session

Afin de sauvegarder les données de l'étude, nous voulons accepter la session et mettre fin à l'étude lorsque le participant atteint ce point.

Déclencheur

Ainsi, le déclencheur est On Frame Start :

Action

En utilisant un autre Delayed Action, le Jump Action → Accept / End Session est utilisé pour sauvegarder les données.

Nous utilisons l'action retardée parce que l'étude se fermera automatiquement après que le temps soit écoulé et nous voulons donner aux participants le temps de lire ce qui s'affiche à l'écran avant la fin de l'étude.

Aperçu des données enregistrées de la démo ChatGPT

L'image ci-dessous capture comment les données de cette configuration d'étude apparaîtront dans le Dataview and Export Tab où les numéros d'essais (Trial_Nr), le nom de la tâche (Task_Name), les réponses de chatGPT et les demandes des participants (input), ainsi que le nombre de demandes restantes (PromptsLeft) sont affichés :

Conclusion

Globalement, cette démo montre comment vous pouvez utiliser la fonctionnalité ChatGPT pour créer une interaction et un dialogue entre le participant et ChatGPT tout en enregistrant les saisies et les réponses en tant que valeurs variables.

Il existe de nombreuses approches et façons dont cette fonctionnalité peut être utilisée pour construire une étude ChatGPT. N'hésitez donc pas à nous contacter si vous avez des questions !