隨著技術(shù)越來越融入我們的日常生活，重要的是要考慮它將如何塑造未來。一個特別有前途的領(lǐng)域是人工智能 (AI)，隨著基于 AI 的高級應(yīng)用程序（如 ChatGPT）的開發(fā)，它變得更加重要。在這篇博文中，我們介紹了 ChatGPT 的基礎(chǔ)知識以及 ChatGPT 與 Node 和 Vue 的集成。

介紹

ChatGPT 工具在 2023 年 1 月?lián)碛谐^ 1 億用戶，極大地推動了 AI 行業(yè)的發(fā)展，使其成為迄今為止增長最快的消費者應(yīng)用程序。最近，市場出現(xiàn)了新的范式轉(zhuǎn)變，其中涉及ChatGPT 與 Node 和 Vue 的集成。繼續(xù)本主題，讓我們首先借助下圖對集成流程進行基本概述：

注意：ChatGPT 建議我們不要將令牌存儲在客戶端，而是使用后端來請求 ChatGPT API。

在深入了解ChatGPT 與 Node 和 Vue 的集成之前，讓我們回顧一下什么是 ChatGPT。

什么是聊天 GPT？

我們可以將 ChatGPT 稱為 OpenAI 創(chuàng)建的基于 AI 的聊天機器人平臺，它利用了高級 GPT-3 語言模型的強大功能。GPT-3，也稱為 Generative Pre-training Transformer 3″，是一種自然語言處理模型。它接受了多種語言和風格的大量人類生成內(nèi)容的訓練。

ChatGPT 使用轉(zhuǎn)換器架構(gòu)，這是一種中性網(wǎng)絡(luò)，可有效處理文本等順序數(shù)據(jù)。它可以執(zhí)行寫作、總結(jié)、翻譯、提問和回答文本等任務(wù)，使其成為構(gòu)建交互式聊天機器人的強大工具。ChatGPT 允許創(chuàng)建可以為用戶提供自然對話體驗的聊天機器人。它是可定制的，很容易將聊天機器人集成到應(yīng)用程序和平臺中。ChatGPT 支持構(gòu)建可提供個性化用戶體驗的交互式聊天機器人。

ChatGPT 與 Node 和 Vue 集成的流程

現(xiàn)在我們已經(jīng)了解了 ChatGPT 和 ChatGPT 流程集成的架構(gòu)。讓我們繼續(xù) ChatGPT 與 Node 和 Vue 的集成過程。

第 1 步：ChatGPT 與 Node.js 和 Vue.js 集成的虛擬項目設(shè)置

使用 Node.js 作為后端和 Vue.js 作為 ChatGPT 與 Node.js 和 Vue.js 項目集成的前端。這個項目需要一個簡單的后端，我們只為它配置了一個帶有 POST 請求的端點，在這個端點的幫助下，我們將使用 ChatGPT 在前端和后端之間建立連接。下面給出了后端的示例，我們還可以在其中看到唯一一個為請求的數(shù)據(jù)提供服務(wù)的控制器。

前端在本質(zhì)上也是基本的，只需要一個組件，即“ChatBox”，它將負責向 ChatGPT 發(fā)送消息并接收相應(yīng)的響應(yīng)，如下圖所示：

有關(guān)代碼參考，請訪問GitHub 存儲庫。

需要 Vue 開發(fā)人員將 ChatGPT 無縫集成到您的項目中嗎？
我們的Vue 開發(fā)人員可以幫助您集成 ChatGPT，使您的應(yīng)用程序更加用戶友好、互動并創(chuàng)造更具吸引力的用戶體驗。現(xiàn)在聯(lián)系我們！

接下來讓我們跳到為 Node.js 設(shè)置 OpenAI 包。

第 2 步：為 Node.js 設(shè)置 OpenAI SDK/包

