【 NLP 】使用 Bot Framework 與 Azure OpenAI ChatGPT 建立 Line AI 問答機器人 ( JavaScript )

內容

• 學習目標
• 流程
• 所用到的 Azure 服務、Framework 與通訊軟體
• 建立服務所使用的名稱
• 前置準備作業
• 建立 Azure OpenAI 並取得 KEY
• 建立與設定 Azure Bot
• 使用 Bot Framework Emulator 先行測試
• 建立與設定 Azure App Service
• LINE 開發者設定
• 設定 Azure Bot 與取得 Webhook URL
• 設定 LINE Webhook URL
• 部署 Bot Framework 到 Azure App Service
• 測試與驗證

學習目標

• 如何使用 JavaScript 版的 Bot Framework 與 Azure OpenAI ChatGPT 建立 LINE AI 問答機器人

流程

所用到的 Azure 服務、Framework 與通訊軟體

• Azure OpenAI Service
• Azure App Service
• Azure Bot
• Bot Framework
• LINE

建立服務所使用的名稱

前置準備作業

• 已建立 Azure 帳號並能正常登入
  • https://portal.azure.com/
• 已於電腦端安裝 Node.js
• 已於電腦端安裝 IDE，本範例使用 Visual Studio Code

建立 Azure OpenAI 並取得 KEY

Step 1. 建立 Azure OpenAI Service

• 於搜尋框輸入 Azure OpenAI > 點選 Static Web Apps 的搜尋結果

Step 2. 點選左上角 + Create 按鈕

Step 3. 輸入相關資訊

• 請依欄位要求進行輸入

• 輸入完成後點選 Next

• 點選 Next

• 確認資訊後點選 Create

• 建立過程中

• 建立完成，點選 Go to resource

Step 4. 建立部署模型

• 點選左側的 Model deployments > 再點選 Manage Deployments

• 點選左側的 部署 > 再點選上方的 + 建立新部署

• 輸入相關資訊
  • 選取模型 欄位請選擇 gpt-35-turbo
  • 部署名稱 欄位請輸入唯一且可識別的名稱，本範例使用 gpt-35-turbo
  • 以上欄位輸入完成後點選 建立

• 建立完成

Step 5. 取得 Key 與 Endpoint

• 點選左側的 Keys and Endpoint 取得 KEY 1 與 Endpoint ( 之後程式會用到 )

建立與設定 Azure Bot

Step 1. 建立 Azure Bot

• 於搜尋框輸入 Marketplace > 點選 Marketplace 的搜尋結果

• 於搜尋框輸入 Azure Bot > 點選 azure bot 的搜尋結果

• 點選 Azure Bot

• 點選 Create

• 輸入相關資訊，輸入完成後點選 Review + create

• 確認相關資訊後點選 Create

• 建立完成點選 Go to resource

Step 2. 取得 Bot Type 與 App ID

• 點選左側的 Configuration

Step 3. 取得 Secret

• 點選左側的 Configuration > 再點選 Manage Password

• 點選 + New client secret

• 輸入相關資訊後再點選 Add

• 取得 Secret Value

Step 4. 取得 Tenant Id

• 點選左側的 Overview

使用 Bot Framework Emulator 先行測試

Step 1. 下載 Sample Code

• Sample Code
  • https://github.com/ArcherHuang/AzureOpenAI_BotFramework

Step 2. 設定環境變數與執行程式

• 於目錄中新增 .env 檔案並輸入下方內容

• 透過終端機切換工作目錄到所下載的 Sample Code 的路徑並執行下方指令安裝相關套件

npm i

• 於終端機執行下方指令以啟動程式

npm start

Step 3. 下載 Bot Framework Emulator

• https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.14.1

Step 4. 啟動 Bot Framework Emulator 並設定 Bot URL

• 點選 Open Bot

• 輸入相關資訊
  • Bot URL 欄位請輸入 http://localhost:3978/api/messages
  • 以上資訊輸入完成後點選 Connect

• Bot Framework Emulator 啟動成功

Step 5. 於 Emulator 進行測試

建立與設定 Azure App Service

Step 1. 建立 Azure App Service

• 於搜尋框輸入 App Service > 點選 App Services 的搜尋結果

• 點選左上方的 + Create > 再點選 + Web App

• 輸入相關資訊，當資訊輸入完成後點選左下角的 Review + create
  • Runtime stack 欄位請選擇 Node 16 LTS

• 確認相關資訊完後點選左下角的 Create

• 建立完成，請點選 Go to resource

Step 2. 設定 Configuration

• 點選左側的 Configuration > 再點選 + New application setting

