LearningSky.io

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

Archer -

內容

  • 學習目標
  • 流程
  • 所用到的 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

建立服務所使用的名稱

屬性 名稱
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 的搜尋結果

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

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

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

Step 3. 下載 Bot Framework Emulator

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. 開啟開發者設定頁面並登入

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

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

Sample Code

GitHub

List of blogs