LoginSignup
37
43

More than 1 year has passed since last update.

【ハンズオン】ChatGPT?? プロンプトエンジニアリング?? Webエンジニアが必死で流行りにしがみつく

Posted at

「手を動かさなくなったら終わり。」

私自身、決して得意ではないですが勉強は好きです。
ですので、トレンドの移り変わりが激しく、日々勉強が要求されるソフトウェアエンジニアという職業は割と性に合っていると思っていますいました。

しかし、最近は転職して忙しくなりビジネス寄りの仕事も増え、勉強時間の確保が難しくなってしまいました。そんなところに、ChatGPTブームが直撃しました。もちろん、ChatGPTを使うことはありますが、結局慣れているGoogle検索に落ち着いてばかりで、イマイチ使いこなせている気がしません。

  • 「最新技術が登場したらすぐさまキャッチアップして使いこなすという理想のエンジニア像からどんどん離れていってしまっている、、」
  • 「このままChatGPTに関して開発者としてだけでなく利用者としても取り残されてしまい、いつかエンジニアとして終わりを迎えてしまうのか、、」

と悲観的になっていたところ、なんと社内で行われる有志のハッカソンに声をかけてもらい、手を動かしながらChatGPT APIで遊ぶ機会を得ることができました。

本記事は、私のように 自ら行動を起こすほどではないが、機会があればChatGPT APIを使って手を動かしてみたいと考えているエンジニア の皆さんに最初の機会をご提供できればと思います。

ハンズオン内容

Webエンジニアなら初めて使う技術でもAPIを1本開発すればかなり解像度が上がるだろうということで、私が社内ハッカソンで作成した下記機能を例に進めていきたいと思います。

  1. ユーザーAとユーザーBそれぞれの情報を学習したChatGPT同士が架空の会話を行う
    • 今回こちらは、ChatGPTを使用してダミーデータを作成します
  2. ユーザーAに対して、その架空の会話の要約と友達としてのユーザーBのおすすめ度を伝える
    • ChatGPT APIとAzure Logic Appsを使って、ローコードでWeb APIを開発します

前提条件

このハンズオンを進めるにはあらかじめ以下のものを用意していただく必要があります。

ChatGPTを使用したダミーデータの作成

流行りに取り残されかけていた私にとって、まず最初の驚きは適当なデータの作成にChatGPTが便利すぎるという点でした。ChatGPTを使えば、それっぽい確からしいダミーデータを簡単に用意することができます。

今回はユーザーAとユーザーBの架空の会話履歴を作成してもらいます。
そして、ChatGPTに指示を出す上で以下のことに注意をします。

  • トークン消費量を減らすために、日本語ではなく英語で会話をしてもらう
  • NoSQLデータベース(Azure Cosmos DB)にそのままアップロードしたいので、JSON形式で出力してもらう

特に「英語で会話をしてもらう」という点は重要なポイントです。
ChatGPTはメモリを持ちません。ですので、教えたい情報のすべてを1回のリクエストに含める必要があります。そして、そのすべての情報が最大トークン数以下である必要があります。
私自身も当初は日本語のまま進めていたのですが、ChatGPT APIに会話の要約を生成してもらう際に与える入力データが最大トークン数を上回ってしまいエラーが出てしまいました。
また、トークン消費量はAPI料金に直結するため、可能な限り減らした方が良いと思います。

より詳細な情報

以上のことを踏まえて、ChatGPTに依頼を投げます。

Aさん、Bさんはソフトウェア開発会社の同僚ですが、それぞれ別のプロジェクトに従事していて初対面です。
一人二役で10往復以上の雑談を英語でおこなってください。

以下がそれぞれの人物の情報です。

Aさん
・UserId: aaa
・職位:一般社員、フロントエンドエンジニア
・プロジェクト:ヘルスケア系アプリの保守運用
・学生時代:サッカー部、生徒会役員
・休日すること:ジム、読書

