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

內容

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

學習目標

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

流程

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

• Azure OpenAI Service
• Azure App Service
• Azure Bot
• Bot Framework
• Microsoft Teams

建立服務所使用的名稱

前置準備作業

• 已建立 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. 取得 Key 與 Endpoint

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

Step 5. 建立部署模型

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

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

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

• 建立完成

建立與設定 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 進行測試

部署 Bot Framework 到 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

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

• 部署中

• 部署完成

Step 7. 設定 Azure Bot 的 Messaging endpoint

• 於 Azure Bot 中設定 Messaging endpoint 為 https://Default-domain/api/messages
  • 請將 Default-domain 改為 Step 3 所取得的 Default domain

• 點選 Apply

Step 8. 加入 Teams 到 Channel

• 點選左側的 Channels > 再點選 Microsoft Teams > 再點選 Agree

• 勾選 I agree to the Microsoft Channel Publication Terms and the Microsoft Privacy Statements for my deployment to the Microsoft Teams channels.

• 點選 Apply

• 點選左側的 Channels > 再點選 Open in Teams

• 依需求開啟對應的 Teams

• 開啟 Teams

測試與驗證

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