用ChatGPT串接ChatGPT API製作聊天器經驗分享

J
UniMarket
Published in
Apr 19, 2023

想串接ChatGPT API但懶得讀文件,那就讓ChatGPT來教(幫)你寫吧!

前面有失敗過幾次,這篇文章只截圖最後一次對話的重點,否則文章會太長。

首先,我請ChatGPT老師閱讀ChatGPT API的文件,但這個prompt其實是不需要的,因為ChatGPT無法瀏覽網站,問他為何可以回答得出你給的網頁的內容,ChatGPT是說「當您提供網址時,我會根據網址的結構和內容來判斷它可能與哪個主題相關。在您提供的”https://platform.openai.com/docs/guides/chat"這個例子中,網址包含了"openai.com"這個域名,以及"docs"和"guides"這些關鍵字,這使我能夠推斷出這個鏈接指向的是OpenAI Chat API的官方指南。」。

關於程式的部分ChatGPT也不需要先閱讀文件,他說他會的程式知識已經相當多了!以下是我去向他求證的對話:

繼續prompt的部分,因OpenAI有蠻多不同種API,告訴老師要做的是串接OpenAI API的Chat completions。

再來說明網頁的畫面,並告訴他api需要做到的事情。

請老師使用html、css、javascript,否則他可能會用python。因為之前的對話他有使用axios做串接,我希望他用原生javascript,所以指定使用fetch做串接。

最後請他一步一步教學,不要一次講太多,不然會中斷。

ChatGPT老師回覆:

(中間程式碼省略)。

(中間程式碼省略)。

(中間程式碼省略)。

老師提醒需要替換key,我們從ChatGPT API網站中獲得API的key,每一個帳號有免費 18 美元的額度(約90萬個中文字),可以使用三個月。

***更新:現在已經沒有免費試用了***

將老師提供的程式碼貼到VScode。

測試後發現有bug,複製錯誤訊息詢問老師。

(中間程式碼省略)

老師回覆說可能跟key有關,還幫我修改了我沒有提出要求了部分,修改key後成功觸發對話。

測試後發現API回覆到一半會突然中斷,貼上對話詢問怎麼修改,並且請他針對有問題的地方修改即可,否則根據之前的經驗,老師可能會把全部改掉。

(中間程式碼省略)

老師回覆可以增加ChatGPT API帶的參數max_tokens,max_tokens代表生成文字的最大長度。修改後API不會回覆到一半中斷,接下來我請老師幫我修改css,這部分省略。

再次測試對話,對話到第三次就中斷了,問老師為何會這樣。

(中間程式碼省略)

老師回覆可以修改參數裡的temperature,temperature代表控制生成文字的多樣性,值越高生成的文字越隨機,值越低生成的文字越保守。修改過後對話恢復正常,繼續請老師幫我修改css,這部分省略。

測試對話,API不會接續前面的話題,詢問主管是說應該是因為每一次觸發只有帶入前一次的對話,並沒有將完整的對話都帶入,所以我請老師幫我修改這個問題。因為前面都再請老師修改css,我問老師還記不記得javascript的部分。

(中間程式碼省略)

老師說他記得,但他給的程式碼感覺少很多行

(中間程式碼省略)

我將想要修改的程式碼直接貼給老師,請他針對這個程式碼進行修改

(中間程式碼省略)

成功修改!再來就是請老師針對一些細節調整,此部分省略。

聊天器大致完成!雖然還是有許多地方要修改,但已經可以使用。https://rd.unisurf.tw/jessie/yourPresident/ (如果輸入文字沒有出現對話,那就是因為key已經過期了(;´༎ຶД༎ຶ`))

下篇:串接ChatGPT API製作聊天器下prompt經驗分享

--

--

J
UniMarket

前端工程菜鳥的學習日記 請各位大大帶我飛 ಥ⌣ಥ