Bさん
・UserId: bbb
・職位:マネージャー、デザイナー
・プロジェクト:教育系アプリの新規開発
・学生時代:吹奏楽部
・休日すること:美術館に行く、散歩

すべての雑談結果を下記JSONフォーマットで出力してください。

[
    {
        "UserId": "aaa",
        "PartnerId": "bbb",
        "User": {
            "id": "aaa",
            "Name": "A"
        },
        "Partner": {
            "id": "bbb",
            "Name": "B"
        },
        "History": [
            {
                "UserId": "",
                "Message": "",
            },
        ]
    }
]

そうすると、以下のような返答が来ると思うので、あとで使用するためにmodels.jsonという名前でJSONファイルを作成して、コピペしておきます。

image.png

出力例のように会話の数が足らないことがよくあるので注意が必要です。
その場合、「10往復以上の会話をお願いします」などと再度依頼すると、期待した出力が得られます。

同様にCさんの情報も与えてダミーデータを作成しておくと比較ができて面白いと思います。
また、今回使用したプロンプトは私の限界ではありますが、まだまだ改善の余地があると思うので、興味がある方は以下の記事を参考に、より良いダミーデータを得るためのプロンプトを設計してみてください。

Azure OpenAI Service

続いて、AzureでChatGPT APIが利用できるように準備していきます。
Azure OpenAIではなくOpenAI APIを利用する場合は、本章を読み飛ばしていただいても構いません。

リソースの作成とモデルのデプロイ

※この先のハンズオンを進めるには、Azure OpenAI Serviceのアクセス申請が承認されている必要があります。

リソースの作成

  1. Azure OpenAI 作成ページ へ移動します
  2. 必要な情報を入力します
    • サブスクリプション
      • 今回用意した Azure サブスクリプション
    • リソースグループ
      • chatgpt-hands-on
        • 新規作成する必要があります
    • リージョン
      • East US
    • 名前
      • サブドメイン名になるので、一意な名前を適当に選んでください
    • 価格レベル
      • Standard S0
  3. 「確認および作成」を押下し、確認して問題なければ「作成」を押下します
    image.png

モデルのデプロイ

  1. リソースの作成が完了したら、「リソースに移動」を押下します
    image.png
  2. 作成した Azure OpenAI リソースの「概要」タブにある「探索」を押下すると、Azure OpenAI Studio が起動します
    image.png
  3. Azure OpenAI Studio に移動したら、「新しいデプロイの作成」を行います
    image.png
    image.png
  4. 以下の情報を入力して、「作成」を押下します
    • モデル
      • gpt-35-turbo
    • スケーリング
      • 1
    • デプロイ名
      • chatgpt-hands-on-deploy
        image.png

ChatGPT プレイグラウンドで遊んでみる

  1. モデルが正常に作成されたら、「プレイグラウンドで開く」を押下します
    image.png
  2. ChatGPT プレイグラウンドに移動したら、適当に遊んでみてください
    • システムメッセージ
      • アシスタントに従ってもらいたい手順またはルールなどの事前情報を入力します
    • ユーザーメッセージ
      • 先ほどのダミーデータの作成依頼のようないわゆる"ChatGPT上でのユーザー入力"と同等です
        image.png
  3. 会話を重ねるごとに現在のトークン数が増加することが確認できると思います
    image.png
  4. さらに「コードの表示」を押下し、「curl」を選択すると実際のリクエスト内容が確認できます
    • messagesの中身を見ると、1回のリクエストで会話履歴を含めすべてのデータを送信していることがわかります
      • "role":"system":システムメッセージの内容
      • "role":"user":ユーザーメッセージの内容
      • "role":"assistant":ChatGPTの返答内容
        image.png

実際に使用するプロンプトを考える

プレイグラウンドで遊んだ結果、システムメッセージとユーザーメッセージを入力としてChatGPT APIにリクエストできることがわかりました。

そして、今回ユーザーメッセージには先ほどChatGPTで作成したダミーの会話履歴のJSONを指定します。
ですので、そのJSONから会話の要約と友達としてのおすすめ度をChatGPT APIに返してもらうように、システムメッセージのプロンプトを設計する必要があります。

