Estudio ChatGPT | Guía

Resumen

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 grabados que se muestran al final del video:

En esta guía, discutiremos paso a paso cómo configurar un estudio de ChatGPT para que puedas familiarizarte con su contenido y comenzar 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 Settings pestaña bajo Special Features dedicada a Open AI Integration.

Variables en la Tarea de ChatGPT

Las Variables mantienen y almacenan datos grabados, incluyendo valores de cadena y numéricos. Muy a menudo, los investigadores que están cómodos usando Labvanced, crean una variable en el momento, como cuando crean un evento.

Para los propósitos de esta demostración, enumeraremos las variables con anticipación como se describe en la próxima sección:

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.

Objetos de Texto para Mostrar

Los objetos de texto para mostrar 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 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 hacia abajo. Esto influye en cómo se presenta la información. Para crear un efecto similar al de un chat, necesitamos ingresar un comando CSS para el objeto Chat Box para que el texto del chat se invierta, mostrando el texto nuevo en la parte inferior (queremos esto porque así es como se ve el chat en la vida real con los mensajes nuevos apareciendo en la parte inferior).

Para crear este efecto, simplemente selecciona el objeto Chat Box y en el panel derecho donde se listan las propiedades del objeto, desplázate hacia abajo hasta el área de Change CSS Properties 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 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 el mismo panel Object Properties, también puedes especificar el estilo de la caja de chat asignando un Border-Size y Border-Color que, en el ejemplo anterior, tiene el Border-Size configurado en 2 y el Border-Color en negro.

Valor Inicial: Texto Dentro de la Caja de Chat

En general, cuando alguien accede a ChatGPT, hay algún tipo de mensaje de invitación, de la línea de ‘Hola, ¿cómo puedo ayudarte hoy?' Puedes agregar un mensaje de inicio de este tipo accediendo a la variable creada (que está vinculada dentro del objeto Chat Box) y dándole un Start Value escribiéndolo en Variable Properties.

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 añade una nueva línea del 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 aún más las opciones asociadas con este objeto en particular, bajo el panel de la derecha Object Properties, cuando se selecciona este objeto, asegúrate de que las siguientes opciones estén indicadas:

• La opción Show Question Header: está deseleccionada
• Input type está seleccionada para ser text.
• Focused está marcada como true, 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).

Resumen de Eventos

Los eventos son necesarios en este estudio de ChatGPT para llevar a cabo las siguientes acciones:

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

Para los propósitos de esta guía, creamos y nombramos dos eventos principales bajo los cuales se abordarían 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 hacia OpenAI.

Con este evento, nuestro objetivo es:

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

Disparador

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

Acciones

Después de especificar lo anterior, procedemos a definir las acciones que ocurren como resultado de este disparador.

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

• La acción Set/Record Variable contiene la variable chatString que hemos creado previamente.
• Hay varias Arithmetic operaciones dentro de ella que esencialmente crean el efecto de un chat. Al combinar elementos de cadena con el (+) estás anexando 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 anexará a ella.
  • You: 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 el cuadro de chat.
  • <br><br>: Un valor de cadena constante que indica 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 de la variable PromptsLeft en 1 (recuerda que al principio permitimos que el participante pueda enviar 5 mensajes).

Una vez que el participante presiona enter, también queremos que pase al siguiente ensayo. Por lo tanto, utilizamos un 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 registrados. Por supuesto, hay muchas formas de manejar cómo se utilizan los ensayos y para esta demostración elegimos este enfoque. ¡Si tienes alguna pregunta, no dudes en comunicarte con nosotros!

EVENTO ENTRANTE

Típicamente, toma tiempo, entre 100-500 milisegundos obtener una respuesta de ChatGPT. Una vez que se recibe la respuesta, entonces puede usarse como un disparador para:

1. Grabar la respuesta como una variable almacenada
2. Presentar la respuesta visualmente en el chat
3. Navegar al siguiente ensayo

Disparador

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 (nombrado df aquí) que creamos previamente.

Acciones

Después de especificar lo anterior, procedemos a definir las acciones que ocurren como resultado de este disparador.

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’ llamamos a la Chat GPT Answer eligiéndola como el valor específico del disparador que aparece al hacer clic en el ícono de lápiz.

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

Porque la tarea finalizará automáticamente cuando el número de Mensajes llegue a 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 un Control Action llamado Delayed Action donde el Requirement Action estipula que si la variable PromptsLeft es igual a 0, entonces el experimento progresa a Next Task.

Pantalla Final y Guardar Datos - Tarea 2

En nuestro caso, la siguiente tarea se llama ‘Fin’ 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 llegue a este punto.

Disparador

Así, el disparador es On Frame Start:

Acción

Usando otro Delayed Action, el Jump Action → Accept / End Session se utiliza para guardar los datos.

Utilizamos la acción retardada 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 está en la pantalla antes de que finalice el estudio.

Vista Previa de Datos Registrados de la Demo de ChatGPT

La imagen a continuación captura cómo se verá la configuración de datos de este estudio en el Dataview and Export Tab donde se muestran los números de ensayo (Trial_Nr), nombre de la tarea (Task_Name), respuestas de chatGPT y avisos de los participantes (input), así como el número de mensajes restantes (PromptsLeft):

Conclusión

En resumen, 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 esta característica puede ser utilizada para construir un estudio de ChatGPT. ¡Así que no dudes en comunicarte con nosotros si tienes alguna pregunta!