在您的 ChatGPT 與 Node 和 Vue 的集成中，OpenAI 是一個包，負責管理用戶與 ChatGPT 服務(wù)器之間的所有通信。此外，它是 ChatGPT 的官方軟件包，要探索更多信息并深入了解詳細信息，請參閱文檔。

接下來，讓我們通過以下命令在后端安裝 OpenAI 包：

npm 安裝 openai

現(xiàn)在，讓我們配置chatGpt.controller.js它將與后端的 ChatGPT API 進行通信，如下所示：

// chatGpt.controller.jsconst {Configuration, OpenAIApi} = require('openai')const askToChatGpt = async function (req, res) {
   /**
    * 1. 創(chuàng)建/配置 OpenAI 實例
    */
   常量 openAIInstance = await _createOpenAIInstance()
   /**
    * 2. 讓我們聊聊天GPT
    */
   等待 openAIInstance.createCompletion({
       模型：'text-davinci-003'，
       提示：req.body.message,
       溫度：0，
       最大令牌數(shù)：500
   })
   .then((響應(yīng))=>{
       const replyedMessage = response.data.choices[0].text
       res.send({from: 'chatGpt', data: repliedMessage})
   })
   .catch((錯誤) => {
       //報錯
       console.log('錯誤', 錯誤)
   });}const _createOpenAIInstance = async () => {
   const conf = 等待新的配置（{
       apiKey: process.env['CHATGPT_TOKEN']
   })
   返回等待新的 OpenAIApi(conf)}模塊.exports = {
   askToChatGpt}

注意：將 ChatGPT 令牌保存在 Node.js 的 .env 中，鍵為 CHATGPT_TOKEN。您可以創(chuàng)建 .env 文件并復制粘貼 .env.example 的內(nèi)容并替換令牌。然后，從 ChatGPT 帳戶的個人資料部分生成令牌。

要記住的一點是將 ChatGPT 令牌放在 Node.js 的 .env 中的 CHATGPT_TOKEN 鍵上。此外，您可以創(chuàng)建一個 .env 文件并復制粘貼 .env 示例的內(nèi)容并替換令牌。您可以從 ChatGPT 帳戶的配置文件部分生成您的令牌。

現(xiàn)在，我們的主要邏輯已準備好進行測試，以檢查它向http://localhost:3000/ask-to-chat-gp發(fā)出請求并提及您的消息，您將從 ChatGPT 獲得適當?shù)捻憫?yīng)。

在主要邏輯之后是下一步，即前端向 Node.js 服務(wù)器發(fā)出請求。

第 3 步：使用 Vue.js 設(shè)置前端

因此，對于前端，我們使用 Vue.js。但是，您可以使用您選擇的任何其他前端，例如 React、Angular、Native HTML、JavaScript 或任何其他前端。這個前端背后的核心意圖是只向我們在上面創(chuàng)建的 API 端點發(fā)出請求。

在本例中，我們在 /src/components 目錄下創(chuàng)建了一個 ChatBox.vue 組件，負責與后端通信，這里我們使用 Axios 進行 API 請求。以下是我們?nèi)绾蜗蚝蠖税l(fā)出請求的過程以及您可以在 GitHub 存儲庫中找到上述邏輯的邏輯。

方法： {
   異步發(fā)送消息（消息）{
    這。消息。推 （{
     來自：'用戶'，
     數(shù)據(jù)：消息
   })
   await axios.post('http://localhost:3000/ask-to-chat-gpt', {
     消息：消息
   })
   .then( (響應(yīng)) => {
      這。消息。推送響應(yīng)。數(shù)據(jù)）
   })
  }}

這就是我們的 ChatBox.vue 組件的樣子：

