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 mensaje, 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 mensaje:

Así es como se ve la demostración en acción junto con los datos registrados que se muestran al final del video:

En este tutorial, discutiremos paso a paso cómo configurar un estudio de ChatGPT para que te familiarices con su contenido y comiences a incorporar esta poderosa característica en tu próximo estudio!

Nota: Para establecer una conexión con ChatGPT en tu estudio, necesitas ingresar tu propia clave API única en la pestaña Configuraciones debajo de Características Especiales dedicada a Integración de Open AI.

Variables en la Tarea de ChatGPT

Variables mantienen y almacenan datos registrados, incluidos valores de cadena y numéricos. Muy a menudo, los investigadores que se sienten cómodos usando Labvanced, crearán una variable en el acto, como al crear un evento.

Con el propósito de esta demostración, listaremos las variables de antemano como se describe en la próxima sección:

Agregar Objetos al Canvas

Para configurar la interfaz de chat y presentar las instrucciones, se deben agregar varios tipos de objetos al lienzo, como se describirá a continuación.

Objetos de Texto en Pantalla

Los objetos de texto en pantalla son necesarios para este estudio de ChatGPT para:

1. Presentar instrucciones
2. Mostrar el historial de chat en la pantalla

En esta demostración hemos creado y nombrado los siguientes elementos de visualización:

Creando un Efecto de Caja de Chat

Antes de profundizar, hablemos de la caja de chat donde se mostrará la conversación.

Como Labvanced es una aplicación que funciona en el navegador, se renderiza de la parte superior de la pantalla a la inferior. Esto influye en cómo se presenta la información. Para crear un efecto similar al chat, debemos ingresar un comando CSS para el objeto Chat Box para que el texto del chat se invierta, mostrando los mensajes más recientes en la parte inferior (deseamos esto porque así es como se ve el chat en la vida real, con los mensajes más nuevos apareciendo en la parte inferior).

Para crear este efecto, simplemente selecciona el objeto Chat Box y en el panel derecho donde se enumeran las propiedades del objeto, desplázate hacia abajo hasta el área de Cambiar Propiedades 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 en última instancia el mensaje más nuevo en la parte inferior del chat, en lugar de 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 al asignar 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, como 'Hola, ¿cómo puedo ayudarte hoy?'. Puedes agregar un mensaje de inicio así accediendo a la variable creada (que está vinculada dentro del objeto Chat Box) y dándole un Valor Inicial escribiéndolo en las Propiedades de la Variable.

Como se muestra arriba, usamos el siguiente mensaje de inicio 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 para que se cree 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 mensaje 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 este objeto input.

IMPORTANTE: Además, para controlar mejor las opciones asociadas con este objeto en particular, en el panel de propiedades de Objeto en el lado derecho, cuando este objeto está seleccionado, asegúrate de que las siguientes opciones estén indicadas:

• La opción Mostrar Encabezado de Pregunta: está deseleccionada
• Tipo de entrada está seleccionado como texto.
• Enfocado está marcado como true, 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:

1. Mostrar y enviar el mensaje del participante a ChatGPT
2. Recibir y mostrar la respuesta de ChatGPT
3. Registrar las cadenas de chat (escritas por el participante y creadas por ChatGPT)
4. Avanzar a la siguiente prueba

Con el propósito 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 sucederán cuando el participante envíe su consulta a ChatGPT, es decir, es la información que sale de Labvanced y va a OpenAI.

Con este evento, buscamos:

1. Presentar el texto escrito del campo de entrada en el área de chat
2. Guardar el mensaje escrito del participante como datos de variable
3. Enviarlo a ChatGPT

Desencadenador

El desencadenador que activa este evento es el tipo de desencadenador Enter on Input con el objetivo específico siendo el objeto input que creamos previamente. Por lo tanto, cuando el participante presiona enter mientras usa este objeto, este evento se activará.

Acciones

Al especificar lo anterior, pasamos a definir las acciones que ocurren como resultado de este desencadenador.

Juntas, esta variable empaquetará la consulta del participante (la entrada) en un formato similar al chat precediéndola con el texto ‘Tú:’ y luego añadiendo un espacio de ruptura para comenzar una nueva línea.

