LearningSky.io

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

Archer -

內容

  • 前置準備作業
  • 檔案結構
  • 流程
  • 建立 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

流程

  • 將 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 的搜尋結果

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

Step 3. 輸入相關資訊

  • 請依欄位要求進行輸入

  • 輸入完成後點選 Next

  • 點選 Next

  • 確認資訊後點選 Create

  • 建立過程中

  • 建立完成，點選 Go to resource

Step 4. 建立部署模型

  • 點選左側的 Model deployments > 再點選 + Create

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

  • 建立完成

Step 5. 取得 Key 與 Endpoint

  • 點選左側的 Keys and Endpoint

Push Vue Code 到 GitHub 並設定 Secret

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

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 的搜尋結果

  • 點選左上角 + Create 按鈕

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

    • 輸入前畫面

    • 輸入後畫面

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

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

修改 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

Step 4. 查看 GitHub Action 狀況

  • 點選上方的 Actions
    • 目前正在執行中
    • 目前已執行完成

確認結果

  • 開啟 Azure Static Web App 的 URL

  • 開啟畫面

  • 輸入問題與 Azure OpenAI 搜尋中

  • Azure OpenAI 所回答的內容

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

Sample Code

Reference

GitHub

List of blogs