【 NLP 】使用 Vue 與 Azure OpenAI ChatGPT 建立 AI 問答機器人

【 NLP 】使用 Vue 與 Azure OpenAI ChatGPT 建立 AI 問答機器人
Photo by ZQ Lee / Unsplash

內容

  • 前置準備作業
  • 檔案結構
  • 流程
  • 建立 Azure OpenAI ChatGPT
  • Push Vue Code 到 GitHub 並設定 Secret
  • API 格式
  • 建立 Azure Static Web App
  • 修改 GitHub Action 的 YAML
  • 確認結果

前置準備作業

檔案結構

├── .github
│   └── workflows
│       └── azure-static-web-apps-mango-flower-0db273710.yml
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── openai.png
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   ├── main.js
│   └── utils
│       └── helpers.js
└── vue.config.js

流程

---2023-04-13---3.07.16

  • 將 Vue 程式 Commit 到 GitHub,再經由 GitHub Action 部署到 Azure Static Web App,當使用者透過網頁輸入問題後,Azure Static Web App 將此問題提交給 Azure OpenAI Service 進行回覆後,再將結果顯示於網頁。

建立 Azure OpenAI ChatGPT

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 > 再點選 + Create

---2023-04-13---1.56.17

  • 輸入相關資訊
    • Model deployment name 欄位請輸入唯一且可識別的名稱,本範例使用 gpt-35-turbo
    • Model 欄位請選擇 gpt-35-turbo
    • 以上欄位輸入完成後點選 Save

---2023-04-13---1.59.10

---2023-04-13---2.00.35

  • 建立完成

---2023-04-13---2.02.19


Step 5. 取得 Key 與 Endpoint

  • 點選左側的 Keys and Endpoint

---2023-04-13---2.03.52

Push Vue Code 到 GitHub 並設定 Secret

Step 1. 將下方連結中的程式 Push 或 Fork 到自己的 GitHub


Step 2. 設定 GitHub Action Secret

  • 開啟 Secret 設定頁面

    • 點選 Settings > 再點選 Secrets and variables 中的 Actions > 點選 New repository secret

    ---2023-04-13---2.10.34

  • 建立 3 個 Secret 資訊

    • 第 1 個 Endpoint Secret

      • Name 欄位請輸入 VUE_APP_OPENAI_ENDPOINT
      • Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 5 所取得的 Endpoint
      • 以上資訊輸入完成後請點選下方的 Add secret
        ---2023-04-13---2.16.35
    • 第 2 個 Model deployment name Secret

      • Name 欄位請輸入 VUE_APP_OPENAI_MODEL_DEPLOYMENT_NAME
      • Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 4 所建立的 Model deployment name
      • 以上資訊輸入完成後請點選下方的 Add secret
        ---2023-04-13---2.19.34
    • 第 3 個 Key Secret

      • Name 欄位請輸入 VUE_APP_OPENAI_KEY
      • Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 5 所取得的 Key
      • 以上資訊輸入完成後請點選下方的 Add secret
        ---2023-04-13---2.21.06

API 格式

  • URL
    • POST https://AZURE_OPENAI_ENDPOINT/openai/deployments/MODEL_DEPLOYMENT_NAME/chat/completions?api-version=2023-03-15-preview
    • 請修改 AZURE_OPENAI_ENDPOINTMODEL_DEPLOYMENT_NAME
  • Header
    • Content-Type: application/json
    • api-key: AZURE_OPENAI_KEY
  • JSON Body
{
	"messages": [{
			"role": "system",
			"content": "你是一個名叫「OpenAI ChatGPT」的角色。請用小於 6 歲的孩子能夠聽懂的語言和親切、容易親近的口吻來講話。"
		},
		{
			"role": "user",
			"content": "介紹 OpenAI"
		},
		{
			"role": "assistant",
			"content": ""
		}
	],
	"temperature": 0.7,
	"top_p": 0.95,
	"frequency_penalty": 0,
	"presence_penalty": 0,
	"max_tokens": 800,
	"stop": null
}

建立 Azure Static Web App

Step 1. 建立 Azure Static Web App

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

staticweb1

  • 點選左上角 + Create 按鈕

staticweb2

  • 輸入相關資訊後點選 Review + create
    • 輸入前畫面
      ---2023-04-10---8.15.08

    • 輸入後畫面
      ---2023-04-13---2.25.01


Step 2. 確認相關資訊後點選 Create

---2023-04-13---2.28.32


Step 3. 建立完成,點選 Go to resource

---2023-04-13---2.30.57

修改 GitHub Action 的 YAML

Step 1. Clone Repository 到本地端電腦,目錄結構如下:

  • azure-static-web-apps-mango-flower-0db273710.yml 檔案後面的文字與數字 mango-flower-0db273710 會隨機產生,請選擇所產生的 yml 即可。
├── .github
│   └── workflows
│       └── azure-static-web-apps-mango-flower-0db273710.yml
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── openai.png
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   ├── main.js
│   └── utils
│       └── helpers.js
└── vue.config.js

Step 2. 修改 .github/workflows 目錄中的 yml 檔案

  • 修改前
  • 修改後
    • 新增第 34 行 env: ( yml 檔中的格式請對齊 )
    • 新增第 35 ~ 37 行 ( yml 檔中的格式請對齊 )

Step 3. Push 程式到 GitHub

---2023-04-13---2.41.31


Step 4. 查看 GitHub Action 狀況

  • 點選上方的 Actions
    • 目前正在執行中
      ---2023-04-13---2.42.00
    • 目前已執行完成
      ---2023-04-13---2.47.19

確認結果

  • 開啟 Azure Static Web App 的 URL

---2023-04-13---2.46.02

  • 開啟畫面
    ---2023-04-13---2.48.19

  • 輸入問題與 Azure OpenAI 搜尋中
    ---2023-04-13---2.49.05

  • Azure OpenAI 所回答的內容

    • 要求 Azure OpenAI 用 6 歲的孩子能夠聽懂的語言和親切、容易親近的口吻來講話。
      ---2023-04-13---2.49.22
      ---2023-04-13---2.54.12

Sample Code

Reference

GitHub

List of blogs