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

【 NLP 】使用 Bot Framework 與 Azure OpenAI ChatGPT 建立 Line  AI 問答機器人 ( JavaScript )
Photo by Cris Tagupa / Unsplash

內容

  • 學習目標
  • 流程
  • 所用到的 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 問答機器人

流程

---2023-06-07---9.18.32

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

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

建立服務所使用的名稱

屬性 名稱
Resource group aoai-rg
Azure App Service aoai-framework-168
Azure Bot aoai-bot-168
Line Provider ChatGPT
Line Channel Name Azure OpenAI ChatGPT

前置準備作業

建立 Azure OpenAI 並取得 KEY

Step 1. 建立 Azure OpenAI Service

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

---2023-04-13---1.37.02


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

---2023-04-13---1.40.01


Step 3. 輸入相關資訊

  • 請依欄位要求進行輸入

---2023-04-13---1.42.02

  • 輸入完成後點選 Next

---2023-04-13---1.46.42

  • 點選 Next

---2023-04-13---1.45.12

  • 確認資訊後點選 Create

---2023-04-13---1.47.45

  • 建立過程中

---2023-04-13---1.48.28

  • 建立完成,點選 Go to resource

---2023-04-13---1.54.04


Step 4. 建立部署模型

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

---2023-05-29---10.37.43

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

---2023-05-29---10.39.43

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

---2023-05-29---10.42.14

---2023-05-29---10.42.46

  • 建立完成

---2023-05-29---10.43.59


Step 5. 取得 Key 與 Endpoint

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

---2023-05-29---10.44.54

建立與設定 Azure Bot

Step 1. 建立 Azure Bot

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

---2023-06-05---8.21.30

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

---2023-06-05---8.24.28

  • 點選 Azure Bot

---2023-06-05---8.25.56

  • 點選 Create

---2023-06-05---8.28.09

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

---2023-06-05---8.33.28

---2023-06-05---8.38.29

  • 確認相關資訊後點選 Create

---2023-06-05---8.40.55

  • 建立完成點選 Go to resource

---2023-06-05---8.42.35-1


Step 2. 取得 Bot Type 與 App ID

  • 點選左側的 Configuration

---2023-06-05---8.57.07--


Step 3. 取得 Secret

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

---2023-06-05---8.57.07

  • 點選 + New client secret

---2023-06-05---9.03.43

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

---2023-06-05---9.05.53

  • 取得 Secret Value

---2023-06-05---9.08.28


Step 4. 取得 Tenant Id

  • 點選左側的 Overview

---2023-06-05---9.11.50

使用 Bot Framework Emulator 先行測試

Step 1. 下載 Sample Code


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

  • 於目錄中新增 .env 檔案並輸入下方內容
  • 透過終端機切換工作目錄到所下載的 Sample Code 的路徑並執行下方指令安裝相關套件
npm i
  • 於終端機執行下方指令以啟動程式
npm start

---2023-06-05---9.35.43


Step 3. 下載 Bot Framework Emulator


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

  • 點選 Open Bot

---2023-06-05---9.37.59

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

---2023-06-05---9.40.30

  • Bot Framework Emulator 啟動成功

---2023-06-05---10.16.30


Step 5. 於 Emulator 進行測試

---2023-06-05---10.17.52

建立與設定 Azure App Service

Step 1. 建立 Azure App Service

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

---2023-06-05---10.27.31

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

---2023-06-05---10.30.47

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

---2023-06-05---10.34.10

---2023-06-07---7.51.32

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

---2023-06-07---7.52.40

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

---2023-06-05---10.40.17


Step 2. 設定 Configuration

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

---2023-06-05---10.42.39

  • 需建立 7 個 Application setting

    • 第 1 個 MicrosoftAppType

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

      ---2023-06-05---10.53.37

    • 第 2 個 MicrosoftAppType

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

      ---2023-06-05---10.56.44

    • 第 3 個 MicrosoftAppType

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

      ---2023-06-05---10.57.41

    • 第 4 個 MicrosoftAppType

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

      ---2023-06-05---10.59.07

    • 第 5 個 MicrosoftAppType

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

      ---2023-06-05---11.00.16

    • 第 6 個 MicrosoftAppType

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

      ---2023-06-05---11.01.00

    • 第 7 個 MicrosoftAppType

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

      ---2023-06-05---11.01.52

  • 設定完 7 個 application setting

---2023-06-05---11.03.14

  • 點選上方的 Save

---2023-06-05---11.23.09

  • 點選 Continue

---2023-06-05---11.24.03


Step 3. 取得 Default domain

---2023-06-05---11.25.39

LINE 開發者設定

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


Step 2. 建立 Provider

  • 點選 Create a new provider

---2023-06-07---9.38.56

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

---2023-06-07---9.59.55

---2023-06-07---10.02.05


Step 3. 建立 Channel

  • 點選下方的 Create a Messaging API channel

---2023-06-07---10.04.22

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

---2023-06-07---10.11.19

---2023-06-07---10.13.07

  • 點選 OK

---2023-06-07---10.15.14

  • 點選 Agree

---2023-06-07---10.16.02


Step 4. 取得 Channel Secret

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

---2023-06-07---10.19.39


Step 5. 取得 Channel Access Token

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

---2023-06-07---10.22.26

  • 得到 Channel Access Token

---2023-06-07---10.25.36

設定 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

---2023-06-05---9.50.24

  • 點選 Apply

---2023-06-05---11.32.00


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

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

---2023-06-07---9.24.43

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

---2023-06-07---10.27.39

  • 點選 Apply

---2023-06-07---10.52.01

  • 取得 Webhook URL

---2023-06-07---10.55.32

設定 LINE Webhook URL

Step 1. 設定 Webhook URL

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

---2023-06-07---10.33.37

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

---2023-06-07---10.57.55

---2023-06-07---11.02.27


Step 2. 啟用 Webhook

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

---2023-06-07---11.03.42

---2023-06-07---11.04.31


Step 3. 關閉自動回覆訊息

  • 點選 Auto-reply messages 右邊的 Edit

---2023-06-07---11.22.40

  • 關閉 自動回應訊息

---2023-06-07---11.23.50

---2023-06-07---11.29.09

部署 Bot Framework 到 Azure App Service


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


Step 5. VS Code 登入到 Azure

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

---2023-06-05---11.08.16

  • 選擇所要登入的帳號

---2023-06-05---11.10.15

  • 登入成功

---2023-06-05---11.10.32


Step 6. 部署 Bot Framework 到 App Service

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

---2023-06-05---11.12.39

  • 選擇專案

---2023-06-05---11.14.59

  • 點選 Yes

---2023-06-05---11.15.12

  • 點選 Deploy

---2023-06-05---11.16.56

  • 部署中

---2023-06-05---11.18.02

  • 部署完成

---2023-06-05---11.20.24

測試與驗證

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

---2023-06-07---11.16.39

  • 點選 加入好友

IMG_2804

  • 測試

IMG_2805

Reference

Sample Code

GitHub

List of blogs