AIoT & Cloud & Edge & Machine Learning

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

Archer

Apr 13, 2023 • 7 min read

Photo by ZQ Lee / Unsplash

內容

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

前置準備作業

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

檔案結構

├── .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

https://github.com/ArcherHuang/Vue_Azure_OpenAI_ChatGPT

Step 2. 設定 GitHub Action Secret

開啟 Secret 設定頁面
- 點選 Settings > 再點選 Secrets and variables 中的 Actions > 點選 New repository secret
建立 3 個 Secret 資訊
- 第 1 個 Endpoint Secret
  - Name 欄位請輸入 VUE_APP_OPENAI_ENDPOINT
  - Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 5 所取得的 Endpoint
  - 以上資訊輸入完成後請點選下方的 Add secret
- 第 2 個 Model deployment name Secret
  - Name 欄位請輸入 VUE_APP_OPENAI_MODEL_DEPLOYMENT_NAME
  - Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 4 所建立的 Model deployment name
  - 以上資訊輸入完成後請點選下方的 Add secret
- 第 3 個 Key Secret
  - Name 欄位請輸入 VUE_APP_OPENAI_KEY
  - Secret 欄位請輸入 建立 Azure OpenAI ChatGPT 段落 Step 5 所取得的 Key
  - 以上資訊輸入完成後請點選下方的 Add secret

API 格式

URL
- POST https://AZURE_OPENAI_ENDPOINT/openai/deployments/MODEL_DEPLOYMENT_NAME/chat/completions?api-version=2023-03-15-preview
- 請修改 AZURE_OPENAI_ENDPOINT 與 MODEL_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
- 輸入前畫面
- 輸入後畫面

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 檔案