labvanced logoLabVanced
  • Research
    • Publications
    • Researcher Interviews
    • Use Cases
      • Behavioral Psychology
      • Personality & Social Psychology
      • Cognitive & Neuro Psychology
      • Developmental & Educational Psychology
      • Clinical & Health Psychology
      • Sports & Movement Psychology
      • Marketing & Consumer Psychology
    • Labvanced Blog
  • Technology
    • Feature Overview
    • Desktop App
    • Phone App
    • Precise Timing
    • Experimental Control
    • Eye Tracking
    • Multi User Studies
    • More ...
      • Questionnaires
      • Artificial Intelligence (AI) Integration
      • Mouse Tracking
      • Data Privacy & Security
  • Learn
    • Guide
    • Videos
    • Walkthroughs
    • FAQ
    • Release Notes
    • Documents
    • Classroom
  • Experiments
    • Public Experiment Library
    • Labvanced Sample Studies
  • Pricing
    • Pricing Overview
    • License Configurator
    • Single License
    • Research Group
    • Departments & Consortia
  • About
    • About Us
    • Contact
    • Downloads
    • Careers
    • Impressum
    • Disclaimer
    • Privacy & Security
    • Terms & Conditions
  • Appgo to app icon
  • Logingo to app icon
Learn
Guide
Vidéos
Tutoriels
FAQ
Notes de version
Salle de classe
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
Guide
Vidéos
Tutoriels
FAQ
Notes de version
Salle de classe
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • Guide
    • DÉMARREZ

      • Objets
      • Événements
      • Variables
      • Assistant de tâche
      • Système d'essai
      • Conception de l'étude
        • Tâches
        • Blocs
        • Sessions
        • Groupes
    • SUJETS EN VEDETTE

      • Randomisation & Équilibre
      • Suivi oculaire
      • Application de bureau
      • Études d'exemple
      • Recrutement de participants
      • Accès API
        • API REST
        • API Webhook
        • API WebSocket
      • Autres sujets

        • Temps de stimuli précis
        • Études multi-utilisateurs
        • Suivi de la Tête dans Labvanced | Guide
    • ONGLETS PRINCIPAUX DE L'APPLICATION

      • Vue d'ensemble : Onglets principaux
      • Tableau de bord
      • Mes études
      • Études partagées
      • Mes fichiers
      • Bibliothèque d'expériences
      • Mon compte
      • Ma licence
    • ONGLETS D'ÉTUDE

      • Vue d'ensemble : Onglets spécifiques à l'étude
      • Conception de l'étude
        • Tâches
        • Blocs
        • Sessions
        • Groupes
      • Éditeur de tâche
        • Fonctions Principales et Paramètres
        • Le Système d'Essais
        • Cadres de canevas et de page
        • Objets
        • Tables de Propriétés des Objets
        • Variables
        • Tables des variables système
        • Le Système d'Événements
        • Randomisation des Essais
        • Fonctions de l'Éditeur de Texte
        • Suivi oculaire dans une tâche
        • Suivi de la tête dans une tâche
        • Études Multi-Utilisateurs
      • Paramètres de l'étude
        • Démarrage et Paramètres Principaux
        • Paramètres des navigateurs et des appareils
        • Paramètres des fonctionnalités d'expérience
      • Description
        • Plus de détails sur les informations de description
        • Images, Liens et Références dans les Descriptions
      • Variables
      • Médias
      • Traduire
      • Exécuter
      • Publier et enregistrer
        • Exigences pour laPublication d'une Étude dans Labvanced
        • Recrutement de Participants et Crowdsourcing
        • Sélection et Confirmation de la Licence
        • Après la publication de votre étude Labvanced
      • Partage
      • Participants
      • Vue de données et exportation
        • Vue des données et sélection des variables & des tâches (ancienne version)
        • Accéder aux Enregistrements (Version ANCIENNE)
  • Vidéos
    • Vue d'ensemble des vidéos
    • Démarrer avec Labvanced
    • Création de tâches
    • Vidéos d'éléments
    • Événements & Variables
    • Sujets avancés
  • Guides pratiques
    • Introduction
    • Tâche de Stroop
    • Tâche de décision lexicale
    • Tâche de cueing visuel de Posner
    • Paradigme de clignotement de cécité au changement
    • Étude d'exemple de suivi oculaire
    • Étude de suivi oculaire des nourrissons
    • Étude de capture d'attention avec suivi de souris
    • Présentation visuelle sérielle rapide
    • Étude ChatGPT
    • Démonstration de suivi oculaire : SVG comme AOIs
    • Démonstration multi-utilisateur : Afficher les curseurs des sujets
    • Configuration de base du contrôleur de jeu/joystick
    • Étude d'application de bureau avec intégration EEG
  • FAQ
    • Fonctionnalités
    • Sécurité & Confidentialité des données
    • Licences
    • Précision de Labvanced
    • Utilisation programmatique & API
    • Utilisation de Labvanced hors ligne
    • Dépannage
    • Questions sur la création d'études
  • Notes de version
  • Salle de classe

