LoginSignup
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@annie(annie)

祝 Azure OpenAI Service GA! ⑥「あの」キャラクターを ChatGPT で LINE に召喚してみる

Posted at

1/16 に GA (General Availability: 一般提供) になった Azure OpenAI Service は、Azure 上で OpenAI が稼働するサービスです。Cognitive Services の一員として & Web API として利用できる、Studio と呼ばれる GUI が用意されており、テストや調整などが可能です。

今回は、Azure OpenAI Service にも用意されている ChatGPT を使って、伝説の「カ〇ル君」を ChatGPT で再現し、Azure Functions を使って LINE Messaging API と接続してみます。

3/10 現在、GA したとはいえ、Azure OpenAI Service を利用するには Web から利用申請が必要です。Text and Code Model (GPT-3) と Dall-E 2 の申し込みができますが、とりあえず Text and Code Model だけ申請するのがおススメ！ChatGPT は Text Model の権限があれば利用できます。また、申請時には有効な Azure サブスクリプション (のID) が必要です。

Azure OpenAI Service 自体は GA ですが、3/10~ 利用可能になった ChatGPT は現在プレビュー中です。

準備

  • Azure OpenAI Studio からお試し の記事を参考に、

    • Azure OpenAI Service のプレビュー申込 & Azure Portal からのサービス作成を行い、キーとエンドポイントをローカルに保存しておきます。
    • ChatGPT モデルの gpt-35-turbo をデプロイしておきます。

  • LINE Developer 登録 & Messaging API を使う準備 を参考に、LINE Developer アカウントの登録＆Messaging API チャネルの作成を行います。作成したチャネルの Messaging API 設定から チャネルアクセストークン を生成してコピー、ローカルに保存しておきます。

  • Rest API を POST 送信できるツール

    • こちらでは Postman を使います

  • IP トンネル(ローカル IP アドレス を一時的に公開できる)ツール

  • 開発環境

    • 今回は Azure Functions を使って Web API アプリを稼働させます。お好みですが、以下の開発ツール＆環境で動作確認をしています;
      • Windows 11 (x64 10.0.22621)
      • C#
        • Visual Studio Enterprise 2022 (x64) (v17.5.4)
      • Node.JS & Python
        • Visual Studio Code (v1.77.1)
        • Node.JS (v18.13.0)

  • サンプルコード

手順

Azure OpenAI Studio からチャットボットの挙動を調整する

Azure OpenAI Studio を開き、Azure OpenAI Service を作成した (or 利用するためのロールを持っている) アカウントでサインインします。

ChatGPT モデルの gpt-35-turbo がデプロイ済みであれば、[ChatGPT プレイグラウンド] が表示されるので、こちらをクリックします。

スクリーンショット 2023-04-10 211615.png

今回は、アシスタントのセットアップ の機能を使って、予め回答の方法を指示します。
システムメッセージ の欄に指示を入力します。
ここでは、

  • Microsoft 365 に関する質問に答える
  • 最初に挨拶して、ユーザーに質問を促す

ということを指示しています。
入力したら、[変更の保存] をクリックして保存します。

スクリーンショット 2023-04-24 193939.png

システムメッセージを更新しますか？ というダイアログが表示されたら、[続行] をクリックして保存します。
スクリーンショット 2023-04-10 212112.png

システムメッセージの通りに返答するか、[チャットセッション] で入力して確認します。

スクリーンショット 2023-04-24 194000.png

"しま〇ろう BOT" を ChatGPT で作ってみる: Azure OpenAI Studio からチャットボットの挙動を調整する の記事を参考に、お好みの回答を返すように調整してください。

Azure OpenAI Studio から Rest API POST に必要な方法を確認する

Azure OpenAI Studio の ChatGPT プレイグラウンドで、一旦チャットをクリアしてから、1回質問を入力 → 回答された状態で コードの表示 をクリックします。

スクリーンショット 2023-04-24 204204.png

サンプルコードが表示されます。サンプルコードの種類を curl に変更して、Rest API でアクセスするのに必要な情報を確認します。一番上部に書かれている URL がアクセスする Rest API のURL となります。こちらをコピーしてローカルに保存しておきます。
また、Header に必要な情報を確認します。Rest API の種類は POST、Headerには、ContentType (application/json) と api-key (Azure Portal で取得してローカルに保存しておいたキー) が必要であることが分かります。

スクリーンショット 2023-04-24 204336.png

さらに、サンプルコードの種類を json に変更して、Rest API のリクエスト本体 (Body) となる JSON を確認します。[コピー] をクリックして、ローカルに保存しておきます。