今回使用するシステムメッセージ

アシスタントは、会話履歴から友達になることができるかを判定するプロです。
ユーザー情報と会話履歴が入ったJSONを受け取って、"User"にとって"Partner"が友達として相応しいかを判定します。
"User"から"Partner"についてのおすすめ度を聞かれたので、その質問に対して回答します。

# 制限事項
- 出力は日本語
- 重要な情報のみ
- 小学生でもわかるように
- 文字数は日本語で300文字程度
- "User"は"Partner"と会話した内容を知らない
- "User"への返答です
- おすすめ度を100点満点評価する
- おすすめ度は厳しく評価する

# 出力
- "Partner"の情報も含めた会話のAbstract
- 友達としてのおすすめ度

トークン消費量を減らすため、実際にはChatGPTに英語に直してもらったものを使用します。

The assistant is a professional in determining if someone could become a friend based on conversation history. It receives a JSON containing user information and conversation history, then decides whether the 'Partner' is suitable as a friend for the 'User'. It responds to the question asked by the 'User' regarding the recommendation level of the 'Partner'.
# Limitations
- Output must be in Japanese
- Only important information
- Easy enough for a primary schooler
- About 300 characters in Japanese
- The 'User' is unaware of the content of conversations with the 'Partner'
- This is a response to the 'User'
- Rate the recommendation on a strict scale out of 100 points
- The recommendation should be evaluated strictly
# Output
- An abstract of the conversation, including information about the 'Partner'
- A recommendation score for the 'Partner' as a friend

では、実際に試してみましょう。
上記をシステムメッセージに入力して、先ほどChatGPTで作成したダミーの会話履歴のJSON(一番外側の[, ]は含めないように注意してください)をユーザーメッセージに入力します。
image.png
会話の要約とユーザーBのおすすめ度に関するユーザーAに対してのメッセージをChatGPT APIから取得することができました。

あとは、これをWeb APIに組み込むことができれば完成です。

Azure Cosmos DB

Web APIの作成に取りかかる前に最後の下準備を行います。
会話履歴のJSONデータを永続化して、Web APIから呼び出せるようにするために、Azure Cosmos DBをデプロイします。

Azure Cosmos DBはNoSQLデータベースで、非構造化データや半構造化データをJSON形式で格納します。
そこで各データを分散させた上で一意に特定できるようにするために、パーティションキー(とパーティション内で一意性を担保するために自動で振られるitem ID[id])を設定する必要があります。

今回格納する会話履歴のJSONデータ(ChatGPTに作成してもらったダミーデータ)は、UserIdPartnerIdが決まればデータを一意に特定できます。
はじめは、階層パーティションキーを使用してUserIdPartnerIdをパーティションキーに指定しようと思ったのですが、Web APIで使用するAzure Logic Appsのコネクタが階層パーティションキーに対応していなかったため断念しました。
ですので、今回はUserIdのみをパーティションキーに指定して進めたいと思います。

参考情報

リソースの作成とコンテナーの追加

それでは、Azure Cosmos DB アカウントを作成して、データ格納場所であるコンテナーを追加していきます。

リソースの作成

  1. Azure Cosmos DB アカウント 作成ページ へ移動します
  2. 「コア (SQL)」の「作成」を押下します
    image.png
  3. 必要な情報を入力します
    • サブスクリプション
      • 今回用意した Azure サブスクリプション
    • リソースグループ
      • chatgpt-hands-on
        • 今回作成したものを選択します
    • アカウント名
      • サブドメイン名になるので、一意な名前を適当に選んでください
    • 場所
      • (US) East US
    • 容量モード
      • プロビジョニングされたスループット
    • Free レベル割引の適用
      • 適用
        • 今回用意したAzureサブスクリプション内に既にFreeレベルのAzure Cosmos DBアカウントが存在する場合は選択できません
    • 合計アカウント スループットを制限する
      • チェックします
  4. 「レビュー + 作成」を押下し、確認して問題なければ「作成」を押下します
    image.png

