Étude ChatGPT | Guide

Vue d'ensemble

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 lorsque un participant écrit un prompt, 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 prompt :

Voici à quoi ressemble la démonstration en action avec les données enregistrées affichées à la fin de la vidéo :

Dans ce guide, nous discuterons étape par étape de la façon 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 !

Remarque : Pour établir une connexion avec ChatGPT dans votre étude, vous devez entrer votre propre clé API unique dans l'onglet Paramètres sous Fonctionnalités Spéciales dédié à Open AI Integration.

Variables dans la Tâche ChatGPT

Les variables détiennent et stockent des données enregistrées, y compris des valeurs de 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.

Dans le cadre de cette démonstration, nous allons lister les variables à l'avance comme décrit par la section à venir :

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 cela sera décrit ci-dessous.

Afficher des Objets de Texte

Les objets de texte affiché sont nécessaires pour cette étude ChatGPT afin de :

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

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

Créer un Effet de Boîte de Chat

Avant de plonger en profondeur, parlons de la boîte de chat où la conversation sera affichée.

Comme Labvanced est une application qui fonctionne dans le navigateur, elle se rend du haut de l'écran vers le bas. Cela influence la façon dont l'information est présentée. Afin de créer un effet de type chat, nous devons entrer une commande CSS pour l'objet Chat Box afin que le texte du chat soit inversé, avec les nouveaux textes affichés en bas (nous voulons cela parce que 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 jusqu'à la zone pour Changer 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 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, et non en haut.

Cela devrait ressembler à ceci :

Dès que vous entrez ce fragment de code, le nom de la variable ChatString se déplacera vers le 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 Bordure et une Couleur de Bordure qui, dans l'exemple ci-dessus, a la Taille de Bordure réglée sur 2 et la Couleur de Bordure en noir.

Valeur de Départ : Texte À l'Intérieur de la Boîte de Chat

De manière générale, lorsque quelqu'un accède à ChatGPT, il y a un certain 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 utilise 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>

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 une nouvelle ligne du chat est créée et ajoutée à la boîte de chat.

Champ de Saisie

Le champ de saisie est l'endroit où le participant écrira son prompt qui sera envoyé à ChatGPT. Pour en créer un, insérez simplement un objet d'entrée à partir du panneau d'objets sur le côté de l'éditeur.

Après l'avoir 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 à droite, lorsque cet objet est sélectionné, assurez-vous que les options suivantes sont indiquées :

• L'option Afficher l'en-tête du question est désélectionnée
• Type de saisie est sélectionné pour être texte.
• Focalisé est marqué comme vrai, 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 pour accomplir les actions suivantes :

1. Afficher et envoyer le prompt 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. Passer à l'essai suivant

Dans 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 sa demande à ChatGPT, c'est-à-dire l'information qui est sortante de Labvanced et vers OpenAI.

Avec cet événement, nous visons à :

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

Déclencheur

Le déclencheur qui active cet événement est le type de déclencheur Entrée sur Saisie avec l'objectif 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 à la suite de ce déclencheur.

Ensemble, cette variable mettra le query du participant (l'entrée) dans un format de type chat en le précédant du texte 'Vous :' et puis en ajoutant un espace de rupture pour commencer une nouvelle ligne.

• L'action Configurer/Enregistrer Variable contient la variable chatString que nous avons créée auparavant.
• 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 ajoutez et allongez la chaîne en combinant des variables et des valeurs.
• Voici une explication des valeurs à l'intérieur de cette opération arithmétique :
  • ChatString : Appelle la variable spécifique et ensuite 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ée input, c'est-à-dire, ce que le participant a tapé dans le champ de saisie s'affichera maintenant ici dans la boîte de chat.
  • <br><br> : Une valeur de chaîne constante qui est comment une nouvelle ligne est créée avec le <br> HTML.

La deuxième 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 variable de PromptsLeft de 1 (rappelez-vous qu'au début nous avons alloué au participant la possibilité d'envoyer 5 prompts).

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.

REMARQUE : 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 y a de nombreuses façons de gérer la façon dont 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

En général, il faut du 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 un 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 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éé auparavant.

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 la même manière que nous avons affiché l'entrée du participant dans l'étape précédente, nous allons maintenant faire de même pour afficher 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 le Chat GPT Answer en le choisissant comme la 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 de ChatGPT (qui est automatiquement reçue de l'API) en tant que sa propre valeur.

Étant donné que la tâche se terminera automatiquement lorsque le nombre de Prompts atteindra 0, nous voulons laisser au participant le temps de lire la dernière réponse de ChatGPT, donc nous retardons la fin du dernier essai de 3000 ms en utilisant une Action de Contrôle appelée Action Retardée où l'Action de Condition stipule que si la variable PromptsLeft est égale à 0 alors l'expérience progresse vers la Tâche Suivante.

Écran de Fin et Sauvegarde des Données - Tâche 2

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

Événement d'Accepter la Session

Pour 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 Au Début du Cadre :

Action

En utilisant une autre Action Retardée, l'Action de Saut → Accepter / Mettre Fin à la Session est utilisée pour sauvegarder les données.

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

Aperçu des Données Enregistrées de la Démonstration ChatGPT

L'image ci-dessous montre à quoi ressembleront les données de cette configuration d'étude dans l'onglet Vue des Données et Exporter où les numéros d'essai (Trial_Nr), le nom de la tâche (Task_Name), les Réponses ChatGPT, et les prompts des participants (input), ainsi que le nombre de prompts restants (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 réponses en tant que valeurs variables.

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