Étude ChatGPT | Guide
Aperçu
Dans cette démonstration ChatGPT, que vous pouvez également importer dans votre compte et utiliser comme modèle pour construire votre étude ChatGPT, vous pouvez voir que quand un participant rédige 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 d'entrée 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 saisir 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 contiennent et stockent les données enregistrées, y compris les valeurs de texte et numériques. Très souvent, les chercheurs qui se sentent à l'aise avec l'utilisation de Labvanced, créeront une variable sur le moment, comme lors de la création d'un événement.
Pour les besoins de cette démonstration, nous allons lister les variables à l'avance comme décrit dans la section suivante :

Nom de la variable | Description |
---|---|
chatString | C'est la variable qui contiendra l'ensemble de la chaîne de chat et qui formate essentiellement la ligne dans le chat qui montre l'invite du participant et le message de ChatGPT, qui sera expliqué plus en détail dans la section événements ci-dessous. Paramètres de variable supplémentaires :
|
df | C'est un fichier .csv à 2 colonnes qui est téléchargé en tant que variable de cadre de données. |
chatGPTAnswer | Cette variable est automatiquement reconnue par le système lorsque vous l'appelez [expliqué plus bas]. Pas besoin de la créer à ce stade, mais nous la répertorions car elle sera mentionnée plus tard. Paramètres de variable supplémentaires :
|
PromptsLeft | Pour cette démonstration, nous voulons allouer aux participants 5 invites. Nous devons donc créer une variable numérique qui commence avec une valeur de 5 et ensuite utiliser des événements pour diminuer ce compteur chaque fois qu'une invite est envoyée à ChatGPT. Paramètres de variable supplémentaires :
|
Input | Cette variable sera créée dès que vous déposerez l'objet champ d'entrée dans l'éditeur. Cela stocke la valeur de ce que le participant tape comme son invite à ChatGPT. Paramètres de variable supplémentaires :
|
Ajouter des objets au canevas
Pour configurer l'interface de chat et présenter les instructions, plusieurs types d'objets doivent être ajoutés au canevas, comme 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 de 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 le rendre grand, changez le texte de l'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 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 a encore à utiliser. |
Créer un effet de boîte de conversation
Avant de plonger en profondeur, parlons de la boîte de conversation où la discussion sera affichée.
Comme Labvanced est une application qui fonctionne dans le navigateur, elle rend des éléments du haut de l'écran vers le bas. Cela influence la présentation de l'information. Pour créer un effet de type chat, nous devons saisir une commande CSS pour l'objet Chat Box
afin que le texte de chat soit inversé, avec les nouveaux textes affichés en bas (nous voulons cela car c'est ainsi que les chats apparaissent dans la réalité avec les nouveaux messages apparaissant en bas).
Pour créer cet effet, il vous suffit de sélectionner 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 jusqu'à la zone pour Modifier les propriétés CSS
et insérez ce fragment de code : p{ height: 300px; overflow: auto; display: flex; flex-direction: column-reverse; padding: 10px }
Cela est réalisé 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 entrez ce fragment de code, le nom de la variable ChatString
sautera en 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 assignant une Taille de bord
et une Couleur de bord
qui, dans l'exemple ci-dessus, a la Taille de bord
définie 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 certain type de message d'invite, du type '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 au sein de l'objet Chat Box
) et lui donner une Valeur de départ
en la saisissant 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 d'entrée 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 lorsqu'une nouvelle ligne du chat est créée et ajoutée dans la boîte de chat.
Champ d'entrée
Le champ d'entrée est où le participant écrira son invite qui sera envoyée à ChatGPT. Pour en créer un, il suffit d'insérer un objet d'entrée 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 question
est désélectionnée - Le type
Input
est sélectionné comme étanttext.
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).
Aperçu des événements
Les événements sont nécessaires dans cette étude ChatGPT pour 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)
- Progression vers l'essai suivant
Pour les besoins de ce guide, nous avons créé et nommé deux événements principaux sous lesquels les actions ci-dessus seront traité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 sa demande à ChatGPT, c'est-à-dire que c'est l'information qui sort de Labvanced et vers OpenAI.
Avec cet événement, nous visons à :
- Présenter le texte écrit depuis le champ d'entrée 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 Entrée sur l'entrée
avec la cible spécifique étant l'objet input
que nous avons créé précédemment. Ainsi, lorsque le participant appuie sur entrée tout en utilisant cet objet, cet événement sera déclenché.
Actions
Après avoir spécifié ce qui précède, nous passons à définir les actions qui se produisent en conséquence de ce déclencheur.
Ensemble, cette variable conditionnera la requête du participant (l'entrée) dans un format de type chat en la précédant avec le texte ‘Vous :’ puis en ajoutant un espace de rupture pour commencer une nouvelle ligne.
- L'action
Définir/Enregistrer la 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 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 alors le reste qui suit sera ajouté à elle.Vous :
Une valeur de chaîne constante que vous tapez simplement pour donner au participant son étiquette.input
: La variable nomméeinput
c'est-à-dire que ce que le participant a tapé dans le champ d'entrée sera maintenant affiché ici dans la boîte de chat.<br><br>
: Une valeur de chaîne constante qui est comment une nouvelle ligne est créée en utilisant le<br>
HTML.
La seconde action que nous avons dans cet événement est l'action Envoyer à 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 de la variable PromptsLeft de 1 (rappelez-vous qu'au début nous avons alloué au participant la possibilité d'envoyer 5 invites).
Une fois que le participant appuie sur entrée, nous voulons également qu'il passe à l'essai suivant. Pour cela, nous avons utilisé une Action de saut
et spécifié Essai suivant
.
NOTE : 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 y a de nombreuses façons de gérer comment les essais sont utilisés et pour cette démonstration, nous avons choisi cette approche. Si vous avez des questions, n'hésitez pas à nous contacter !
ÉVÉNEMENT ENTRANT
Typiquement, il faut du temps, environ 100-500 millisecondes pour obtenir une réponse de ChatGPT. Une fois la réponse reçue, elle peut alors ê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 l'essai suivant
Déclencheur
Le Déclencheur OpenAI
utilise l'API pour recevoir la réponse de ChatGPT et ensuite stocker cette valeur dans le cadre de données à 2 colonnes (nommé df
ici) que nous avons créé précédemment.
Actions
Après avoir spécifié ce qui précède, nous passons à définir les actions qui se produisent en conséquence de ce déclencheur.
De manière similaire à la façon dont nous avons affiché l'entrée 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éfigurer 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 pour enregistrer la Réponse ChatGPT (qui est automatiquement reçue de l'API) comme sa propre valeur.
Comme 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 dernière fin d'essai de 3000ms en utilisant une Action de contrôle
appelée Action différée
où l'Action requisitoire
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 configurée pour accepter la session, c'est-à-dire que l'étude est terminée.
Accepter l'événement de session
Pour enregistrer 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 Au début de la trame
:
Action
En utilisant une autre Action différée
, l'Action de saut
→ Accepter / Terminer la session
est utilisée pour enregistrer les données.
Nous utilisons l'Action différée parce que l'étude se fermera/terminera automatiquement après le temps écoulé et nous voulons donner aux participants le temps de lire ce qui est à l'écran avant que l'étude ne se termine.
Aperçu des données enregistrées de la démo ChatGPT
L'image ci-dessous capture à quoi ressemblent les données de cette configuration d'étude dans le l’onglet Dataview et Export où les numéros des essais (Trial_Nr), le nom de la tâche (Task_Name), les Réponses ChatGPT, et les invites des participants (input), ainsi que le nombre d'invites restantes (PromptsLeft) sont affichés :
Conclusion
Dans l'ensemble, 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 variable.
Il existe de nombreuses approches et manières d'utiliser cette fonctionnalité pour construire une étude ChatGPT. N'hésitez pas à nous contacter si vous avez des questions !