コンテナーの追加

  1. リソースの作成が完了したら、「リソースに移動」を押下します
    image.png
  2. 作成した Azure Cosmos DBアカウントの「概要」タブにある「コンテナーの追加」を押下すると、コンテナー作成ページに遷移します
    image.png
  3. 必要な情報を入力します
    • Database id
      • Create newを選択します
      • chatgpt-hands-on-dbを入力します
      • Share throughput across containersをチェックします
    • Database throughput (autoscale)
      • Autoscaleを選択します
      • Database Max RU/sを1000のままにします
    • Container id
      • 会話データを格納するのでConversationsとします
    • Indexing
      • Automaticを選択します
    • Partition key
      • 先ほど決めた/UserIdを入力します
  4. 「OK」を押下して、コンテナーを作成します
    image.png
    image.png

ダミーデータのアップロード

  1. 「データエクスプローラー」タブを開いて、作成した「Conversations」コンテナーの「Items」を選択します
    image.png
  2. 「Upload Item」を押下し、ChatGPTでダミーの会話履歴を作成したときにコピペしたmodels.jsonを選択して、「Upload」します
    image.png
  3. データの作成に成功したら、ページを更新します
    image.png
  4. 再び「Conversations」コンテナーの「Items」を選択すると、ダミーデータが追加されていることが確認できます
    image.png

Azure Logic Apps

全ての準備が整いましたので、いよいよ Web API の作成に入ります!
本ハンズオンでは、Azure Logic Appsを使用してローコードでWeb APIを開発します。

処理の大まかな流れは以下の通りです。

  1. HTTP POST リクエスト で、userIdpartnerIdを受け取ります
  2. 受け取ったuserIdpartnerIdに紐づく会話履歴をAzure Cosmos DBから取得します
  3. 取得した会話履歴のJSONデータ(ユーザーメッセージ)と事前に用意したシステムメッセージを入力としてChatGPT API(Azure OpenAI Service)にリクエストを送ります
  4. ChatGPT APIのレスポンスをSummaryとして追加し、Azure Cosmos DBのデータを更新します
  5. user, partner, summary を Web API のレスポンスとして返却します

リソースの作成とLogic Apps デザイナーの開始

まず、Logic Apps リソースを作成して、ワークフローを視覚的に作成するためのLogic Apps デザイナーを開始します

リソースの作成

  1. Azure Logic Apps 作成ページ へ移動します
  2. 必要な情報を入力します
    • サブスクリプション
      • 今回用意した Azure サブスクリプション
    • リソースグループ
      • chatgpt-hands-on
        • 今回作成したものを選択します
    • ロジック アプリ名
      • サブドメイン名になるので、一意な名前を適当に選んでください
    • 地域
      • East US
    • ログ分析を有効化
      • いいえ
    • プランの種類
      • 消費
    • ゾーン冗長
      • 無効
  3. 「確認および作成」を押下し、確認して問題なければ「作成」を押下します
    image.png

Logic Apps デザイナーの開始

  1. リソースの作成が完了したら、「リソースに移動」を押下します
    image.png
  2. Logic Apps デザイナーの初期画面に移動するので、Web API用トリガーである「HTTP 要求の受信時」を選択して、Logic Apps デザイナーを開始します
    image.png

ワークフローの作成

それでは、実際にLogic Apps デザイナーを用いて、ローコードでWeb APIを開発していきます。

HTTPリクエストを処理する

トリガーに指定した「HTTP 要求の受信時」のみが初期表示されるので、こちらを押下して設定していきます。
image.png
userIdpartnerIdをパラメータとして受け取るために、「要求本文の JSON スキーマ」を以下のように設定して保存します。
image.png

{
    "type": "object",
    "properties": {
        "userId": {
            "type": "string"
        },
        "partnerId": {
            "type": "string"
        }
    },
    "required": [
        "userId",
        "partnerId"
    ],
    "additionalProperties": false
}