<模板>
 <div class="你好">
   <h1>要求聊天Gpt</h1>
   <input v-model="currentMessage" type="text"> <span><button @click="sendMessage(currentMessage)">詢問</button></span>
   <div 類="消息框">
    <template v-for="消息中的消息">
     <div :class="message.from=='user' ? 'messageFromUser' :'messageFromChatGpt'" :key="message" v-html="message.data"></div>
   </模板>
   </div>
 </div></模板><!-- 添加“scoped”屬性以將 CSS 限制為僅此組件 --><樣式范圍>輸入 {
 寬度：300px；
 填充：10px；}按鈕 {
 高度：40px；
 背景顏色：粉藍色；
 填充：10px；}.消息框{
 高度：500px；
 背景色：gainsboro；
 /* 左邊距：10%；
 保證金權(quán)利：10%；*/
 保證金：0 20% 0 20%；
 頂部邊距：20px；
 填充：5%；}.messageFromUser {
 文本對齊：右；
 背景色：愛麗絲藍；
 邊界半徑：10px；
 填充：10px；
 頂部邊距：15px；
 底部邊距：15px；
 寬度：30%；
 左邊距：70%；}.messageFromChatGpt {
 文本對齊：左；
 背景色：古董白；
 邊界半徑：10px；
 填充：10px；
 頂部邊距：15px；
 底部邊距：15px；
 寬度：30%；
 邊際權(quán)利：70%；}</樣式>

現(xiàn)在，我們已經(jīng)完成了代碼，讓我們繼續(xù)前進并測試它。

想要構(gòu)建易于維護和更新的應(yīng)用程序？
我們的 Node.js 開發(fā)人員使用最新的工具和技術(shù)來確保您的應(yīng)用程序保持最新狀態(tài)。從我們這里聘請 Node js 開發(fā)人員，讓您的項目面向未來。

第 4 步：為前端、后端提供服務(wù)并測試流程

然后，您需要為項目提供服務(wù)，您的工作就完成了。在這里，我們在http://localhost:3000上為后端服務(wù)，在http://localhost:8080上為前端服務(wù)，這些命令可用于為前端和后端服務(wù)。

對于后端

節(jié)點索引.js

對于前端

npm 運行服務(wù)

然后，您將看到如下屏幕：

現(xiàn)在，如上圖所示，將問題放在頂部的輸入框中，您將從 ChatGPT 獲得所需的響應(yīng)。

恭喜！我們已成功完成您的 ChatGPT 與 Node.js 和 Vue 的集成。為確保其正常運行，請了解由我們經(jīng)驗豐富的OpenAI 開發(fā)人員分享的 ChatGPT 服務(wù)的基本內(nèi)容。

ChatGPT 服務(wù)基本術(shù)語

在下圖中，您可以觀察到我們在從后端 (chatGpt.controller.js) 向 ChatGPT 服務(wù)發(fā)出請求時提到了一些屬性，此參數(shù)的值也修改了我們將從 ChatGPT API 獲得的答案，讓我們一一來看。

等待 openAIInstance.createCompletion({
    模型：'text-davinci-003'，
    提示：req.body.message,
    溫度：0，
    最大令牌數(shù)：500}).then {（響應(yīng)）=> {
      const replyedMessage = response.data.choices[0].text
      res.send({from: 'chatGpt', data: repliedMessage})}).catch( (錯誤) => {
    //報錯
    安慰。日志（'錯誤'，錯誤）});

??模特

您一定已經(jīng)注意到我們使用了“text-davinci-003”模型，這是我們使用的模型的名稱。正如我們所知，ChatGPT 使用大量數(shù)據(jù)集進行訓練，您可以在發(fā)出請求時選擇使用哪個模型，具體取決于您的用例。

??提示

此處的提示包含或包含我們必須詢問基于此項目的 ChatGPT 的問題，這是從客戶端請求的消息。

?? 溫度

這里的溫度表示并負責答案的多樣性，您可以根據(jù)您的用例決定您喜歡的多樣性。將該值保持在 1.0 以下會生成可預測的答案。

?? Max_tokens

它直接指答案的長度，定義了字數(shù)、標點符號等。

結(jié)論

（言鼎科技）