關於 ChatGPT 的個人理解和前端實踐_Focus_

theme: juejin highlight: agate

前言

本篇文章的內容，包括專案都是 ChatGPT 輔助完成的，有很多簡介，專業術語、程式碼實現都是問的 TA，邊問邊寫。

開篇會以 ChatGPT 介紹為主，文末會重點介紹如何搭建專屬行業的數字人（這裡會涉及到前端一個比較有意思的技術點），文末有小程式體驗二維碼

下面某些場景會以“TA”來代指 ChatGPT，當然，我相信有一天“TA”會變成“他”和“她”～

ChatGPT 是什麼

TA 是一種基於人工智慧技術的自然語言處理工具，它可以模擬人類的對話方式，實現與人類的互動。TA 的核心技術是GPT（Generative Pre-trained Transformer）模型，TA 是一種基於Transformer架構的自然語言生成模型，由OpenAI公司開發。

ChatGPT 的優勢

TA 通過學習大量的語言資料，可以模擬人類的語言表達方式，理解人類的語言意圖，並且可以根據對話上下文生成自然流暢的回覆。

ChatGPT 應用場景

TA 可以應用於多個領域，例如客服機器人、智慧助手、智慧客服甚至能完成撰寫郵件、設計素材、視訊指令碼、文案、翻譯、程式碼，寫論文等任務。 TA 的應用場景非常廣泛，它可以為企業提供高效的客服解決方案，減少客服人員的工作量，提高客戶滿意度。同時，TA 還可以為智慧家居、智慧汽車等領域提供智慧化的語音互動解決方案，讓人們更加方便地使用智慧裝置。

周圍已經很多朋友開始訓練各行業模型了，比如說幫大學生寫論文（當然不推薦），保險行業導師、生成特定圖片素材等等，目前我主要把TA當作工具來用，比如寫文章、寫指令碼和格式化特定資料檔案等。

總之，ChatGpt是一種非常有前景的人工智慧技術，它可以為人們帶來更加智慧化、高效化的語言互動體驗，為企業提供更加優質的客戶服務。

呃～以上官方話術很多是 TA 自己介紹的自己

ChatGPT 如何使用

知乎：只需訪問 chat.openai.com 並建立一個 OpenAI 帳戶即可訪問 ChatGPT。登入後，您就可以開始使用 ChatGPT 聊天了...

當然很扯，看上圖就知道沒那麼簡單了

實際上需要做：

1. 國外伺服器代理

國內是無法直接訪問的（香港🇨🇳伺服器也不行），所以得掛個代理，偽裝在日本、新加坡或者美國，我們租的是日本伺服器

2. 擁有一個美國手機號

接碼平臺註冊：開啟網站：https://sms-activate.org/ 使用郵箱註冊，選擇充值1$，可以用支付寶，充值完畢會隨機分配一個手機號。

我們使用的手機號是之前創業的一個合夥人的手機號，他是定居美國，所以直接用的他的。

3. 註冊 OpenAI

開啟連結 https://beta.openai.com/signup 選擇使用 Google 登入即可，第二步中輸入分配給你的手機號，然後傳送驗證碼，回到剛剛的接碼平臺，就能看到收到的驗證碼了（20min有效）

4. 訪問

重新登入：http://chat.openai.com/auth/login

然後訪問：http://chat.openai.com/chat

和註冊美區 Apple ID 差不多的流程，當然也支援公司賬戶註冊

ChatGPT 怎麼收費？

最新官方定價——每1k個token的價格為0.002美元，比現有的GPT-3.5模型便宜10倍！

沒錯，是按字收費的，中文的話按兩個 token 計算，因為 TA 的成本主要集中在伺服器成本和算力成本，光引數都不到2000億個，可想而知成本是相當大的，這個也是和傳統搜尋引擎相比最大的一個缺點，畢竟搜尋是免費的，所以這些成本會均攤在使用者請求的每個字元上，按 token 計費

註冊賬號後每個賬戶會發放18$的贈送金額，如果用完了是需要付費的

ChatGPT 開發專屬數字人

訓練範圍

那有了賬號之後可以隨時和 TA 進行問答了，但是問題也來了，大家都用一個 TA 問問題，訓練模型，那 TA 聽誰的呢？舉個例子：

小紅問：乾隆和雍正什麼關係

TA：乾隆是雍正他爹

小紅：啊？應該是雍正是乾隆他爹啊，記住了嗎？

TA：記住了

小明問：乾隆和雍正什麼關係

TA：乾隆是雍正他爹

小明：雍正是乾隆他爺爺，記住了嗎

TA：記住了

這時候小強也問了同樣的問題，那麼 TA 怎麼回答？

答案是：各自回答各自賬號訓練範圍內的答案。

其實不難理解，就像 gitlab 程式碼倉庫管理一樣，TA 也會有一個基座資料，相當於程式碼主倉庫，每個賬戶是基於基座資料 fork 出來的個人倉庫，允許在個人倉庫訓練特定行業資料，但是不允許合併到基座。一句話理解：不能 merge 到基座，只能 rebase 基座資料到個人倉庫。

基座資料目前只更到2021年，所以需要使用者去手動訓練一些新的資料（如果有需求的話），當然由於 TA 是一個持續更新的模型，資料會隨著時間推移而不斷的更新。

OpenAI API

OpenAI提供了API介面，通過這個介面，開發者可以使用 chatGPT 等 OpenAI 模型來構建自己的應用程式。

也就是我們可以通過呼叫開源介面來搭建自己的專屬應用，也就是某個行業專屬的數字人。

上下文記錄

體驗過的可能瞭解 TA 是能記錄並且分析上下文的，在 API 中每個請求支援的最大 token 數為 4000，一般會設定回答佔 2000 token，上下文用 2000 token，這樣當你提問的時候 TA 會優先結合儲存的上下文給出 TA 認為最匹配的回答，這也是能進行持續性對話的基礎。

前端er需要搞點什麼

既然有開源介面，那後端需要做的是作為 client 向 server 傳送請求來呼叫開源 API（國外伺服器掛代理的原因）

前端需要做的是實現一個和 TA 有相同功能的 UI 介面（就以聊天對話場景為例）：

1. 需要做聊天互動元件

比如說需要支援文字，檔案，視訊，圖片等展示，推薦一個開源 UI 庫：ChatUI

這個是阿里小蜜團隊開源的聊天元件，也就是淘寶裡的機器人客服的 UI

2.服務端推送資料接收-位元組流

體驗過 TA 的聊天方式的人不難看出，TA 在回答問題的時候是逐字逐句回答的，每一個字或者每一句都有可能停頓，然後再返回，像極了人類在思考或者輸入的狀態，那 TA 是怎麼做的呢？

因為涉及到聊天，所以作為前端來說第一想到的是需要升級 http 協議為 websoket，然後通過服務端廣播，客戶端監聽接收來實現；

然而並不用這麼麻煩！！！重點來了！！！👇

OpenAI API 是一個字一個字生成的邊生成邊輸出，介面返回的是 generator 格式，也就是流式文字資料。

通常來說普通的 http 請求我們會設定 content-type:application/json，也就是是獲取帶有結構體的 json 資料，如果在這種請求場景下，你讓 TA 寫一篇長篇小說，那得等很久才能看到結果～，因為資料量太大了而且需要計算，等介面返回的時候是所有資料載入完的結果。

如果是 generator 格式，對應的 content-type:application/octet-stream，那麼通過 ES6 中的 async/await 關鍵字以及 fetch API來接收 generator 物件並將其迴圈輸出到網頁上即可（下面是 ChatGPT 給出的示例程式碼）：