次に「設定」に移動して、「スキーマ検証」をオンに変更して「完了」します。
image.png
image.png

Azure Cosmos DBから会話履歴を取得する

+ボタンを押下して、「アクションの追加」をしていきます。
image.png
検索欄にcosmosと入力し、表示されたAzure Cosmos DBの「ドキュメントをクエリする (V5)」を選択します。
image.png
すると、Azure Cosmos DBとの接続を設定する入力欄が表示されるので、必要な情報を入力して「作成」します。

  • 接続名
    • cosmos-db-connection
  • Authentication Type
    • Access Key
  • Account ID
    • 今回作成したAzure Cosmos DBのアカウント名を入力します
  • Access Key to your Azure Cosmos DB account
    • Azure Cosmos DBの「キー」タブにある「プライマリ キー」の値をコピペします
      image.png
      アカウント名(URIのサブドメイン)とプライマリキーは、Azure Cosmos DBアカウントの「キー」タブで確認できます。
      image.png

接続の作成が完了すると、「ドキュメントをクエリする (V5)」の設定ができるようになるので、今回作成したコンテナーの情報と会話履歴を取得するクエリを入力します。

  • 名前
    • 会話履歴をクエリする
  • Azure Cosmos DB アカウント名
    • Use connection settings
  • データベース ID
    • chatgpt-hands-on-db
  • コンテナー ID
    • Conversations
  • SQL 構文クエリ
    • SELECT * FROM c WHERE c.UserId= '@{triggerBody()['userId']}' AND c.PartnerId= '@{triggerBody()['partnerId']}'
      • triggerBody()を使用してリクエストボディ内の値を指定しています
  • パーティション キーの値
    • "@{triggerBody()['userId']}"
      image.png

これで、HTTPリクエストで受け取ったuserIdpartnerIdに紐づく会話履歴をAzure Cosmos DBから取得できました。

今回使用したAzure Cosmos DBコネクタでは、パラメーター化されたクエリがサポートされていないため、下記リクエストでSQL インジェクションされてしまいます。

{
    "userId": "aaa",
    "partnerId": "' OR '1'='1"
}

ですので、本運用時はSDKが使用できるストアドプロシージャやWeb APIなどでデータ取得を代用する必要があります。

取得したデータを後続の処理で使えるようにする

まず、会話履歴が正しく取得できているか、より具体的には取得したドキュメントの数が0より大きいかを検証します。
「アクションの追加」から「制御」を選択して、さらに「条件」を選択します。
image.png
image.png
「ドキュメントをクエリする (V5)」のレスポンスの型を確認すると、Countが0より大きいかの条件を追加すれば良いことがわかるので、以下のように入力します。

  • 名前
    • 会話履歴が存在するか
  • AND
    • body('会話履歴をクエリする')?['Count']
      • 「値の選択」を押下し、「式」タブに値を入力して「OK」します
        image.png
    • 次の値より大きい
    • 0
      image.png

続いて、条件分岐後のワークフローを組み立てていきます。
まず「False」の場合、つまり HTTPリクエストで受け取ったuserIdpartnerIdに紐づく会話履歴が存在しなかった場合、エラーレスポンスを返却して終了するというワークフローを追加します。

「False」側の「アクションの追加」から HTTPレスポンスを返却するための「応答」を追加します。
image.png
image.png
404エラーを返すように設定します。

  • 名前
    • 404 Not Found
  • 状態コード
    • 404
  • ヘッダー
    • Content-Type: application/json
  • 本文
    • { "message": "The requested conversation does not exist." }
      image.png

さらに、処理を終えるために「制御」の一つである「終了」アクションを追加します。
image.png
必要な情報を入力して、完成です。

  • 名前
    • 404 終了
  • 状態
    • 失敗
  • コード
    • 404
  • メッセージ
    • The requested conversation does not exist.
      image.png

これで「False」側のワークフローが完成したので、次は「True」側の処理の作成に移ります。
「True」の場合は、会話履歴が存在する場合なので、後続の処理で各種データを使用するために会話履歴のJSONをパースしておく必要があります。

