iT邦幫忙

2023 iThome 鐵人賽

1
AI & Data

以 OpenAI 以及 LangChain 實做我的聊天機器人系列 第 39

[D30+9] 如何建立自己的 GPTs - 以 Vercel 以及我的待辦清單為例

  • 分享至 

  • xImage
  •  

此為《ChatGPT GPTs 開發入門》系列的第一篇。

我們接下來的內容會在這裏優先發佈: ChatGPT 落地研究 | Ted,歡迎訂閱。

前言

今天,我們將與大家分享如何自訂您的 ChatGPT GPTs。實際的最後成品,你可以到這裏來試用: https://chat.openai.com/g/g-SGSwHyqkr-task-helper

我們將透過實作一個個人化的待辦清單助理來展示這個過程,並選用 Vercel 作為您待辦清單助理的 API 後台。這樣一來,您的待辦清單助理可以在與您對話互動的同時,使用一個外部的 API 伺服器來管理您的待辦清單數據,讓你體驗一個完整的 GPTs 使用經驗。

我們選擇 Vercel 作為我們 API 服務的伺服器,主要是因為它與 GitHub 的無縫整合。這使得我們只需將代碼推送到 GitHub,Vercel 便會自動處理後續的部署。更棒的是,它還免費提供 HTTPS 網址,這讓我們能夠迅速地測試我們的 GPTs 與外部 API 的功能整合。

我們假設您已對 GPTs 有基本了解,至少曾使用過 GPTs。此外,我們還預設您已能夠獨立在 Vercel 上註冊,並知道如何將程式碼上傳到個人的 GitHub。若您對此尚不熟悉,這裡有一篇很詳細的 Vercel 註冊及專案創建教程,可供參考:把你的網站上線吧!超詳細 Vercel 網站部署教學| Yuanlin Lin 林沅霖。

至於 API 程式碼,我們也為您準備好了。我們將在後續說明中提供連結,您只需將幾個必要的檔案複製到您的專案中。這樣一來,您便可以輕鬆入門,了解如何將 GPTs 整合到您的後端 API 的完整流程。

讓我們開始吧!

整體建置步驟

開啟 GPTs Builder

要建立自己的 GPTs,首先在您的 ChatGPT 操作界面點選「Explore」,這樣就可以進入預設的 GPTs 首頁。重要的一點要提醒大家,GPTs 功能目前僅對付費的 ChatGPT 使用者開放。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415eLMnCNWJF7.png
進入 GPTs 首頁後,再點擊【Create a GPT】就會進入 GPTs 的建立頁面
https://ithelp.ithome.com.tw/upload/images/20231206/20154415q7pnXf9jE0.png

基本 GPTs 設定

對於 GPTs 的基本設定,ChatGPT 提供了一個便捷的 GPT Builder。這個 Builder 透過對話式的互動,引導我們一步步完成設定。舉例來說,如下圖所示,我們在建立待辦清單助理時,只需簡單描述我們的目標,GPT Builder 就會指引我們完成其餘設定,如 GPTs 的名稱、圖標,甚至是它的個性。

如果您對於所要創建的 GPTs 還沒有明確的想法,也不必擔心。我們可以先根據當前的想法設定基本條件。隨著運作和實驗過程中的新想法,您可以隨時回來進行編輯和補充。補充的過程同樣簡單,只需以自然語言告訴它需要增加或修改的內容即可。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415q75BEJlt6T.png

其他細項設定

在使用 GPT Builder 完成您的 GPTs 的基本設定,如命名、設定工作目標和選擇圖標後,您會看到右側的預覽(Preview)窗格,如下圖所示。此時,您可以點擊左側窗格上的按鈕,進入更進階的設定頁面。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415DmK7djKCZ1.png
進階設定頁面包含了幾個重要選項,其功能分別如下:

  • Conversation Starter
    這是用於開啟新對話時,向使用者展示的對話選項。Starter 的主要目的是為初次使用者提供一個清晰的操作範例,避免他們在面對陌生的對話機器人時感到迷茫,不知該如何開始互動。
  • Knowledge
    這裡是上傳相關文件的地方,以便為您的 GPTs 提供額外的領域知識。無論是設計業務機器人時的說明文件、FAQ 問答集,還是開發功能性機器人時的規格文件,都可以在這裡添加,以豐富機器人的知識庫。
  • Capabilities
    在目前這個階段,我們可以在我們的 GPTs 中選擇啟用三種額外功能:Web Browsing(允許 GPTs 瀏覽網頁)、DALL-E Image Generation(生成圖片)、Code Interpreter(執行程式碼或進行資料分析)。

