靠問 ChatGPT 寫程式,能完成 OpenAI & Linebot 的 Side Project 嗎?(下)
在上一篇文章中,我們好不容易請 ChatGPT 完成 OpenAI-Linebot 的專案,並順利啟動。
在這篇文章中,我們要來設定 Line 的 webhook,並測試 ChatGPT 寫的程式是否可以正確執行;並告訴讀者遇到問題時,我們可以從哪些面向來思考、解決;最後於文末給想用 ChatGPT 寫程式、學程式的朋友一些建議。
大綱
▋ 在 local 建立一個可以讓 Line 訪問的 HTTP server(ngrok)
▋ 設定 Line 的 webhook
▋ 測試功能&痛苦的 Debug 之路
▋ 結論:給想用 ChatGPT 寫程式、學程式的朋友一些建議
▋在 local 建立一個可以讓 Line 訪問的 HTTP server(ngrok)
上一篇文章中,專案是在本地啟動的,因此他的網址是 http://localhost:3000 ,而 Line 的 webhook 是無法接受本地網址的。
為了方便 Debug,我這邊選擇在 local 建立一個可以讓 Line 訪問的 HTTP server,具體的方案我們來詢問一下 ChatGPT。
這邊我選用「ngrok」的方案,並在指定「作業系統」的狀態下,請 ChatGPT 告訴我接下來該怎麼做。
接下來我們就按造建議的步驟來實作看看。
SETP 1:先到 ngrok 的官網下載 ngrok 的 Mac 版本: https://ngrok.com/download 。
提醒讀者,要先確認自己 mac 的處理器是 Intel 還是 Apple Silicon 喔!
SETP 2:解壓縮下載的檔案,並將 ngrok 放入您的 PATH 中 (例如: /usr/local/bin)
解壓縮檔案後,你會得到一個 ngrok 的值行檔,其實你就算放在 download 的資料夾也能執行,不過放到 bin 的資料夾下可以在任何位置執行。
下面說明一下 mac 進入 bin 資料夾的步驟:「到 mac 桌面」or「點擊 Finder」➝ 「前往」➝ 「前往資料夾」➝ 輸入「/usr/local/bin」➝ 把「ngrok 值行檔」丟進去。
SETP 3:打開終端機,輸入 ngrok http 3000
(3000 是您的本地環境的 HTTP Server 的通訊埠),啟動 ngrok。
SETP 4:ngrok 將會顯示一個可供外部訪問的 URL(上圖紅框處 https://xxxx.ngrok.io
),您可以在 LINE 的 Developer Console 中設定 webhook 的 URL。
小提醒:Session 2 小時後會過期,到時再重新執行一次
ngrok http 3000
就好了,然後別忘記把新的 URL 設定到 Line 的 webhook。
▋ 設定 Line 的 webhook
因為設定步驟很簡單,我就不特別問 ChatGPT 了。
SETP 1:在 Messaging API 的 WebhookURL 貼上剛剛的的網址,並於後面加上 /webhook
(那是我們程式設定的 API 路徑)。
SETP 2:按下「Verify」後得到 Success 就代表有成功聯通嚕!
SETP 3:在 Messaging API 取得 Linebot 的 LineID,並把他加入好友。
加入好友後,他會跟你打招呼。
但當你很興奮的傳訊息給他時,他的回覆語氣一點都不像是 ChatGPT。
雖然到這裡我們已經知道出事了,但還是先把下面的步驟做完吧。
SETP 4:在 Messaging API 關閉自動回覆(Auto-reply messages)與打招呼(Greeting messages)。
因為自動回覆(Auto-reply messages)會干擾 Debug 所以建議關閉,至於打招呼(Greeting messages)要不要關閉就看你自己。
▋測試功能&痛苦的 Debug 之路
上面 Webhook URL 的 Verify 得到 200 只是證明這條路有打通,如果把畫面切到 ngrok,會發現許多 500 的錯誤訊息。
➤ 上一篇 ChatGPT 給的程式有哪些錯誤?
回到程式,你會發現有「TypeError: Cannot read properties of undefined (reading ‘events’)」的錯誤。
如果你把這個問題拿去詢問 ChatGPT,會收到一大堆鬼打牆的回覆。
這邊筆者就直接告訴大家為什麼會有各式各樣的錯誤:
- 「@line/bot-sdk」套件使用方式錯誤
- 「openai」套件使用方式錯誤
你沒看錯,要實作的兩個套件,ChatGPT 的使用方式都是有問題的。
➤ 讓 ChatGPT 擔任程式專家,改用英文詢問
為了避免冤枉好人,我這次改成用英文詢問,並讓 ChatGPT 擔任程式專家來撰寫,這是他給出的新回覆:
const line = require('@line/bot-sdk');
const express = require('express');
const openai = require('openai');
openai.apiKey = "YOUR_API_KEY";
const config = {
channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
channelSecret: 'YOUR_CHANNEL_SECRET'
};
const client = new line.Client(config);
const app = express();
app.post('/webhook', line.middleware(config), (req, res) => {
Promise
.all(req.body.events.map(handleEvent))
.then((result) => res.json(result))
.catch((err) => {
console.error(err);
res.status(500).end();
});
});
function handleEvent (event) {
if (event.type !== 'message' || event.message.type !== 'text') {
return Promise.resolve(null);
}
return openai
.engines
.completions
.create({
prompt: event.message.text,
engine: "text-davinci-002",
maxTokens: 100
})
.then((completions) => {
const message = completions.choices[0].text;
return client.replyMessage(event.replyToken, {
type: 'text',
text: message
});
});
}
app.listen(3000);
console.log('Linebot is running on 3000 port');
果然專家就是比較厲害,錯誤訊息變得不一樣了!
但這個錯誤並沒有辦法靠詢問 ChatGPT 解決(他會再次鬼打牆)。
➤ 好吧…最後還是得靠自己處理
因為我看錯誤的源頭出在 openai 套件,所以我就去官網研究了一下:https://www.npmjs.com/package/openai
先給大家看一下官網給的範例程式:
const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const completion = await openai.createCompletion({
model: "text-davinci-002",
prompt: "Hello world",
});
console.log(completion.data.choices[0].text);
如果把他跟 ChatGPT 給的程式做比對,會發現 ChatGPT 的使用方式根本是錯的,下面筆者就直接把修改好的程式放上來,調整過的部分有在旁邊用註解說明:
require('dotenv').config(); // 皆採用 .env 讀取
const line = require('@line/bot-sdk');
const express = require('express');
const { Configuration, OpenAIApi } = require("openai"); // 他套件使用方式錯誤,我直接改掉
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const config = {
channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
channelSecret: process.env.CHANNEL_SECRET,
};
const client = new line.Client(config);
const app = express();
app.post('/webhook', line.middleware(config), (req, res) => {
Promise
.all(req.body.events.map(handleEvent))
.then((result) => res.json(result))
.catch((err) => {
console.error(err);
res.status(500).end();
});
});
function handleEvent (event) {
if (event.type !== 'message' || event.message.type !== 'text') {
return Promise.resolve(null);
}
return openai.createCompletion({ // 方法用錯修正
prompt: event.message.text,
model: "text-davinci-003", // 使用 model 而非 engine
max_tokens: 1000 // 應用 max_tokens 而非 maxTokens
}).then((completions) => {
// 少了 data 這層結構,並要加上 trim() 去除空白
const message = completions.data.choices[0].text.trim();
return client.replyMessage(event.replyToken, {
type: 'text',
text: message
});
});
}
app.listen(3000);
console.log('Linebot is running on 3000 port');
最後再給大家看看順利溝通時的畫面:
看到成功溝通的畫面時,筆者真的感動到快哭了,這是個能與你溝通的 AI 機器人喔!
不過操作下來我覺得回答穩定度沒有比 ChatGPT 高,有時會出現一些奇怪的程式碼,讀者有興趣可以再做優化,本篇文章僅為參考範例。
▋結論:給想用 ChatGPT 寫程式、學程式的朋友一些建議
可能是我運氣比較好,剛好測試到 ChatGPT 的許多 Bug,下面筆者彙整了一些遇到的「坑」給讀者參考:
- ChatGPT 沒有最新資料:筆者在使用 ChatGPT 時,他的資料是在 2021 年截止的,也就是說他不認識新推出的套件,當套件有更新時他也無法第一時間知道。
- 有些問題 ChatGPT 真的回答不出來:如果是程式邏輯問題,ChatGPT 有機會給出解答,但如果是套件相關問題,可能真的給不出解答;你一直問他也只是鬼打牆。
- 似是而非的答案最可怕:ChatGPT 在上一篇(中文)跟這一篇(英文)給的答案,如果只看「邏輯」,那是正確的;但實際跑起來卻有一堆問題,不去看官方網站查證真的無法解決。
會有上述問題,我覺得是因為 ChatGPT 還在學習、以及資料不夠即時;相信在未來推出新版時,能給出更正確的解答。
至於如何透過 ChatGPT 學程式,我的建議如下:
- 要學習的程式語言、工具要有一定的年紀。
- 使用套件遇到錯誤時,先去官網看說明文件。
- 如果完全沒基礎,強烈建議先從書籍、課程開始學習。
目前筆者把 ChatGPT 的定位放在「輔助」,適合給你方向、關鍵字、優化的建議;像是這次使用下來,雖然程式有些許錯誤,但是在「步驟、關鍵字、指令」方面的建議都是很不錯的。
未來筆者會出一系列使用 ChatGPT、openAI 的文章,如果你對這個議題感興趣,可以持續關注我的文章!
參考資料:
想將 AI 導入自己的職場與生活嗎?歡迎報名筆者與商周集團合作的線上課程:「AI 高效簡報術|ChatGPT + Gamma 工作簡報」
如果您想在 AI 的浪潮中站穩腳步,並在未來的職場競爭中佔據優勢,那麼筆者出版的新書絕對是您入門 AI 的第一步!
▶︎ 如果這篇文章有幫助到你
可以點擊下方「Follow」來追蹤我~
可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼
▶︎ 如果你對工程師的職涯感到迷茫
也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
也歡迎您到書局選購支持,透過豐富的案例來重新檢視自己的職涯