• 需建立 7 個 Application setting

  • 第 1 個 MicrosoftAppType

    • Name 欄位輸入 MicrosoftAppType
    • Value 欄位輸入 Multitenant
    • 以上資訊輸入完成後點選 OK

    

  • 第 2 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 MicrosoftAppId
      • Value 欄位輸入 建立與設定 Azure Bot 段落 Step 2 所取得的 App ID
      • 以上資訊輸入完成後點選 OK

    

  • 第 3 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 MicrosoftAppPassword
      • Value 欄位輸入 建立與設定 Azure Bot 段落 Step 3 所取得的 Secret
      • 以上資訊輸入完成後點選 OK

    

  • 第 4 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 MicrosoftAppTenantId
      • Value 欄位輸入 建立與設定 Azure Bot 段落 Step 4 所取得的 Tenant ID
      • 以上資訊輸入完成後點選 OK

    

  • 第 5 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 AZURE_OPENAI_ENDPOINT
      • Value 欄位輸入 建立 Azure OpenAI 並取得 KEY 段落 Step 4 所取得的 Endpoint
      • 以上資訊輸入完成後點選 OK

    

  • 第 6 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 AZURE_OPENAI_KEY
      • Value 欄位輸入 建立 Azure OpenAI 並取得 KEY 段落 Step 4 所取得的 KEY
      • 以上資訊輸入完成後點選 OK

    

  • 第 7 個 MicrosoftAppType

    • 點選 + New application setting
      • Name 欄位輸入 AZURE_OPENAI_MODEL_DEPLOYMENT_NAME
      • Value 欄位輸入 建立 Azure OpenAI 並取得 KEY 段落 Step 5 所建立的模型名稱
      • 以上資訊輸入完成後點選 OK

    

• 設定完 7 個 application setting

• 點選上方的 Save

• 點選 Continue

Step 3. 取得 Default domain

LINE 開發者設定

Step 1. 開啟開發者設定頁面並登入

• 透過瀏覽器開啟 https://developers.line.biz/

Step 2. 建立 Provider

• 點選 Create a new provider

• 輸入一個唯一且可識別的 Provider 名稱 ( 本範例使用 ChatGPT )，當輸入完成後點選 Create

Step 3. 建立 Channel

• 點選下方的 Create a Messaging API channel

• 輸入相關資訊，當輸入完成後點選下方的 Create

• 點選 OK

• 點選 Agree

Step 4. 取得 Channel Secret

• 點選 Basic setting > 往下滑到 Channel Secret

Step 5. 取得 Channel Access Token

• 點選 Messaging API > 往下滑到 Channel access token > 點選 Issue

• 得到 Channel Access Token

設定 Azure Bot 與取得 Webhook URL

Step 1. 設定 Azure Bot 的 Messaging endpoint

• 於 Azure Bot 中設定 Messaging endpoint 為 https://Default-domain/api/messages
  • 請將 Default-domain 改為 建立與設定 Azure App Service 段落中的 Step 3 所取得的 Default domain

• 點選 Apply

Step 2. 加入 LINE 到 Channel 並取得 Webhook URL

• 點選左側的 Channels > 再點選 LINE

• 輸入相關資訊
  • Channel Secret 欄位請輸入 LINE 開發者設定 段落中的 Step 4 所取得的 Channel Secret
  • Channel Access Token 欄位請輸入 LINE 開發者設定 段落中的 Step 5 所取得的 Channel Access Token

• 點選 Apply

• 取得 Webhook URL

設定 LINE Webhook URL

Step 1. 設定 Webhook URL

• 點選 Messaging API > 往下滑到 Webhook URL > 點選 Edit

• 輸入相關資訊
  • 請輸入 設定 Azure Bot 與取得 Webhook URL 段落中的 Step 2 所取得的 Webhook URL
  • 以上資訊輸入完成後點選 Update

Step 2. 啟用 Webhook

• 點選 Use webhook 右邊的的按鈕往右移

Step 3. 關閉自動回覆訊息

• 點選 Auto-reply messages 右邊的 Edit

• 關閉 自動回應訊息

部署 Bot Framework 到 Azure App Service

Step 4. 於 VS Code 中安裝 Azure App Service

• https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice

Step 5. VS Code 登入到 Azure

• 點選左側 Azure Icon > 再點選 Sign in to Azure...

• 選擇所要登入的帳號

• 登入成功

Step 6. 部署 Bot Framework 到 App Service

• 選擇所建立的 Azure App Service > 再點選右鍵 Deploy to Web App...

• 選擇專案

• 點選 Yes

• 點選 Deploy

• 部署中

• 部署完成

測試與驗證

• 用手機掃描所建立的 LINE Provider 中的 QR code

• 點選 加入好友

• 測試

Reference

• https://learn.microsoft.com/zh-tw/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0

Sample Code

• https://github.com/ArcherHuang/AzureOpenAI_BotFramework

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://learningsky.io/author/archer/
• https://medium.com/@mmosconii