簡易的測試

當基本設定完成後,您會在 GPTs 建立頁面的右側看到一個 Preview 窗格。這個窗格允許我們在設計階段進行測試,比如下圖展示的是按下 GPT Builder 預設的一個 Conversation Starter 後的對話記錄。
https://ithelp.ithome.com.tw/upload/images/20231206/201544159lvKcz42Wd.png
在這個階段,如果對話看起來沒有問題,我建議您點擊右上角的進行階段性儲存。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415W88byg5361.png
儲存後,系統會自動返回 ChatGPT 的首頁。這時不需擔心,我們可以隨時通過點擊編輯按鈕來繼續對尚未完成的 GPTs 進行編輯和設計,編輯頁面和按鈕如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20231206/20154415crhdidjEky.png

Vercel 的設定

在您根據上述步驟設定好 GPTs 的基本條件後,接下來我們將準備 GPTs 將要使用的外部動作(action)。GPTs 使用的動作實際上是外部 API 服務,而這部分我們將採用 Vercel 提供的服務。關於 Vercel 帳號的基本建立及其與 GitHub 的連接設定,我們在本文中不會詳細介紹。如果您對此不太清楚,可以參考這篇文章,內容非常清晰:把你的網站上線吧!超詳細 Vercel 網站部署教學| Yuanlin Lin 林沅霖

在本教程中,我們將主要利用我們預先準備的程式碼,結合 Vercel 提供的 Python Flask Serverless 樣板,來快速搭建我們的待辦清單助理所需的 API 服務。以下是完整的設置過程:

  1. 登入 Vercel 平台,進入系統首頁,然後點擊右上角的「Add New / Project」
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415vHDE1E6KxL.png
  2. 在專案建立首頁,按「Browse All Templates」
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415QqQokH1uzc.png
  3. 在樣板選擇頁面,先在左側的 Filter Templates 欄位輸入「python」進行篩選,然後在右側選擇「Flask Hello World」樣板,點擊以選擇。
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415mwQXIp76Pu.png
  4. 在「Flask Hello World」樣板的說明頁面,點擊「Deploy」按鈕
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415EjEJiC3rxD.png
  5. 擊「Deploy」後,系統會詢問您想將樣板建立在 GitHub 上的哪個存儲庫中。在「Repository Name」欄位輸入您希望的存儲庫名稱後,點擊「Create」,Vercel 便會自動為您在 GitHub 上建立相應的存儲庫。
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415UpyEDnolKU.png
  6. 存儲庫建立成功後,您會看到以下畫面,點擊「Continue to Dashboard」進入專案首頁。
    https://ithelp.ithome.com.tw/upload/images/20231206/20154415rwHZVUbojD.png

下面就是專案的首頁:
https://ithelp.ithome.com.tw/upload/images/20231206/20154415uiyRZ6MNou.png
7. 修改你的 api 專案的檔案。
接下來,您需要修改您的 API 專案檔案。根據上述步驟建立的 Vercel 專案同時也會在您的 GitHub 程式庫中建立相應的專案,例如在我的 GitHub 中建立了「TaskHelperAPI」程式庫。
https://ithelp.ithome.com.tw/upload/images/20231206/201544156FrjsP9SaZ.png
然後,您需要先將 Vercel 建立的專案複製到您的本機,並將我們提供的 GitHub 程式庫中的以下幾個檔案複製到您的程式庫中:

我們提供給你程式庫在這: u8621011/TaskHelperAPI (github.com)

需要你複製的檔案計有:

  • /requirements.txt
  • /logo.png
  • /api/index.py
  • /.well-known/openapi.json

請確保將這四個檔案從我們提供的程式庫 u8621011/TaskHelperAPI (github.com) 中對應複製到您的 Vercel 建立的 GitHub 程式庫內。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415aj5DGCLIks.png

複製完成後,請打開 /.well-known/openapi.json 檔案,設定您的 API 伺服器位置
https://ithelp.ithome.com.tw/upload/images/20231206/20154415Zr1ZeiiLBg.png

您的 API 伺服器位置實際上就是 Vercel 為您提供的網址。要查看 Vercel 提供的網址,請參考下方圖示:
https://ithelp.ithome.com.tw/upload/images/20231206/2015441510hSLIDKdg.png

一旦獲得 Vercel 提供的網址,比如我得到的是 task-helper-api.vercel.app,您需要將此網址填入您的 openapi.json 檔案中的 servers.url 部分。