「True」側の「アクションの追加」を押下します。
image.png
検索欄にjsonと入力し、「ビルトイン」タブに表示された「JSON の解析」を選択します。
image.png
ここで「ドキュメントをクエリする (V5)」のレスポンスの型を確認すると、valueにはドキュメントの配列が入っています。
しかし、Azure Cosmos DB 作成時に考察したようにUserIdPartnerIdが決まればデータを一意に特定できるはずなので、配列の要素数は必ず1つとなります。
つまり、配列の先頭のデータを取り出せば、該当の会話履歴を取得したことになります。

以上のことを踏まえて、次のように入力します。

  • 名前
    • 会話履歴(JSON)の解析
  • コンテンツ
    • first(body('会話履歴をクエリする')?['value'])
      • 「式」タブで入力します
      • first()で配列の最初の要素を取得します
  • スキーマ
    • 以下のJSONをコピペします
    • Conversationsコンテナー内のitemのスキーマに対応します
{
    "type": "object",
    "properties": {
        "UserId": {
            "type": "string"
        },
        "PartnerId": {
            "type": "string"
        },
        "User": {
            "type": "object",
            "properties": {
                "id": {
                    "type": "string"
                },
                "Name": {
                    "type": "string"
                }
            }
        },
        "Partner": {
            "type": "object",
            "properties": {
                "id": {
                    "type": "string"
                },
                "Name": {
                    "type": "string"
                }
            }
        },
        "History": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "UserId": {
                        "type": "string"
                    },
                    "Message": {
                        "type": "string"
                    }
                },
                "required": [
                    "UserId",
                    "Message"
                ]
            }
        },
        "id": {
            "type": "string"
        },
        "_rid": {
            "type": "string"
        },
        "_self": {
            "type": "string"
        },
        "_etag": {
            "type": "string"
        },
        "_attachments": {
            "type": "string"
        },
        "_ts": {
            "type": "integer"
        }
    }
}

image.png

これで「True」側の処理も完成しました。
現段階でのワークフローの全体像は以下のようになっています。
image.png

ChatGPT API にリクエストを送る

ワークフローを組み立てる前に、ChatGPT API のリクエストに必要な情報を洗い出します。
Azure OpenAI Studio の ChatGPT プレイグラウンドに戻り、「コードの表示」で「curl」の内容を表示します。
※タブを閉じてしまった場合はシステムメッセージとユーザーメッセージに先ほどと同じものを再度入力してください
image.png
エンドポイント、APIキー、リクエストヘッダー、リクエストボディの内容が確認できるので、こちらを参考に Azure Logic Apps からも同じ形でリクエストを送るようにワークフローを組み立てていきます。
image.png
image.png

それでは、まずシステムメッセージとユーザーメッセージを格納するmessages配列を作成します。
末尾の+ボタンから「アクションの追加」を行います。
image.png
検索欄に変数と入力し、「ビルトイン」タブに表示された「変数を初期化する」を選択します。
image.png
以下のように入力します。

  • (アクションの)名前
    • ChatGPT入力配列を初期化する
  • 名前
    • ChatGPT入力配列
  • 種類
    • アレイ
    • (空欄のまま)
      image.png

空のmessages配列の作成が完了したので、続いてシステムメッセージを追加していきます。
「アクションの追加」から「配列変数に追加」を選択します。
image.png
ChatGPT プレイグラウンドで確認した通りに、システムメッセージを入力します。

  • (アクションの)名前
    • ChatGPT入力配列にシステムメッセージの追加
  • 名前
    • ChatGPT入力配列
    • 以下のJSONをコピペします
{
    "role": "system",
    "content": "The assistant is a professional in determining if someone could become a friend based on conversation history. It receives a JSON containing user information and conversation history, then decides whether the 'Partner' is suitable as a friend for the 'User'. It responds to the question asked by the 'User' regarding the recommendation level of the 'Partner'.\n# Limitations\n- Output must be in Japanese\n- Only important information\n- Easy enough for a primary schooler\n- About 300 characters in Japanese\n- The 'User' is unaware of the content of conversations with the 'Partner'\n- This is a response to the 'User'\n- Rate the recommendation on a strict scale out of 100 points\n- The recommendation should be evaluated strictly\n# Output\n- An abstract of the conversation, including information about the 'Partner'\n- A recommendation score for the 'Partner' as a friend"
}

