ChatGPT研究 | 手順書
概要
このChatGPTデモでは、参加者がプロンプトを書き込むと、ChatGPTからの回答がLabvancedに表示される様子を見ることができます。このデモは、あなたのアカウントにインポートして、ChatGPT研究のテンプレートとして使用することも可能です。
以下のように、プロンプトを書く参加者と、ChatGPTからのメッセージが表示されるチャットエリアと、入力フィールドがあります。
デモが動作している様子と、動画の最後に表示される記録データは次のようになります。
この手順書では、ChatGPT研究を設定する方法をステップごとに説明し、この強力な機能を次の研究に組み込む方法に慣れてもらいます。
注意: 研究でChatGPTとの接続を確立するためには、SettingsタブのSpecial FeaturesセクションにあるOpen AI Integrationの下に、自分の固有の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変数を選択します。開始値テキストが表示されるようになります。 |
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-reverseCSSスタイルオプションを使用して実現されます。これにより、チャットの一番上に新しいメッセージではなく、一番下に新しいメッセージが表示されます。
これを次のように見せる必要があります：
このコードスニペットを入力した瞬間、ChatString変数の名前がオブジェクトの下端に移動します。
この同じObject Propertiesパネルを使用して、チャットボックスのスタイルを指定し、Border-SizeとBorder-Colorを指定できます。この例では、Border-Sizeは2に、Border-Colorは黒に設定されています。
開始値: チャットボックス内のテキスト
一般的に、誰かがChatGPTにアクセスするとき、例えば「こんにちは、どのようにお手伝いできますか？」のようなプロンプトメッセージがあります。このような開始メッセージを追加するには、作成された変数（Chat Boxオブジェクト内でリンクされています）にアクセスし、Variable Propertiesの下にそれをタイプすることで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オブジェクトです。したがって、参加者がこのオブジェクトを使用してEnterを押すと、このイベントがトリガーされます。
アクション
上記を指定したら、このトリガーの結果として発生するアクションを定義します。
この変数は、参加者のクエリ（入力）をチャットのような形式にパッケージ化し、'You:'というテキストで前置きし、次の行を開始するために改行スペースを追加します。
Set/Record Variableアクションには、以前に作成したchatString変数が含まれています。- 中にあるいくつかの
算術操作は、基本的にチャットの効果を作成します。文字列要素を(+)で結合することで、変数と値を組み合わせて文字列が長くしていることになります。 - この算術操作内の値の説明は以下の通りです：
ChatString: 特定の変数を呼び出し、次に続くものはそれに追加されます。You:参加者にラベルを付けるためにタイプする定数文字列値。input: 参加者が入力フィールドに入力した内容がここでチャットボックスに表示されます。<br><br>: 新しい行を作成する方法としてHTMLの<br>を使用する定数文字列値。
このイベントの2つ目のアクションは、Send to OpenAIアクションで、参加者が書いた内容（すなわち、input変数の内容）をOpenAIに送信するためにAPIを使用します。
また、PromptsLeftの変数値を1つ減少させる必要があります（先に参加者が送信できるプロンプト数を5として割り当てたことを思い出してください）。
参加者がEnterを押すと、次のトライアルに進む必要があります。そのためにJump Actionを使用し、Next Trialを指定しました。
注意: このChatGPT研究には6つのトライアルを作成しました。下記のセクションで記録されたデータを示すことになります。トライアルの扱い方には多くの方法があり、このデモではこのアプローチを選択しました。質問がありましたら、お気軽にお問い合わせください。
受信イベント
通常、ChatGPTからの応答を得るのに、約100～500ミリ秒かかります。応答を受け取ると、次のトライアルに進むためのトリガーとして使用できます：
- 応答を保存変数として記録する
- チャットに回答を視覚的に表示する
- 次のトライアルに移動する
トリガー
OpenAI Triggerは、APIを利用してChatGPTからの回答を受け取り、その値を以前に作成した2列のデータフレーム（ここではdfと呼ばれる）に保存します。
アクション
上記を指定した後、このトリガーの結果として発生するアクションを定義します。
前のステップで参加者の入力を表示したのと非常に似た方法で、今度はChatGPTの回答をチャットに表示します。
ここでの違いは、‘You:’ではなく、チャット内で回答の前に定数文字列値として‘chatGPT:’を書くことです…そしてinput変数の代わりに、トリガー固有の値としてChat GPT Answerを選択し、ペンのアイコンをクリックするとリストされます。
下記のアクションも追加され、ChatGPTからAPIによって自動的に受け取ったChatGPTの回答を独自の値として記録します。
プロンプト数が0に達するとタスクが自動的に終了するため、参加者にChatGPTからの最後の回答を読む機会を与えたいので、Control Action(/content/learn/ja/guide/task-editor/event-system.html#control-actions)を使用して3000ミリ秒最後のトライアルの終了を遅延させます。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機能を活用する方法を示しています。
この機能を使ってChatGPT研究を構築するには多くのアプローチや方法があります。質問があれば、お気軽にお問い合わせください！