ChatGPT近大火，讓原本已經(jīng)沉寂許久的AI領(lǐng)域再次被喚醒狂歡。但是還是有很多朋友受限于OpenAI對(duì)國(guó)內(nèi)用戶的限制，無(wú)法愉快地體驗(yàn)這項(xiàng)革命性的AIGC技術(shù)。

   眾所周知，ChatGPT是一個(gè)基于GPT-3的聊天機(jī)器人模型，能夠通過(guò)分析提問(wèn)內(nèi)容生成流暢的自然語(yǔ)言結(jié)果，我們除了可以在OpenAI的ChatGPT官網(wǎng)上體驗(yàn)，也可以通過(guò)調(diào)用官方API來(lái)獲取ChatGPT機(jī)器人模型進(jìn)行訓(xùn)練和體驗(yàn)。

   本教程將向您展示如何使用低代碼工具，在30分鐘左右搭建一個(gè)基于ChatGPT的聊天機(jī)器人小程序。一方面能讓擁有OpenAI賬號(hào)的朋友能隨時(shí)隨地體驗(yàn)ChatGPT；另一方面，也希望通過(guò)教程學(xué)習(xí)搭建出AI聊天小程序，去分享給更多人，把前沿的AI技術(shù)普惠到更廣泛的群體，一起體驗(yàn)GPT3技術(shù)所帶來(lái)的便利。

   我們這次就以騰訊云微搭低代碼作為搭建平臺(tái)，來(lái)演示一下應(yīng)該如何快速開(kāi)發(fā)一個(gè)基于ChatGPT的聊天機(jī)器人應(yīng)用，即便是新手開(kāi)發(fā)者也可以試試哦

    一、準(zhǔn)備工作

    在開(kāi)始搭建聊天機(jī)器人之前，您需要做以下準(zhǔn)備：

   ?微信小程序賬號(hào)：如果您還沒(méi)有微信小程序賬號(hào)，可以在微信公眾平臺(tái)注冊(cè)（如果沒(méi)有小程序，也可以發(fā)布為移動(dòng)端H5應(yīng)用）

   ?開(kāi)通騰訊云微搭低代碼：微搭低代碼是騰訊云官方推出的一款快速搭建應(yīng)用的低代碼開(kāi)發(fā)工具，可以直接訪問(wèn)騰訊云微搭官網(wǎng)免費(fèi)開(kāi)通注冊(cè)

   ?OpenAI賬號(hào)：OpenAI賬號(hào)注冊(cè)也是免費(fèi)的，不過(guò)OpenAI有地域限制，這里網(wǎng)上教程關(guān)鍵詞搜索一大把，就不做贅述了。注冊(cè)成功后，可以登錄OpenAI的個(gè)人中心來(lái)獲取APIKEY

    本教程適用人群和應(yīng)用類型：

    ?適用人群：初級(jí)開(kāi)發(fā)者（操作門檻較低，有一定技術(shù)背景的非開(kāi)發(fā)者也可以體驗(yàn)）

    ?應(yīng)用類型：小程序或H5應(yīng)用（基于微搭一碼多端特性，也可以直接發(fā)布為Web應(yīng)用）

    二、搭建聊天機(jī)器人

    首先，一個(gè)常見(jiàn)的聊天對(duì)話機(jī)器人應(yīng)用界面效果，如下圖所示：

    通過(guò)應(yīng)用界面可以看到，它主要由如下幾個(gè)部分組成：

    ?一個(gè)對(duì)話聊天界面

    ?一個(gè)API數(shù)據(jù)查詢接口

    ?界面UI與后端數(shù)據(jù)的聯(lián)動(dòng)渲染

    那現(xiàn)在，我們就參照上面的幾個(gè)模塊，正式開(kāi)始通過(guò)微搭低代碼工具，分5個(gè)步驟來(lái)依次拆解搭建：

    1.對(duì)應(yīng)用界面進(jìn)行樣式配置

   我們先拖入一個(gè)滾動(dòng)容器和一個(gè)普通容器，一個(gè)用來(lái)展示聊天的上下文對(duì)話，一個(gè)用來(lái)展示輸入框和發(fā)送按鈕。然后依次拖入圖中大綱樹(shù)所示的組件，組件相應(yīng)的層級(jí)關(guān)系可以參考上圖中的大綱樹(shù)結(jié)構(gòu)。

   接下來(lái)針對(duì)上述的組件分別進(jìn)行樣式的配置，我們默認(rèn)使用樣式面板的彈性（Flex）布局，包含接收消息和發(fā)送消息兩個(gè)普通容器，可以分別選擇樣式面板中的彈性布局中的左對(duì)齊，如下圖所示：

    接著可以分別配置圖片和文本兩個(gè)組件的高度和寬度大小以及內(nèi)外間距，以達(dá)到想要的視覺(jué)效果。

   完成聊天上下文對(duì)話框的樣式配置之后，可以進(jìn)行底部多行輸入框和按鈕這個(gè)普通容器的樣式配置，樣式配置方式與上面的發(fā)送消息容器一樣使用彈性布局并選擇“平分”的方式布局，如下圖所示：

   完成布局配置之后，由于底部輸入框按鈕等是固定位置的，故需要額外配置一下定位屬性，選中底部的“普通容器”，在樣式面板底部，做如下配置即可：

    以上，通過(guò)進(jìn)一步微調(diào)一些樣式細(xì)節(jié)如組件背景色以及間距等后，即可達(dá)到上文提到的應(yīng)用界面效果了。

   可以看到整個(gè)頁(yè)面的配置過(guò)程是完全可視化操作的，不需要寫一行代碼。當(dāng)然，如果樣式配置不是很熟悉，或者有疑問(wèn)的朋友，也可以等我們的視頻教程，手把手教你用微搭低代碼來(lái)配置AI聊天應(yīng)用。

    2.配置數(shù)據(jù)變量和數(shù)據(jù)源API

    第2步，開(kāi)始進(jìn)行數(shù)據(jù)的綁定和數(shù)據(jù)源的配置：

    a.新建一個(gè)數(shù)組對(duì)象變量chatList，用于存儲(chǔ)聊天記錄

   首先配置一個(gè)變量，如命名為chatLlist聊天記錄這么一個(gè)變量，一個(gè)對(duì)象數(shù)組，默認(rèn)值為如下所示，當(dāng)然大家也可以基于這個(gè)結(jié)構(gòu)任意修改。

    [

    {

   "res":"你好，歡迎體驗(yàn)ChatGPT聊天機(jī)器人，你可以直接輸入你感興趣的任何問(wèn)題向我提問(wèn)",

    "req":"紅孩兒是牛魔王的親兒子嗎？",

    "index":1

    },

    {

   "res":"不是，紅孩兒是牛魔王的養(yǎng)子。據(jù)西游記中的記載，牛魔王是一個(gè)孤獨(dú)的怪物，他在深山里住了很久，沒(méi)有子女，卻有一個(gè)養(yǎng)子——紅孩兒，紅孩兒的父母去世時(shí)，牛魔王便收養(yǎng)了他。",

    "req":"那誰(shuí)教他的三味真火",

    "index":2

    }

    ]

   接著把這個(gè)數(shù)組變量的初始值跟我們的這個(gè)頁(yè)面的內(nèi)容分別進(jìn)行綁定。首先我們選擇一個(gè)父級(jí)的普通容器，在屬性配置的循環(huán)展示綁定為剛剛新建的數(shù)組變量。然后在里面的子節(jié)點(diǎn)中，如文本組件，分別綁定這個(gè)數(shù)組中的成員變量，他們的配置如下圖所示：

    這一步數(shù)據(jù)綁定完成之后，接下來(lái)就可以去配置請(qǐng)求遠(yuǎn)程數(shù)據(jù)的數(shù)據(jù)源API了。

    b.配置一個(gè)數(shù)據(jù)源APIs（用于請(qǐng)求ChatGPT接口）

   API的配置相對(duì)比較簡(jiǎn)單，主要參考OPENAI的官方文檔，文檔中可以看到文本對(duì)話接口對(duì)應(yīng)的請(qǐng)求參數(shù)信息如下：

    分別把上方的CURL請(qǐng)求頭信息對(duì)應(yīng)到HTTP的請(qǐng)求中即可，配置項(xiàng)參考如下：

   我們通過(guò)數(shù)據(jù)源中的【方法測(cè)試】，得到API的返回結(jié)果如下，點(diǎn)擊【出參映射】即可完成出參結(jié)構(gòu)的配置：

   其中的API_KEY是在完成OPENAI賬號(hào)注冊(cè)之后，在其個(gè)人中心中獲取即可，至于OPENAI的賬號(hào)注冊(cè)方式，大家動(dòng)動(dòng)手搜索一下，網(wǎng)上教程很多就不啰嗦了。

    3.給發(fā)送按鈕綁定請(qǐng)求事件

   我們?cè)诘?步中已經(jīng)在頁(yè)面中放置了輸入框、按鈕和文本展示等組件。接下來(lái)，我們需要給輸入框配置相關(guān)的事件響應(yīng)邏輯，來(lái)獲取用戶輸入的消息內(nèi)容，參考的關(guān)鍵配置如下:

   然后，給按鈕綁定事件來(lái)處理輸入框中用戶發(fā)送的消息，選擇按鈕組件，在右側(cè)事件面板中配置如下邏輯，即點(diǎn)擊按鈕時(shí)觸發(fā)API請(qǐng)求，并將獲取到的API返回結(jié)果渲染在頁(yè)面中。

    4.將API返回?cái)?shù)據(jù)與在頁(yè)面中進(jìn)行渲染展示

    第4步，將返回值用“變量賦值”方法加入到chatList數(shù)組中

   這里我們需要在數(shù)據(jù)中增加一條新的消息，采用表達(dá)式綁定的方式進(jìn)行原有的ChatList變量進(jìn)行解構(gòu)后再賦值，表達(dá)式參考如下：

    成開(kāi)發(fā)，進(jìn)行應(yīng)用發(fā)布

   前端界面和后端數(shù)據(jù)邏輯都配置開(kāi)發(fā)完成后，可在應(yīng)用編輯器的右上角點(diǎn)擊“發(fā)布”按鈕，我們可以選擇發(fā)布到已綁定的小程序，也可以直接發(fā)布移動(dòng)端的H5應(yīng)用，如下所示：

    至此，一個(gè)基礎(chǔ)的AI聊天機(jī)器人應(yīng)用搭建就完成了。

    三、進(jìn)一步完善

    基于上述步驟搭建完聊天機(jī)器人小程序后，你還可以進(jìn)一步完善它的功能。

   例如，您可以在小程序中添加聊天記錄功能，讓用戶可以查看過(guò)往的聊天記錄。您也可以使用其他自然語(yǔ)言處理技術(shù)；例如語(yǔ)音識(shí)別和文本分類，來(lái)使聊天機(jī)器人更加智能。

   如需要存儲(chǔ)聊天歷史記錄的話，可以在數(shù)據(jù)源中配置一個(gè)“聊天歷史記錄”數(shù)據(jù)模型，參考模型配置如下：