image.png

同様にして、ユーザーメッセージも追加します。
ここでユーザーメッセージに指定するのは、Azure Cosmos DBから取得した会話履歴であることに留意してください。
「アクションの追加」から「配列変数に追加」を行います。

  • (アクションの)名前
    • ChatGPT入力配列にユーザーメッセージ(会話履歴)の追加
  • 名前
    • ChatGPT入力配列
    • 以下のJSONをコピペします
    • 「会話履歴(JSON)の解析」でパースした値を使用します
{
    "role": "user",
    "content": "{\"User\":@{body('会話履歴(JSON)の解析')?['User']},\"Partner\":@{body('会話履歴(JSON)の解析')?['Partner']},\"History\":@{body('会話履歴(JSON)の解析')?['History']}}"
}

image.png

messages配列が完成したので、いよいよ ChatGPT API へリクエストを送ります。
正しく入力できていたら下図のようになっているはずです。末尾の「アクションの追加」を押下して、HTTPリクエスト用のアクションを追加していきます。
image.png
検索欄にhttpと入力し、「ビルトイン」タブに表示された「HTTP」を選択します。
image.png
ChatGPT プレイグラウンドで確認した通りに入力していきます。

  • 名前
    • ChatGPTへのHTTPリクエスト
  • 方法
    • POST
  • URI
    • ChatGPT プレイグラウンドの「エンドポイント」の値をコピペします
  • ヘッダー
    • Content-Type: application/json
    • api-key: ChatGPT プレイグラウンドの「キー」の値をコピペします
  • 本文
    • 以下のJSONをコピペします
{
  "messages":  @{variables('ChatGPT入力配列')},
  "max_tokens": 800,
  "temperature": 0.5,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "top_p": 0.95,
  "stop": null
}

image.png

OpenAI APIを利用する場合

ここまでで、Azure Cosmos DBから取得した会話履歴をもとに会話の要約と友達としてのおすすめ度を生成するようChatGPT APIへリクエストを送るところまでが完成しました。

ChatGPT API のレスポンスをAzure Cosmos DBに保存する

ChatGPT APIのレスポンスはJSON形式なので、後続の処理でレスポンス内容を使用するにはJSONをパースしておく必要があります。
Azure Cosmos DBのクエリ結果のときと同じように「アクションの追加」から「JSON の解析」を追加します。

  • 名前
    • ChatGPT出力結果(JSON)の解析
  • コンテンツ
    • @{body('ChatGPTへのHTTPリクエスト')}
  • スキーマ
    • 以下のJSONをコピペします
    • レスポンスの型とスキーマが対応する必要があります
{
    "type": "object",
    "properties": {
        "id": {
            "type": "string"
        },
        "object": {
            "type": "string"
        },
        "created": {
            "type": "integer"
        },
        "model": {
            "type": "string"
        },
        "choices": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "index": {
                        "type": "integer"
                    },
                    "finish_reason": {
                        "type": "string"
                    },
                    "message": {
                        "type": "object",
                        "properties": {
                            "role": {
                                "type": "string"
                            },
                            "content": {
                                "type": "string"
                            }
                        }
                    }
                },
                "required": [
                    "index",
                    "finish_reason",
                    "message"
                ]
            }
        },
        "usage": {
            "type": "object",
            "properties": {
                "completion_tokens": {
                    "type": "integer"
                },
                "prompt_tokens": {
                    "type": "integer"
                },
                "total_tokens": {
                    "type": "integer"
                }
            }
        }
    }
}

image.png

