ChatGPT スタディ | ウォークスルー
概要
この ChatGPT デモ では、参加者がプロンプトを書いたとき、ChatGPT からの回答が Labvanced に直接表示される様子を見ることができます！
下のように、すべての履歴が表示されるチャットエリアと、参加者がプロンプトを入力するための入力フィールドがあります：
これは、デモの実行中の様子と、ビデオの最後に表示される記録データです：
このウォークスルーでは、ChatGPT スタディの設定方法をステップバイステップで説明し、その内容に慣れ、この強力な機能を次のスタディに組み込む準備をしましょう！
注意：スタディで ChatGPT との接続を確立するためには、Settings タブの Special Features に、あなた自身のユニークな API キーを入力する必要があります。
ChatGPT タスクの変数
変数 は、文字列や数値を含む記録データを保持および保存します。 Labvanced の使用に慣れた研究者は、イベントを作成するときに、その場で変数を作成することがよくあります。
このデモの目的のために、今後のセクションで説明するように、事前に変数をリストします：
| 変数名 | 説明 |
|---|---|
chatString | この変数は、参加者からのプロンプトと ChatGPT からのメッセージを表示するチャットの行を形成し、下のイベントセクションで詳しく説明されます。 追加の変数設定：
|
df | これは、データフレーム変数としてアップロードされた 2 列の .csv ファイルです。 |
chatGPTAnswer | この変数は、[下でさらに説明]されるときにシステムによって自動的に認識されます。この時点では作成する必要はありませんが、後で言及されるのでリストしています。 追加の変数設定：
|
PromptsLeft | このデモでは、参加者に 5 つのプロンプトを割り当てたいと考えています。そのため、最初の値を 5 として数値変数を作成し、各プロンプトが ChatGPT に送信されるたびに、そのカウンターを減少させるためにイベントを使用する必要があります。 追加の変数設定：
|
Input | 参加者が ChatGPT へのプロンプトとして入力した内容を保持するために、入力フィールドオブジェクト をエディタに入れるとすぐにこの変数が作成されます。 追加の変数設定：
|
キャンバスにオブジェクトを追加する
チャットインターフェースを設定し、指示を表示するために、以下に説明するいくつかの異なる種類のオブジェクトをキャンバスに追加する必要があります。
表示テキストオブジェクト
表示テキストオブジェクトは、この ChatGPT スタディに必要です。なぜなら：
- 指示を提示する
- チャット履歴を画面に表示するため
このデモでは、以下の表示エレメントを作成して名前を付けました：
| 表示テキスト名 | 説明 |
|---|---|
Chat Box | Chat Box には、参加者からのすべてのプロンプトと ChatGPT からの回答がチャット形式で表示されます。この要素内には、参加者と ChatGPT の回答のチャット文字列を表示する chatString というリンク変数があります。 指示： 表示エレメントを追加し、大きくリサイズし、プレースホルダーテキストを「テキスト」などの別のものに変更して強調表示し、テキストエディタの上部にある赤い [x] をクリックし、メニューから ChatString 変数を選択します。 Start value テキストが表示されます。 |
Top Instructions | Top Instructions には、参加者への指示が含まれ、参加者が使用できるプロンプトの残りの数を表示する PromptsLeft というリンク変数があります。 |
チャットボックス効果の作成
深く掘り下げる前に、会話が表示されるチャットボックスについて話しましょう。
Labvanced はブラウザで動作するアプリであるため、画面の上部から下部にレンダリングされます。これにより、情報の表示方法に影響を与えます。チャットのような効果を作成するために、Chat Box オブジェクトの CSS コマンドを入力して、テキストのフローを逆にする必要があります。新しいテキストが下に表示されるようにします（これは、チャットが現実生活で新しいメッセージが下に表示されるため、望ましいことです）。
この効果を作成するには、Chat Box オブジェクトを選択し、オブジェクトプロパティが一覧表示されている右側のパネルで Change CSS Properties のエリアまでスクロールし、次のコードを挿入します： p{ height: 300px; overflow: auto; display: flex; flex-direction: column-reverse; padding: 10px }
これは、column-reverse CSS スタイルオプションによって実現され、テキストのフローが逆になり、チャットの下部に新しいメッセージが表示されるようになります。
これが次のように表示されます：
このコードスニペットを入力すると、ChatString 変数の名前がオブジェクトの下部にジャンプします。
同じ Object Properties パネルを使用して、チャットボックスのスタイルを指定し、Border-Size と Border-Color を割り当てることもできます。上記の例では、Border-Size が 2 に設定され、Border-Color が黒になります。
開始値: チャットボックス内のテキスト
一般的に、誰かが ChatGPT にアクセスする場合、「こんにちは、今日はどのようにお手伝いできますか？」のようなプロンプトメッセージがあります。このような開始メッセージを、Chat Box オブジェクト内でリンクされた作成した変数にアクセスし、Start Value を入力して設定することで追加できます。
上記のように、このデモでは次の開始メッセージを使用しています： ようこそ！ 以下の入力フィールドに入力を開始してください 😃 <br><br>
注意： <br> は、チャットの各新しい行が作成され、チャットボックス内に追加されるときに、新しい行を作成するための 改行 を作成する HTML タグです。
入力フィールド
入力フィールドは、参加者が ChatGPT に送信するプロンプトを書く場所です。これを作成するには、エディタのサイドオブジェクトパネルから 入力オブジェクト を挿入するだけです。
挿入すると、このオブジェクトに関連付けられた変数の名前を付けるように求められます。このデモでは、オブジェクトに input という名前を付けました。
重要： 特定のオブジェクトに関連するオプションをさらに制御するために、Object Properties 右側のパネルでこのオブジェクトが選択されたときに、次のオプションが指定されていることを確認してください：
Show Question Header:オプションは 非選択Input typeはtext.に設定されますFocusedはtrueとしてマークされ、タイピングフィールドをアクティブにします（つまり、参加者が毎回クリックしなくても入力できるようになります）。
イベント概要
イベントは、この ChatGPT スタディで次のアクションを達成するために必要です：
- 参加者のプロンプトを ChatGPT に表示して送信する
- ChatGPT の回答を受け取り、表示する
- チャット文字列（参加者によって書かれ、ChatGPT によって作成された）
- 次のトライアルに進む
このウォークスルーの目的のために、上記のアクションが説明される 2 つの主要イベントを作成して名前を付けました：
- 送信イベント： つまり、ChatGPT にメッセージを送信しチャットに表示すること
- 受信イベント： つまり、ChatGPT からメッセージを受け取りチャットに表示すること
送信イベント
送信イベントは、参加者が ChatGPT に問い合わせを送信したときに発生するアクションを指します。つまり、Labvanced から OpenAI へのアウトゴーイングな情報です。
このイベントの目的は以下の通りです：
- チャットエリアに入力フィールドからのテキストを表示する
- 参加者の書いたプロンプトを変数データとして保存する
- ChatGPTに送信する
トリガー
このイベントを発動させるトリガーはEnter on Inputトリガータイプで、特定のターゲットは以前に作成したinputオブジェクトです。したがって、参加者がこのオブジェクトを使用してエンターキーを押すと、このイベントがトリガーされます。
アクション
上記を指定した後、このトリガーの結果として発生するアクションを定義します。
この変数は、参加者のクエリ（入力）をチャット形式でパッケージングし、それに「You:」というテキストを前置きし、その後に改行を開始するためのスペースを追加します。
Set/Record Variableアクションは、以前に作成したchatString変数を含んでいます。- その中にはいくつかの
Arithmetic操作があり、実質的にチャットの効果を生み出します。文字列要素を（+）で結合すると、変数と値を組み合わせて文字列が長くなります。 - 以下は、この算術演算内の値についての説明です：
ChatString：特定の変数を呼び出し、その後に続くものはそれに追加されます。You:：参加者にラベルを付けるための定数の文字列値です。input：変数inputの名前です。つまり、参加者が入力フィールドにタイプした内容がここでチャットボックスに表示されます。<br><br>：新しい行がHTMLの<br>を使用して作成される方法を示す定数の文字列値です。
このイベントの2つ目のアクションはSend to OpenAIアクションであり、APIを利用して参加者が書いた内容（すなわち、input変数の内容）をOpenAIに送信します。
また、PromptsLeftの変数値を1減少させたいと思います（最初に参加者に5つのプロンプトを送信できるように設定しました）。
参加者がエンターを押すと、次の試行に進んでもらいます。そのために、Jump Actionを使用し、Next Trialを指定しました。
注意： このChatGPT研究には6つの試行を作成しました。このセクションの下でデータが記録されていることを示しており、もちろん、試行の使用方法には多くの方法があり、このデモではこのアプローチを選びました。ご質問があれば、お気軽にご連絡ください！
到着イベント
通常、ChatGPTからの応答を得るには、約100-500ミリ秒かかります。応答が受信されると、それをトリガーとして次のことができます：
- 応答を保存された変数として記録する
- チャットで視覚的に答えを表示する
- 次の試行に移動する
トリガー
OpenAI Triggerは、APIを利用してChatGPTからの応答を受信し、その値を以前に作成した2列データフレーム（ここではdfと呼ばれています）に保存します。
アクション
上記を指定した後、このトリガーの結果として発生するアクションを定義します。
前のステップで参加者の入力を表示したのと同様に、今度はChatGPTの回答をチャットに表示するために同じことを行います。
ここでの違いは、「You:」の代わりに「chatGPT:」という定数の文字列値を書いて、応答をチャットに前置きすることです…そして、「input」変数の代わりにChat GPT Answerを呼び出し、それをトリガー特定値として選択します。
下記のアクションは、ChatGPTの応答（APIから自動的に受信される）を自身の値として記録するためにも追加されます。
タスクは、プロンプトの数が0に達すると自動的に終了するため、参加者にはChatGPTからの最後の応答を読む機会を与えたいと思います。そのため、3000ミリ秒の遅延を使用して、Control Actionを使い、Delayed Actionを使用します。Requirement Actionは、PromptsLeft変数が0に等しい場合、実験がNext Task.に進むことを示します。
エンドスクリーンとデータ保存 - タスク2
私たちの場合、次のタスクは「終了」と呼ばれ、実験がセッションを受け入れる感謝画面です。すなわち、研究は終了です。
セッション受け入れイベント
研究からのデータを保存するために、参加者がこのポイントに達したときにセッションを受け入れて研究を終了したいと考えています。
トリガー
したがって、トリガーはOn Frame Startです：
アクション
別のDelayed Actionを使用してJump Action→Accept / End Sessionを使用してデータを保存します。
遅延アクションを使用する理由は、研究が時間経過後に自動的に閉じる/終了するためであり、私たちは参加者に画面上の情報を読んでもらう時間を与えたいからです。
ChatGPTデモの記録データプレビュー
以下の画像は、この研究のデータがDataview and Export Tabにどのように表示されるかをキャプチャしており、試行番号（Trial_Nr）、タスク名（Task_Name）、chatGPTの答え、および参加者のプロンプト（input）、残りのプロンプト数（PromptsLeft）が表示されています：
結論
全体として、このデモは、参加者とChatGPTとのインタラクションと対話を作成し、入力と応答を変数値として保存する方法を示しています。
この機能は、ChatGPT研究を構築するさまざまなアプローチと方法で使用できますので、何か質問があればお気軽にお問い合わせください！