É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 :

menu de déclenchement d'entrée utilisateur

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 :

tableau des variables répertoriant les variables personnalisées utilisées dans cette étude ChatGPT
Nom de la variableDescription
chatStringC'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 :
  • Valeur de départ : Bienvenue ! Veuillez commencer à taper dans le champ d'entrée ci-dessous pour commencer 😃 <br><br>
  • Type d'enregistrement : Valeur finale uniquement
dfC'est un fichier .csv à 2 colonnes qui est téléchargé en tant que variable de cadre de données.
chatGPTAnswerCette 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 :
  • Type d'enregistrement : Valeur finale uniquement
PromptsLeftPour 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 :
  • Valeur de départ : 5
  • Type d'enregistrement : Valeur finale uniquement
InputCette 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 :
  • Type d'enregistrement : Valeur finale uniquement

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.

Vue des objets sur le cadre du canevas pour l'étude ChatGPT

Afficher des objets de texte

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

  1. Présenter des instructions
  2. 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 BoxLa 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 InstructionsLes 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 :

Les propriétés de l'objet dans le menu latéral pour entrer le code afin de créer un effet de type chat.

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.

Saisir une valeur de départ dans une 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 étant text.
  • Focalisé est marqué comme true 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 :

  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. 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 à :

  1. Présenter le texte écrit depuis le champ d'entrée dans la zone de chat
  2. Enregistrer l'invite écrite du participant en tant que données de variable
  3. 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é.

Le déclencheur d'entrée sur l'entrée

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.

Configurer la variable chatstring pour enregistrer l'échange de chat dans une étude ChatGPT.

  • L'action Définir/Enregistrer la variable contient la variable chatString 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ée input 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.

Action d'envoyer à OpenAI qui utilise une API pour envoyer ce que le participant a écrit

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).

Configurer la variable pour compter combien d'invites sont restantes

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.

L'option d'essai suivant sous l'Action de saut

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 !

Sélection des 6 essais afin de s'aligner avec le nombre d'invites

É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 :

  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éé précédemment.

Le Déclencheur OpenAI pour envoyer l'invite à OpenAI

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.

Configurer la variable de chaîne de chat pour ajouter la réponse de ChatGPT

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.

Créer une variable pour stocker la réponse de Chat GPT

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.

L’Action différée où il y a un retard de 3000 millisecondes lorsque le compte des invites atteint zéro.

Spécifiant qu'en conséquence, l'expérience sautera vers la prochaine tâche de l'étude ChatGPT.

É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.

La vue de la seconde étude ChatGPT dans l'éditeur de tâches

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 :

Le déclencheur 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.

L'Action différée où la session est acceptée.

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 :

Vue de l'onglet Dataview et Export où les données enregistrées pour chaque variable de l'étude ChatGPT sont affichées.


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 !

Prev
Présentation visuelle sérielle rapide
Next
Démonstration de suivi oculaire : SVG comme AOIs