Étude ChatGPT | Guide
Vue d'ensemble
Dans cette démonstration de 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 indiqué 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 :

Voici à quoi ressemble la démonstration en action avec les données enregistrées qui sont montrées à la fin de la vidéo :
Dans ce guide, nous allons discuter étape par étape de la manière de configurer une étude ChatGPT afin que vous puissiez vous familiariser avec son contenu et commencer à intégrer cette fonctionnalité puissante dans votre prochaine étude !
Note : Afin d'établir une connexion avec ChatGPT dans votre étude, vous devez entrer votre propre clé API unique dans l’onglet Paramètres de l'étude
sous la colonne Fonctionnalités de l'expérience
en activant l'option dédiée à l'intégration Open AI.
Variables dans la tâche ChatGPT
Les variables conservent et stockent les données enregistrées, y compris les valeurs chaînes 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.
Pour les besoins de cette démonstration, nous allons énumérer les variables à l'avance comme décrit dans la section à venir :

Nom de la variable | Description |
---|---|
chatString | Il s'agit de la variable qui contiendra toute la chaîne de chat et formatera essentiellement la ligne dans le chat qui affiche l'invite du participant et le message de ChatGPT, qui seront expliqués plus en détail dans la section des événements ci-dessous. Paramètres supplémentaires de la variable :
|
df | C'est un fichier .csv à 2 colonnes qui est téléchargé en tant que variable de trame de données. |
chatGPTAnswer | Cette variable est automatiquement reconnue par le système lorsque vous l'appelez [expliqué plus loin]. Pas besoin de la créer à ce stade, mais nous la listons car elle sera mentionnée plus tard. Paramètres supplémentaires de la variable :
|
PromptsLeft | Pour cette démonstration, nous voulons attribuer aux participants 5 invites. Ainsi, nous devons créer une variable numérique qui commence avec une valeur de 5 et utiliser des événements pour diminuer ce compteur chaque fois qu'une invite est envoyée à ChatGPT. Paramètres supplémentaires de la variable :
|
Input | Cette variable sera créée dès que vous insérerez l'objet champ de saisie dans l'éditeur. Cela stocke la valeur de ce que le participant saisit comme son invite à ChatGPT. Paramètres supplémentaires de la variable :
|
Ajouter des objets à la toile
Pour configurer l'interface de chat et présenter les instructions, plusieurs types d'objets différents doivent être ajoutés à la toile, comme cela sera décrit ci-dessous.
Afficher des objets de texte
Les objets de texte affichés sont nécessaires pour cette étude ChatGPT afin de :
- Présenter des instructions
- Afficher l'historique du chat à l'écran
Dans cette démonstration, nous avons créé et nommé les éléments d'affichage suivants :
Nom du texte affiché | Description |
---|---|
Chat Box | La Chat Box est essentiellement l'endroit où toutes les invites du participant et les réponses de ChatGPT apparaîtront dans un format de chat. À l'intérieur de cet élément, il y a une variable liée appelée chatString qui affichera les chaînes de chat du participant et les réponses de ChatGPT. Instructions : Ajoutez l'élément d'affichage, redimensionnez-le pour qu'il soit grand, changez le texte d'espace réservé pour dire quelque chose d'autre comme 'texte', mettez-le en surbrillance, dans l'éditeur de texte cliquez sur le [x] rouge en haut et sélectionnez la variable ChatString dans le menu. Le texte de la Valeur de départ apparaîtra maintenant. |
Top Instructions | Les Top Instructions contiennent les instructions pour le participant et incluent une variable liée appelée PromptsLeft qui montrera combien d'invites le participant lui reste à utiliser. |
Créer un effet de chat
Avant de plonger profondément, parlons du chat où la conversation sera affichée.
Étant donné que Labvanced est une application qui fonctionne dans le navigateur, elle s'affiche du haut de l'écran vers le bas. Cela influence la façon dont l'information est présentée. Pour créer un effet de type chat, nous devons entrer une commande CSS pour l'objet Chat Box
afin que le texte de chat soit inversé, avec les nouveaux messages affichés en bas (nous voulons cela parce que c'est ainsi que le chat apparaît dans la vie réelle avec les nouveaux messages apparaissant en bas).
Pour créer cet effet, sélectionnez simplement l'objet Chat Box
puis 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 Modifier les propriétés CSS
et insérez ce snippet de code : p{ height: 300px; overflow: auto; display: flex; flex-direction: column-reverse; padding: 10px }
Cela se fait 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 à cela :
Dès que vous saisissez ce snippet de code, le nom de la variable ChatString
sautera au bas de l'objet.
En utilisant ce même panneau Propriétés de l'objet
, vous pouvez également spécifier le style de la boîte de chat en attribuant une Taille de bord
et une Couleur de bord
qui, dans l'exemple ci-dessus, a la Taille de bord
réglée sur 2 et la Couleur de bord
sur noir.
Valeur de départ : Texte à l'intérieur de la boîte de chat
En général, lorsque quelqu'un accède à ChatGPT, il y a un type de message d'invite, du genre 'Bonjour, 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 Valeur de départ
en le tapant sous les Propriétés de la variable.
Comme montré ci-dessus, nous utilisons le message de départ suivant dans cette démonstration : Bienvenue ! Veuillez commencer à taper dans le champ de saisie ci-dessous pour commencer 😃 <br><br>
Note : 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 la prochaine ligne du chat est créée et ajoutée dans la boîte de chat.
Champ de saisie
Le champ de saisie est l'endroit 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.
Une fois inséré, vous serez invité à nommer la variable associée à cet objet. Pour cette démonstration, nous avons nommé cet objet input
.
IMPORTANT : De plus, pour contrôler davantage les options associées à cet objet particulier, sous le panneau Propriétés de l'objet
du côté droit, lorsque cet objet est sélectionné, assurez-vous que les options suivantes sont indiquées :
- L'option
Afficher l'en-tête de la question:
est déselectionnée Type de saisie
est sélectionné commetexte.
Focalisé
est marqué commetrue
, ce qui rendra le champ de saisie actif (c'est-à-dire que le participant n'a pas besoin de cliquer dessus chaque fois pour pouvoir taper).
Vue d'ensemble des événements
Les événements sont nécessaires dans cette étude ChatGPT afin d'accomplir les actions suivantes :
- Afficher et envoyer l'invite du participant à ChatGPT
- Recevoir et afficher la réponse de ChatGPT
- Enregistrer les chaînes de chat (écrites par le participant et créées par ChatGPT)
- Passer au prochain essai
Pour les besoins 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 se réfère aux actions qui se produiront lorsque le participant enverra sa demande à ChatGPT, c'est-à-dire que c'est l'information qui sort de Labvanced et va à OpenAI.
Avec cet événement, notre objectif est de :
- Présenter le texte écrit dans le champ de saisie dans la zone de chat
- Enregistrer l'invite écrite du participant en tant que données de variable
- L'envoyer à ChatGPT
Déclencheur
Le déclencheur qui active cet événement est le type de déclencheur Enter on Input
avec la cible spécifique étant l'objet input
que nous avons créé précédemment. Ainsi, lorsque le participant appuie sur Entrée en utilisant cet objet, cet événement sera déclenché.
Actions
Après avoir spécifié ce qui précède, nous passons à la définition des actions qui surviennent à la suite de ce déclencheur.
Ensemble, cette variable emballera la requête du participant (l'entrée) dans un format de type chat en la précédant du texte ‘Vous :’ puis en ajoutant un espace de rupture pour commencer une nouvelle ligne.
- L'action
Set/Record Variable
contient la variablechatString
que nous avons créée précédemment. - Il y a plusieurs opérations
arithmétiques
à l'intérieur qui créent essentiellement l'effet d'un chat. En combinant des éléments de chaîne avec le (+), vous annotez en allongeant 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, puis le reste qui suit sera ajouté à celle-ci.Vous :
Une valeur de chaîne constante que vous saisissez pour donner au participant son étiquette.input
: La variable nomméeinput
, c'est-à-dire que ce que le participant a tapé dans le champ de saisie apparaîtra maintenant ici dans la boîte de chat.<br><br>
: Une valeur de chaîne constante qui est la façon dont une nouvelle ligne est créée en utilisant le<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 souhaitons également diminuer la valeur de la variable PromptsLeft de 1 (rappelez-vous qu'au début, nous avions attribué au participant la possibilité d'envoyer 5 invites).
Une fois que le participant appuie sur Entrée, nous voulons également qu'il passe au prochain essai. Pour cela, nous avons utilisé une Jump Action
et spécifié Next Trial
.
NOTE : Nous avons créé 6 essais pour cette étude ChatGPT et vous comprendrez plus tard dans la section ci-dessous qui montre les données enregistrées. Bien sûr, il existe plusieurs façons de gérer l'utilisation des essais et pour cette démonstration nous avons choisi cette approche. Si vous avez des questions, n'hésitez pas à nous contacter !
ÉVÉNEMENT ENTRANT
En général, il faut un certain temps, environ 100 à 500 millisecondes pour obtenir une réponse de ChatGPT. Une fois la réponse reçue, elle peut ensuite être utilisée comme déclencheur pour :
- Enregistrer la réponse en tant que variable stockée
- Présenter la réponse visuellement dans le chat
- Naviguer vers le prochain essai
Déclencheur
Le OpenAI Trigger
utilise l'API pour recevoir la réponse de ChatGPT et puis stocker cette valeur dans la trame de données à 2 colonnes (nommée df
ici) que nous avons créée précédemment.
Actions
Après avoir spécifié ce qui précède, nous passons à la définition des actions qui se produisent à la suite de ce déclencheur.
De la même manière que nous avons affiché l'entrée du participant à l'étape précédente, nous ferons maintenant 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éfixer la réponse dans le chat… et au lieu de la variable ‘input’ nous appelons la Réponse Chat GPT
en la choisissant comme valeur spécifique au déclencheur qui est répertoriée lorsque vous cliquez sur l'icône de stylo.
L'action ci-dessous est également ajoutée afin d'enregistrer la Réponse ChatGPT (qui est automatiquement reçue de l'API) comme sa propre valeur.
Parce que la tâche se terminera automatiquement lorsque le nombre d'Invites 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 une Control Action
appelée Delayed Action
où l’Action de condition
stipule que si la variable PromptsLeft est égale à 0, alors l'expérience progresse vers la Prochaine tâche.
Écran de fin et enregistrement des données - Tâche 2
Dans notre cas, la prochaine tâche s'appelle ‘Fin’ et 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
Pour enregistrer les données de l'étude, nous voulons accepter la session et terminer l'étude lorsque le participant atteint ce point.
Déclencheur
Ainsi, le déclencheur est Au démarrage du cadre
:
Action
En utilisant une autre Delayed Action
, l'action Jump
→ Accepter / Terminer la session
est utilisée pour enregistrer les données.
Nous utilisons l'action retardée parce que l'étude se fermera/terminera automatiquement après que le temps soit écoulé et nous voulons donner aux participants le temps de lire ce qu'il y a à l'écran avant que l'étude ne se termine.
Prévisualisation des données enregistrées de la démonstration ChatGPT
L'image ci-dessous capture à quoi ressemblera les données provenant de cette configuration d'étude dans l'Onglet de visualisation et d'exportation des données
où les numéros d'essai (Trial_Nr), le nom de la tâche (Task_Name), les réponses de chatGPT et les invites des participants (input), ainsi que le nombre d'invites restantes (PromptsLeft) sont montrés :
Conclusion
Globalement, cette démonstration 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 entrées et les réponses en tant que valeurs de variables.
Il existe de nombreuses approches et façons d'utiliser cette fonctionnalité pour construire une étude ChatGPT. N'hésitez pas à nous contacter si vous avez des questions !