それでは、ChatGPT APIのレスポンスをパースできたので、ChatGPTの返信内容をAzure Cosmos DBに保存していきます。
具体的には、「会話履歴をクエリする」で取得したドキュメントに、SummaryをキーとしてChatGPTの返信内容を追加して、更新をかけます。

「アクションの追加」からAzure Cosmos DBの「ドキュメントを置換 (V2)」を追加します。
image.png
以下のように入力します。

  • 名前
    • ChatGPT返信内容をCosmosDBに追加する
  • Azure Cosmos DB アカウント名
    • Use connection settings
      • 作成済みの接続設定を使用します
  • データベース ID
    • chatgpt-hands-on-db
  • コレクション ID
    • Conversations
  • ドキュメント ID
    • @{body('会話履歴(JSON)の解析')?['id']}
  • パーティション キーの値
    • "@{body('会話履歴(JSON)の解析')?['UserId']}"
      • 「Add new parameter」から入力項目を追加する必要があります
  • ドキュメント
    • 以下のJSONをコピペします
    • ChatGPTの返信内容は@{trim(body('ChatGPT出力結果(JSON)の解析')?['choices'][0]['message']['content'])}で取得できます
{
    "id": @{body('会話履歴(JSON)の解析')?['id']},
    "UserId": @{body('会話履歴(JSON)の解析')?['UserId']},
    "PartnerId": @{body('会話履歴(JSON)の解析')?['PartnerId']},
    "User": @{body('会話履歴(JSON)の解析')?['User']},
    "Partner": @{body('会話履歴(JSON)の解析')?['Partner']},
    "History": @{body('会話履歴(JSON)の解析')?['History']},
    "Summary": @{trim(body('ChatGPT出力結果(JSON)の解析')?['choices'][0]['message']['content'])}
}

image.png
これで、会話履歴のJSONデータにChatGPTの返信内容を追加して更新することができました。

HTTPレスポンスを返却する

最後に、Web APIのレスポンスを作成します。
レスポンスには、user, partner, summaryを含めます。

「アクションの追加」から HTTPレスポンスを返却するための「応答」を追加します。

  • 名前
    • 200 OK
  • 状態コード
    • 200
  • ヘッダー
    • Content-Type: application/json
  • 本文
    • 以下のJSONをコピペします
{
    "user": @{body('会話履歴(JSON)の解析')?['User']},
    "partner": @{body('会話履歴(JSON)の解析')?['Partner']},
    "summary": @{trim(body('ChatGPT出力結果(JSON)の解析')?['choices'][0]['message']['content'])}
}

image.png

そして、ワークフロー全体を正常に終了するために「終了」アクションを追加します。

  • 名前
    • 200 終了
  • 状態
    • 成功
      image.png

これで、ワークフローの作成は終了です。
ついに、ChatGPT API を利用した Web API が完成しました!!

ワークフローの全体像は以下のようになっています。
image.png
image.png
image.png

ワークフローの実行

最後に作成したWeb APIの動作確認を行います。
Logic Apps デザイナー上部の「トリガーの実行」を押下して、「ペイロードで実行」を選択します。
image.png
事前にAzure Cosmos DBにアップロードしたダミーデータのuserIdpartnerIdを「本文」で指定して「実行」を押下します。

{
    "userId": "aaa",
    "partnerId": "bbb"
}

image.png
レスポンスの「状態コード」が200で返ってきたら成功です。
また、summaryには会話の要約とユーザーBのおすすめ度に関するユーザーAに対してのメッセージが入っていることが確認できるはずです。
image.png
さらに、Azure Cosmos DBの会話履歴データにもSummaryが追加されていることが確認できます。
image.png

Web APIの動作確認も問題なかったので、これでハンズオンは終了です。

手を動かした者だけが到達する境地

おつかれさまでした。

実際に手を動かしながらWeb APIを1本開発することで、流行りのChatGPTに対する解像度がかなり上がったのではないでしょうか。

そして、もうすでにChatGPT APIを使って次に作るものが決まっていたら、あなたは「私の理想のエンジニア」です。

37
43
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
43