スクリーンショット 2023-04-24 204338.png

JSON は以下のフォーマットになっていることが確認できます。
ChatGPT からの回答は assistant として表示されています。ChatGPT に回答を生成することを指示したい場合は、この assistant の回答部分をブランクにして Rest API にリクエストします。(後で再度解説します)

{
  "messages": [
    {
      "role": "system",
      "content": ### システムメッセージ ###
    },
    {
      "role": "user",
      "content": ### ユーザーの質問 ###
    },
    {
      "role": "assistant",
      "content": ### ChatGPTからの返答 ### 
    }
  ],
  "temperature": 0.7,
  "top_p": 0.95,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "max_tokens": 800,
  "stop": null
}

Rest API ツール から Azure OpenAI Service にリクエスト送信して挙動を確認する

Rest API ツール (ここでは Postman) を開き、情報をセットします。

  • Type: POST
  • URL: これまでの手順でローカルに保存しておいた URL (https://XXXXXXX.openai.azure.com/openai/....)
  • Header:
    • Content-Type: application/json
    • api-key: Azure Portal からコピーしておいた Azure OpenAI サービスのキー

スクリーンショット 2023-04-10 215242.png

Request Body の部分は、これまでの手順でローカルに保存しておいた JSON をひとまずコピーし、assistant の回答部分を "" (ブランク) にします。

例えば、このような内容の JSON になります。

{
  "messages": [
    {
      "role": "system",
      "content": "あなたはMicrosoft 365(Microsoft Office)に関する質問に回答する、イルカのキャラクターです。最初に挨拶して、Microsoft 365に関する質問をユーザーに促してください。"
    },
    {
      "role": "user",
      "content": "Powerpointで図形を整列させる方法"
    },
    {
      "role": "assistant",
      "content": ""
    }
  ],
  "temperature": 0.7,
  "top_p": 0.95,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "max_tokens": 800,
  "stop": null
}

スクリーンショット 2023-04-24 193702.png

情報が入力できたら、POST してみます。
Response Body は JSON で表記されて、Choices > message に返答が書かれています。"role" : "assistant" になっているのを確認、"content" が実際の返答となります。思ったような返答が返されていればOKです。

スクリーンショット 2023-04-24 193740.png

ChatGPT からの回答は Rest API リクエストの度に生成されているので、毎回 (多少) 異なる回答になります。

Azure Functions のサンプルコードに Azure OpenAI Service および LINE Messaging API の情報をセットする

C# | Node.JS | Python のいずれかのサンプルコードを選び、以下の部分を修正します。

C#

ChatGPTFunc.cs の 20~23 行目を、上記の手順でローカルに保存しておいた内容で修正します。

  • aoaiUrl : Azure Portal からコピーした Azure OpenAI Service の URL
  • aoaiKey : Azure Portal からコピーした Azure OpenAI Service キー
  • aoaiModelName : Azure OpenAI Studio で作成した gpt-35-turbo のモデル名
  • lineApiToken : LINE Messaging API のページから取得した チャネルアクセストークン

Azure OpenAI Service の URL と gpt-35-turbo のモデル名 は Azure OpenAI Studio からコピーした RestAPI URL から取得できます。
RestAPI URL は、https://Azure OpenAI Service URL/openai/deployments/gpt-35-turbo のモデル名/chat/completions?api-version=2023-03-15-preview というフォーマットになっています。

ChatGPTFunc.cs
private static readonly string aoaiUrl = "https://YOUR_AOAI_SERVICE.openai.azure.com/";
private static readonly string aoaiKey = "YOUR_AOAI_KEY";
private static readonly string aoaiModelName = "YOUR_gtp-35-turbo_NAME";
private static readonly string lineApiToken = "YOUR_LINE_API_TOKEN";

さらに、ChatGPTFunc.cs の 60 行目を、上記の手順で調整したシステムメッセージに入れ替えます。

ChatGPTFunc.cs
new ChatMessage(ChatRole.System, @"あなたはMicrosoft 365(Microsoft Office)に関する質問に回答する、イルカのキャラクターです。最初に挨拶して、Microsoft 365に関する質問をユーザーに促してください。"),

Node.js

ChatGPTFunc/index.js の 1~4 行目にある以下の項目を、上記の手順でローカルに保存しておいた内容で修正します。

  • aoai_url : Azure OpenAI Studio からコピーした RestAPI URL
  • aoai_key : Azure Portal からコピーした Azure OpenAI Service キー
  • lineApi_token : LINE Messaging API のページから取得した チャネルアクセストークン
ChatGPTFunc/index.js
const aoai_url = 'https://YOUR_AOAI_SERVICE.openai.azure.com/openai/deployments/YOUR_gtp-35-turbo_NAME/chat/completions?api-version=2023-03-15-preview';
const aoai_key = 'YOUR_AOAI_KEY';
const lineapi_url = 'https://api.line.me/v2/bot/message/reply';
const lineapi_token = 'YOUR_LINE_API_TOKEN';

さらに、ChatGPTFunc/index.js の 47 行目を、上記の手順で調整したシステムメッセージに入れ替えます。

ChatGPTFunc/index.js
async function postToAOAI(question) {
    var req_body = {
      "messages": [
        {
          "role": "system",
          "content": "あなたはMicrosoft 365(Microsoft Office)に関する質問に回答する、イルカのキャラクターです。最初に挨拶して、Microsoft 365に関する質問をユーザーに促してください。"
        },

Python

function_app.py の 5~12 行目にある以下の項目を、上記の手順でローカルに保存しておいた内容で修正します。

  • openai.api_base : Azure Portal からコピーした Azure OpenAI Service の URL
  • openai.api_key : Azure Portal からコピーした Azure OpenAI Service キー
  • lineapi_token : LINE Messaging API のページから取得した チャネルアクセストークン
function_app.py
import openai
openai.api_type = "azure"
openai.api_base = "https://YOUR_AOAI_SERVICE.openai.azure.com/"
openai.api_version = "2023-03-15-preview"
openai.api_key = "YOUR_AOAI_KEY"

import requests;
lineapi_url = 'https://api.line.me/v2/bot/message/reply'
lineapi_token = 'YOUR_LINE_API_TOKEN'

さらに、

  • 46 行目にある engine の値を Azure OpenAI Studio で作成した gpt-35-turbo のモデル名 に修正します。
  • 50 行目にあるシステムメッセージ上記の手順で調整したシステムメッセージに入れ替えます。

gpt-35-turbo のモデル名 は Azure OpenAI Studio からコピーした RestAPI URL から取得できます。
RestAPI URL は、https://Azure OpenAI Service の URL/openai/deployments/gpt-35-turbo のモデル名/chat/completions?api-version=2023-03-15-preview というフォーマットになっています。

function_app.py
def postToAOAI(question):
    response = openai.ChatCompletion.create(
        engine = "YOUR_gtp-35-turbo_NAME",
        messages = [
            {
                "role":"system",
                "content":"あなたはMicrosoft 365(Microsoft Office)に関する質問に回答する、イルカのキャラクターです。最初に挨拶して、Microsoft 365に関する質問をユーザーに促してください。"
            },

Azure Functions のサンプルコードをローカルで実行して、LINE Messaging API に接続 & LINE アプリから質問してみる

修正した C# | Node.JS | Python の Azure Functions アプリをローカルで起動します。
IP トンネルツール (ここでは ngrok) を使って、外部からアクセスできるようにします。

LINE Messaging API では、ユーザーから入力があった場合、以下のようなフォーマットで Rest API リクエストが送信されます。このサンプルコードでは、このようなリクエストを受信して、Azure OpenAI Service で回答を生成し、LINE Messaging API へ適切なフォーマットで回答を送信します。

[
  {
    "type": "message",
    "message": {
      "type": "text",
      "id": "00000000000000",
      "text": "ユーザーからの入力"
    },
    "webhookEventId": "00000000000000000000000000",
    "deliveryContext": {
      "isRedelivery": false
    },
    "timestamp": 1680000000000,
    "source": {
      "type": "user",
      "userId": "U00000000000000000000000000000000"
    },
    "replyToken": "00000000000000000000000000000000",
    "mode": "active"
  }
]

Azure Functions と IP トンネルツールを起動したままで、LINE Developer コンソールで作成したチャネルの Messaging API を設定します。
Webhook設定 で、Webhookの利用 を ON にしてから、Webhook URL を設定します。
Webhook URL には、IP トンネルツールで公開したURL + /api/ChatGPTFunc を入力して、[更新] をクリックします。

スクリーンショット 2023-04-24 233405.png

Webhook URL の [検証] をクリックして、成功 と表示されるのを確認してください。

スクリーンショット 2023-04-24 233417.png

スクリーンショット 2023-04-24 233431.png

LINE チャネルの Messaging API 設定 に表示される QR コードを LINE アプリで読み取り、チャネルにアクセスします。

スクリーンショット 2023-04-24 233449.png

LINE アプリからメッセージや質問を入力して、返答が返ってきたら作成完了です。

Image.jpeg

6
2
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
Sign upLogin
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?