• La acción Establecer/Registrar Variable contiene la variable chatString que hemos creado previamente.
• Hay varias operaciones aritméticas dentro de ella que esencialmente crean el efecto de un chat. Al combinar elementos de cadena con el (+), estás anexando y haciendo la cadena más larga al combinar variables y valores.
• Aquí hay una explicación de los valores dentro de esta operación aritmética:
  • ChatString: Se refiere a la variable específica y luego lo que sigue se anexará a ella.
  • Tú: Un valor de cadena constante que simplemente escribes para dar al participante su etiqueta.
  • input: La variable llamada input, 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 usando el <br> HTML.

La segunda acción que tenemos en este evento es la acción Enviar a 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 de la variable PromptsLeft en 1 (recuerda al principio que asignamos al participante la posibilidad de enviar 5 mensajes).

Una vez que el participante presiona enter, también queremos que avance a la siguiente prueba. Así que para eso, usamos una Acción de Salto y especificamos Siguiente Prueba.

NOTA: Creamos 6 pruebas para este estudio de ChatGPT y entenderás más adelante en la sección a continuación que muestra los datos registrados. Por supuesto, hay muchas formas de manejar cómo se utilizan las pruebas y para esta demostración elegimos este enfoque. Si tienes alguna pregunta, ¡contáctanos!

EVENTO ENTRANTE

Típicamente, se tarda un tiempo, de 100 a 500 milisegundos, en obtener una respuesta de ChatGPT. Una vez que se recibe la respuesta, entonces puede ser utilizada como un desencadenador para:

1. Registrar la respuesta como una variable almacenada
2. Presentar la respuesta visualmente en el chat
3. Navegar a la siguiente prueba

Desencadenador

El Desencadenador de OpenAI 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

Al especificar lo anterior, pasamos a definir las acciones que ocurren como resultado de este desencadenador.

De una 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 ‘Tú:’, escribimos ‘chatGPT:’ como el valor de cadena constante para preceder la respuesta en el chat… y en lugar de la variable ‘input’, invocamos la Respuesta de Chat GPT eligiéndola como el valor específico del desencadenador que se lista al hacer clic en el ícono del lápiz.

La acción a continuación también se agrega para registrar la Respuesta de ChatGPT (que se recibe automáticamente de la API) como su propio valor.

Dado que la tarea terminará automáticamente cuando el número de mensajes alcance =0, queremos darle al participante la oportunidad de leer la última respuesta de ChatGPT, así que retrasamos el final de la última prueba por 3000 ms usando una Acción de Control llamada Acción Demorada donde la Acción de Requerimiento estipula que si la variable PromptsLeft es igual a 0, entonces el experimento avanza a la Siguiente Tarea.

Pantalla Final y Guardar Datos - Tarea 2

En nuestro caso, la siguiente tarea se llama 'Finalizar' y es una pantalla de agradecimiento donde el experimento está configurado para aceptar la sesión, es decir, el estudio ha terminado.

Evento de Aceptación de Sesión

Para guardar los datos del estudio, queremos aceptar la sesión y finalizar el estudio cuando el participante llega a este punto.

Desencadenador

Así, el desencadenador es En Inicio de Marco:

Acción

Usando otra Acción Demorada, se utiliza la Acción de Salto → Aceptar / Finalizar Sesión para guardar los datos.

Usamos la acción demorada porque el estudio se cerrará/terminará automáticamente después de que haya pasado el tiempo y queremos dar a los participantes tiempo para leer lo que hay en la pantalla antes de que el estudio finalice.

Vista Previa de Datos Registrados de la Demostración de ChatGPT

La imagen a continuación captura cómo se verán los datos de esta configuración de estudio en la pestaña Vista de Datos y Exportación donde se muestran los números de prueba (Trial_Nr), nombre de la tarea (Task_Name), respuestas de chatGPT y mensajes de los participantes (input), así como el número de mensajes restantes (PromptsLeft):

Conclusión

En definitiva, esta demostración muestra cómo puedes utilizar la función de ChatGPT para crear una interacción y diálogo entre el participante y ChatGPT mientras guardas las entradas y respuestas como valores de variable.

Hay muchos enfoques y formas en que se puede usar esta función para construir un estudio de ChatGPT. ¡Así que no dudes en contactarnos si tienes alguna pregunta!