完成以上步驟,將所有程式碼複製並修改 servers.url 為您自己的 API 伺服器網址後,請將這些新的變更提交到 GitHub。接著,Vercel 會自動偵測到您 GitHub 上的程式碼變動,並進行自動編譯及部署。以下圖片顯示的是我提交程式碼更改後,Vercel 自動成功編譯的訊息。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415NQx56YNV6l.png

GPTs Action 的設定

在前一步驟中程式碼已經準備好,且 Vercel 成功部署之後,我們首先使用瀏覽器嘗試打開部署在 Vercel 伺服器上的 openapi.json 檔案,以進行確認,如下圖所示。

請留意,下圖中的網址是我的範例,您應該使用 Vercel 提供給您的伺服器網址(domain)。

一旦瀏覽器成功讀取了 openapi.json 檔案,請確認其中的 servers.url 是否為您的 API 伺服器網址。能夠透過瀏覽器查看這個檔案非常關鍵,因為稍後在 ChatGPT 的 GPTs 設定中會用到它。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415IMv7esp8RK.png

確認無誤後,我們回到 ChatGPT 以繼續編輯我們的 GPTs。在 GPTs 的設計頁面中,點擊「Configure」,然後選擇「Create New Action」。
https://ithelp.ithome.com.tw/upload/images/20231206/2015441595p6coyfFn.png

點擊之後「Create new action」,在新的的窗格中,您會看到「Import from URL」按鈕,請點擊它。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415w5jRHNL0wN.png

隨後,在匯入的文字對話框中,輸入您的 API 伺服器上 openapi.json 的完整網址,例如我的是: https://task-helper-api.vercel.app/.well-known/openapi.json ,然後再按「Import」按鈕
https://ithelp.ithome.com.tw/upload/images/20231206/20154415W3tM8AzlOR.png

如果您的 openapi.json 檔案無誤,您將看到解析結果。在「Available actions」下方的「Authentication」選項此時保持為「None」即可。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415Sqmcw22LFJ.png

至於「Privacy policy」,目前可以暫時不予理會,讓它空白即可。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415o85KD5XixZ.png

一切設定無誤後,您可以點擊右上角的按鈕進行儲存。請注意,當您點擊時,會出現一個彈出視窗。如果您選擇「Only me」,表示只有您可以使用該功能;如果希望與他人分享,則選擇「Only people with a link」;或者選擇「Public」以便公開。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415LC1yZyB3wI.png

最後,點擊「View GPT」以繼續
https://ithelp.ithome.com.tw/upload/images/20231206/20154415Qcwd1IUw2F.png

最後成果的驗收

完成上述步驟並點擊「View GPT」之後,系統會直接將我們引導至剛建立的 GPTs。在這裡,我們嘗試輸入「顯示我的待辦清單」,您會看到 ChatGPT 開始與我們的 API 進行互動。請務必點擊「Allow」以允許 ChatGPT 與外部系統進行互動。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415U1nrzsqk4B.png

初次查詢時,您會看到一個空白的待辦清單。
https://ithelp.ithome.com.tw/upload/images/20231206/20154415YmzekyCoUI.png

接下來,我們可以嘗試添加一些待辦事項,然後再次詢問清單的狀態來檢查:
https://ithelp.ithome.com.tw/upload/images/20231206/20154415LjnhnImIjh.png

同樣,我們還可以試著取消某個待辦項目,如下所示:
https://ithelp.ithome.com.tw/upload/images/20231206/20154415ME2ompc5Pe.png

以上便是我們建立一個連接至後端 API 伺服器的 GPTs 的完整步驟。希望您也能夠順利完成,並成功建立您自己的第一個可以與外部 API 互動的 GPTs。

活動通知:

首先,非常感謝您耐心閱讀到最後。想問一下,您從這次的教程中有所收穫嗎?

或許您已按照教程逐步操作,但仍遇到了一些難題,需要現場示範或進一步的解答?如果是這樣,我們特別為您準備了這次活動。

我們正在考慮,在公開自製GPTs的詳細教程之後,是否舉辦一場專門針對此教程的即時線上工作坊。如果您對此感興趣,我們誠摯邀請您填寫我們的意願調查表:GPTs 線上工作坊 - 參與意願調查

如果回應熱烈,我們將會安排一場線上工作坊,協助大家建立屬於自己的、能與外界互動的GPTs。

希望有興趣的朋友們能共襄盛舉,一起為這次工作坊集氣!


上一篇
[D30+8] GPT-4V 的創新應用 - 以 LLM 為中心的智慧型代理
下一篇
[D30+10] 如何 5 分鐘內,幫你的 GPTs 加上 OAuth 認證
系列文
以 OpenAI 以及 LangChain 實做我的聊天機器人41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言