Estudio ChatGPT | Tutorial
Visión General
En esta demostración de ChatGPT, que también puedes importar a tu cuenta y usar como plantilla para construir tu estudio de ChatGPT, puedes ver que cuando un participante escribe un aviso, la respuesta de ChatGPT aparece directamente en Labvanced.
Como se muestra a continuación, hay un área de chat donde se muestra todo el historial y un campo de entrada donde el participante escribe su aviso:

Así es como se ve la demostración en acción junto con los datos grabados que se muestran al final del video:
En este tutorial, discutiremos paso a paso cómo configurar un estudio de ChatGPT para que puedas familiarizarte con su contenido y comenzar a incorporar esta poderosa función en tu próximo estudio.
Nota: Para establecer una conexión con ChatGPT en tu estudio, necesitas introducir tu propia clave API única en la pestaña de Configuración del Estudio
bajo la columna de Funciones del Experimento
activando la opción dedicada a Integración con Open AI.
Variables en la Tarea de ChatGPT
Las variables sostienen y almacenan datos registrados, incluidos valores de cadena y numéricos. Muy a menudo, los investigadores que están cómodos usando Labvanced crearán una variable en el momento, como al crear un evento.
Para los propósitos de esta demostración, enumeraremos las variables de antemano como se describe en la próxima sección:

Nombre de Variable | Descripción |
---|---|
chatString | Esta es la variable que contendrá toda la cadena de chat y esencialmente formateará la línea en el chat que mostraría el aviso del participante y el mensaje de ChatGPT, el cual se explicará en mayor detalle en la sección de eventos a continuación. Configuraciones Adicionales de la Variable:
|
df | Este es un archivo .csv de 2 columnas que se carga como una variable de marco de datos. |
chatGPTAnswer | Esta variable es reconocida automáticamente por el sistema cuando la llamas [explicado más abajo]. No es necesario crearla en este momento, pero la enumeramos ya que se mencionará más adelante. Configuraciones Adicionales de la Variable:
|
PromptsLeft | Para esta demostración, queremos asignar a los participantes 5 avisos. Por lo tanto, necesitamos crear una variable numérica que comience con un valor de 5 y luego usar eventos para disminuir ese contador cada vez que se envíe un aviso a ChatGPT. Configuraciones Adicionales de la Variable:
|
Input | Esta variable se creará tan pronto como ingreses el objeto del campo de entrada en el editor. Esto almacena el valor de lo que el participante escribe como su aviso a ChatGPT. Configuraciones Adicionales de la Variable:
|
Agregar Objetos al Lienzo
Para configurar la interfaz de chat y presentar las instrucciones, se deben agregar varios tipos diferentes de objetos al lienzo, como se describirá a continuación.
Mostrar Objetos de Texto
Los objetos de texto para mostrar son necesarios para este estudio de ChatGPT con el fin de:
- Presentar instrucciones
- Mostrar el historial de chat en la pantalla
En esta demostración hemos creado y nombrado los siguientes elementos de visualización:
Nombre de Texto para Mostrar | Descripción |
---|---|
Caja de Chat | La Caja de Chat es esencialmente donde aparecerán todos los avisos del participante y las respuestas de ChatGPT en un formato similar a un chat. Dentro de este elemento, hay una variable vinculada llamada chatString que mostrará las cadenas de chat del participante y las respuestas de ChatGPT. Instrucciones: Agrega el elemento de visualización, redimensiónalo para que sea grande, cambia el texto de marcador de posición a decir algo diferente como 'texto', destácalo, en el editor de texto haz clic en la [x] roja en la parte superior y selecciona la variable ChatString del menú. El texto de Valor Inicial aparecerá ahora. |
Instrucciones Superiores | Las Instrucciones Superiores contienen las instrucciones para el participante e incluyen una variable vinculada llamada PromptsLeft que mostrará cuántos avisos le quedan al participante para usar. |
Crear un Efecto de Caja de Chat
Antes de profundizar, hablemos sobre la caja de chat donde se mostrará la conversación.
Dado que Labvanced es una aplicación que funciona en el navegador, se renderiza desde la parte superior de la pantalla hasta la parte inferior. Esto influye en cómo se presenta la información. Para crear un efecto similar a un chat, debemos introducir un comando CSS para el objeto Caja de Chat
para que el texto del chat se invierta, mostrando los textos más nuevos en la parte inferior (queremos esto porque así es como los chats se ven en la vida real con los mensajes más nuevos apareciendo en la parte inferior).
Para crear este efecto, simplemente selecciona el objeto Caja de Chat
y en el panel derecho donde se listan las propiedades del objeto, desplázate hacia abajo hasta el área de Cambiar Propiedades de CSS
e inserta este fragmento de código: p{ height: 300px; overflow: auto; display: flex; flex-direction: column-reverse; padding: 10px }
Esto se logra con la opción de estilo CSS column-reverse
, que esencialmente invierte el flujo del texto, mostrando el mensaje más nuevo en la parte inferior del chat, en lugar de en la parte superior.
Esto debería verse así:
Tan pronto como ingreses este fragmento de código, el nombre de la variable ChatString
saltará a la parte inferior del objeto.
Usando este mismo panel de Propiedades del Objeto
, también puedes especificar el estilo de la caja de chat asignando un Tamaño de Borde
y Color de Borde
, que, en el ejemplo anterior, tiene el Tamaño de Borde
establecido en 2 y el Color de Borde
como negro.
Valor Inicial: Texto Dentro de la Caja de Chat
En términos generales, cuando alguien accede a ChatGPT, hay algún tipo de mensaje de aviso, en la línea de 'Hola, ¿cómo puedo ayudarte hoy?' Puedes agregar un mensaje de inicio así accediendo a la variable creada (que está vinculada dentro del objeto Caja de Chat
) y dándole un Valor Inicial
escribiéndolo en las Propiedades de la Variable.
Como se mostró anteriormente, usamos el siguiente mensaje inicial en esta demostración: ¡Bienvenido! Por favor comienza a escribir en el campo de entrada a continuación para comenzar 😃 <br><br>
Nota: El <br>
es una etiqueta HTML para crear un salto de línea en el texto, de modo que se crea una nueva línea cuando se crea y se agrega una nueva línea de chat dentro de la caja de chat.
Campo de Entrada
El campo de entrada es donde el participante escribirá su aviso que se enviará a ChatGPT. Para crear uno, simplemente inserta un objeto de entrada desde el panel de objetos en el lado del editor.
Al insertarlo, se te pedirá que nombres la variable asociada con este objeto. Para esta demostración, nombramos a este objeto input
.
IMPORTANTE: Además, para controlar más las opciones asociadas con este objeto en particular, en el panel derecho de Propiedades del Objeto
, cuando este objeto está seleccionado, asegúrate de que se indiquen las siguientes opciones:
- La opción
Mostrar Encabezado de Pregunta:
está deseleccionada - El
Tipo de Entrada
está seleccionado comotexto.
Enfocado
está marcado comotrue
, lo que hará que el campo de escritura esté activo (es decir, el participante no tiene que hacer clic en él cada vez para poder escribir).
Visión General de Eventos
Los eventos son necesarios en este estudio de ChatGPT para lograr las siguientes acciones:
- Mostrar y enviar la solicitud del participante a ChatGPT
- Recibir y mostrar la respuesta de ChatGPT
- Registrar las cadenas de chat (escritas por el participante y creadas por ChatGPT)
- Avanzar al siguiente ensayo
Para los propósitos de este tutorial, creamos y nombramos dos eventos principales bajo los cuales se abordarán las acciones anteriores:
- Evento Saliente: es decir, enviar un mensaje a ChatGPT y mostrarlo en el chat
- Evento Entrante: es decir, recibir un mensaje de ChatGPT y mostrarlo en el chat
EVENTO SALIENTE
El evento saliente se refiere a las acciones que ocurrirán cuando el participante envíe su consulta a ChatGPT, es decir, es la información que está saliendo de Labvanced y hacia OpenAI.
Con este evento, buscamos:
- Presentar el texto escrito del campo de entrada en el área de chat
- Guardar el aviso escrito del participante como datos de variable
- Enviarlo a ChatGPT
Activador
El activador que activa este evento es el tipo de activador Enter on Input
con el objetivo específico siendo el objeto input
que creamos previamente. Entonces, cuando el participante presiona enter mientras usa este objeto, este evento se activará.
Acciones
Después de especificar lo anterior, pasamos a definir las acciones que ocurren como resultado de este activador.
Juntas, esta variable empaquetará la consulta del participante (la entrada) en un formato similar a un chat precediéndola con el texto 'You:' y luego agregando un espacio para empezar una nueva línea.
- La acción
Set/Record Variable
contiene la variablechatString
que hemos creado previamente. - Hay varias
operaciones aritméticas
dentro de ella que crean esencialmente el efecto de un chat. Cuando combinas elementos de cadena con el (+) estás agregando y haciendo que la cadena sea más larga al combinar variables y valores. - Aquí hay una explicación de los valores dentro de esta operación aritmética:
ChatString
: Llama a la variable específica y luego el resto que sigue se agregará a ella.You:
Un valor de cadena constante que simplemente escribes para dar al participante su etiqueta.input
: La variable llamadainput
, es decir, lo que el participante escribió en el campo de entrada ahora se mostrará aquí en la caja de chat.<br><br>
: Un valor de cadena constante que es cómo se crea una nueva línea utilizando el<br>
HTML.
La segunda acción que tenemos en este evento es la acción Send to OpenAI
, que utiliza una API para enviar lo que el participante escribió (es decir, el contenido de la variable input
) a OpenAI.
También queremos disminuir el valor variable de PromptsLeft en 1 (recuerda que al principio asignamos al participante la capacidad de enviar 5 avisos).
Una vez que el participante presiona enter, también queremos que pase al siguiente ensayo. Así que para eso usamos una Jump Action
y especificamos Next Trial
.
NOTA: Creamos 6 ensayos para este estudio de ChatGPT y entenderás más adelante en la sección a continuación que muestra los datos grabados. Por supuesto, hay muchas maneras de manejar cómo se utilizan los ensayos y para esta demostración elegimos este enfoque. Si tienes alguna pregunta, ¡no dudes en contactarnos!
EVENTO ENTRANTE
Típicamente, toma tiempo, alrededor de 100-500 milisegundos obtener una respuesta de ChatGPT. Una vez recibida la respuesta, esta puede usarse como un activador para:
- Registrar la respuesta como una variable almacenada
- Presentar la respuesta visualmente en el chat
- Navegar hacia el siguiente ensayo
Activador
El OpenAI Trigger
utiliza la API para recibir la respuesta de ChatGPT y luego almacenar ese valor en el marco de datos de 2 columnas (denominado df
aquí) que creamos previamente.
Acciones
Después de especificar lo anterior, pasamos a definir las acciones que ocurren como resultado de este activador.
De manera similar a como mostramos la entrada del participante en el paso anterior, ahora haremos lo mismo para mostrar la respuesta de ChatGPT en el chat.
La diferencia aquí es que en lugar de 'You:', escribimos 'chatGPT:' como el valor de cadena constante para preceder la respuesta en el chat... y en lugar de la variable 'input', invocamos la Chat GPT Answer
al elegirla como el valor específico del activador que se lista al hacer clic en el ícono de lápiz.
También se agrega la acción a continuación para registrar la Respuesta de ChatGPT (que es recibida automáticamente de la API) como su propio valor.
Debido a que la tarea terminará automáticamente cuando el número de Avisos alcance 0, queremos dar al participante la oportunidad de leer la última respuesta de ChatGPT, así que retrasamos el final del último ensayo por 3000 ms utilizando una Control Action
llamada Delayed Action
donde la Requirement Action
estipula que si la variable PromptsLeft es igual a 0, entonces el experimento avanza a la Siguiente Tarea.
Pantalla Final y Guardado de Datos - Tarea 2
En nuestro caso, la siguiente tarea se llama 'Fin' y es una pantalla de agradecimiento donde el experimento está diseñado para aceptar la sesión, es decir, el estudio ha terminado.
Aceptar Evento de Sesión
Para guardar los datos del estudio, queremos aceptar la sesión y finalizar el estudio cuando el participante llegue a este punto.
Activador
Por lo tanto, el activador es On Frame Start
:
Acción
Usando otra Delayed Action
, se utiliza la Jump Action
→ Accept / End Session
para guardar los datos.
Utilizamos la acción retrasada porque el estudio se cerrará/terminará automáticamente después de que haya pasado el tiempo y queremos dar a los participantes el tiempo para leer lo que hay en la pantalla antes de que termine el estudio.
Vista Previa de Datos Grabados de la Demostración de ChatGPT
La imagen a continuación captura cómo se verá los datos de este estudio configurado en la pestaña de Vista de Datos y Exportación
donde se muestran los números de ensayo (Trial_Nr), nombre de la tarea (Task_Name), Respuestas de chatGPT y avisos de participantes (input), así como el número de avisos restantes (PromptsLeft):
Conclusión
En resumen, esta demostración muestra cómo puedes utilizar la función ChatGPT para crear una interacción y diálogo entre el participante y ChatGPT, al tiempo que guardas las entradas y respuestas como valores de variable.
Hay muchos enfoques y maneras en que esta función se puede usar para construir un estudio de ChatGPT. ¡Así que no dudes en contactarnos si tienes alguna pregunta!