激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

程序太枯燥?教你用AI實(shí)現(xiàn)UI交互式體驗(yàn)

發(fā)布時(shí)間：2024-01-23 12:02:02 瀏覽量：261次

點(diǎn)擊上方關(guān)注，All in AI中國(guó)

會(huì)話界面越來越受歡迎，特別是處理看似并不透明的后端系統(tǒng)交易。例如，我們可以部署聊天機(jī)器人以引導(dǎo)客戶完成故障排除過程，并在客戶需要幫助時(shí)創(chuàng)建票據(jù)，而無需客戶知道票據(jù)創(chuàng)建過程。這樣可以為您的客戶提供更直觀的體驗(yàn)，提高客戶的滿意度，同時(shí)避免了員工出來故障單分類等工作，提高工作效率。

會(huì)話AI可以解決這個(gè)問題，但如果您的用戶希望能夠與您的前端應(yīng)用程序進(jìn)行交互呢?例如，用戶可以不需確切鏈接就能瀏覽網(wǎng)站中的某個(gè)頁(yè)面，或者用戶能夠在復(fù)雜的產(chǎn)品列表中快組找到自己的目標(biāo)，而不需要應(yīng)用復(fù)雜的過濾器。雖然我們的網(wǎng)絡(luò)聊天可以嵌入到任何網(wǎng)站上，但它沒有這些交互所必需的UI的上下文感知意識(shí)。為了演示我們?nèi)绾螌?shí)現(xiàn)這種上下文感知，本文將創(chuàng)建一個(gè)簡(jiǎn)單的地圖應(yīng)用程序，它帶有一個(gè)嵌入式機(jī)器人，能夠移動(dòng)地圖并放大或縮小:

通過定義向消息用戶界面發(fā)送消息的“異常”方式，允許地圖應(yīng)用程序攔截消息、解析消息并移動(dòng)地圖、所有這一切都可以在最終消息顯示給用戶之前完成。

先決條件

首先，您需要使用SAP Conversational AI輕松構(gòu)建一個(gè)簡(jiǎn)單的機(jī)器人。如果您不熟悉該平臺(tái)，請(qǐng)轉(zhuǎn)到本教程以了解如何構(gòu)建一個(gè)搞笑的笑話機(jī)器人。

您還需要能夠在您控制的某個(gè)位置托管我們的Webchat組件。

您還應(yīng)該至少熟悉JavaScript和前端Web開發(fā)基礎(chǔ)知識(shí)。

教程

首先，我們需要為我們的機(jī)器人定義接口，以便能夠向我們的前端發(fā)送命令和消息。這將通過在發(fā)送給用戶的普通消息字符串的位置，發(fā)送字符串化的JSON對(duì)象來完成。修改過的網(wǎng)絡(luò)聊天將能夠理解這個(gè)JSON對(duì)象，并能采取定義的操作，最后向用戶顯示“消息”。

這個(gè)操作非常簡(jiǎn)單，我們將發(fā)送一個(gè)具有“移動(dòng)”或“縮放”動(dòng)作的對(duì)象，然后發(fā)送一條可以向用戶顯示的消息。需要注意的是，我們需要將此JSON對(duì)象作為字符串發(fā)送，并且我們假設(shè)應(yīng)用程序?qū)⒔馕鏊H向用戶顯示“message”的值。

如果我們的動(dòng)作類型是“move”，地圖需要導(dǎo)航到坐標(biāo)。因此，我們將在JSON對(duì)象中包含一個(gè)位置的坐標(biāo)?；蛘撸绻覀兊膭?dòng)作是zoom，我們需要知道是放大還是縮小。為此，我們將包括一個(gè)方向表示為1代表in或-1代表out。定義了這些之后，下面是JSON對(duì)象的一些示例:

考慮到這一點(diǎn)，我們可以開始構(gòu)建我們的機(jī)器人。和往常一樣，我們將從定義用戶可以表達(dá)的意圖開始。在本例中，我們有縮放和移動(dòng)地圖。

請(qǐng)注意，我們需要使用實(shí)體“direction”標(biāo)記@zoom中的句子，但在@ move-map中會(huì)自動(dòng)識(shí)別“l(fā)ocation”。幸運(yùn)的是，location gold實(shí)體提供了開箱即用的經(jīng)度和緯度，因此我們能夠輕松地將這些傳遞到前端。為了得到代表縮放方向的1或-1，我們將利用定制的資源。使用以下值添加鍵“name”和“direction”，然后將正確的實(shí)體值映射到它們各自的鍵值。

現(xiàn)在可以識(shí)別我們的移動(dòng)地圖意圖，只需一個(gè)操作，如果我們的意圖匹配的話就會(huì)觸發(fā)：

并需要一個(gè)位置：

最后發(fā)回一條消息通知前端：

縮放技能同樣可以用相似的方式實(shí)現(xiàn)，大家可以簡(jiǎn)單試一下。

現(xiàn)在機(jī)器人已經(jīng)完成，接下來需要在本地主持網(wǎng)絡(luò)聊天，以便我們可以對(duì)其進(jìn)行修改以了解“異?！表憫?yīng)。

最后，來構(gòu)建我們的Web應(yīng)用程序。我們將首先為我們的地圖創(chuàng)建一個(gè)容器div，編寫用于處理地圖交互的腳本（map_controls.js）， 它應(yīng)該看起來像這樣：

為了實(shí)現(xiàn)簡(jiǎn)單應(yīng)用程序，我們將實(shí)現(xiàn)地圖初始化和縮放/移動(dòng)方法：

一旦聊天機(jī)器人成功地添加到應(yīng)用程序中，我們就能夠要求它移動(dòng)或放大/縮小，但它仍然會(huì)向我們顯示JSON字符串。為了解決這個(gè)問題，需要在
Webchat/src/containers/Chat/index.js中添加以下代碼。在窗口對(duì)象中搜索名為applicationParse的函數(shù)，并在它存在時(shí)調(diào)用它。

現(xiàn)在我們將在componentWillReceiveProps中調(diào)用setState之前調(diào)用getApplicationParse。這將確保我們的應(yīng)用程序有機(jī)會(huì)在將任何內(nèi)容發(fā)送回用戶之前解析來自機(jī)器人的響應(yīng)。

最后，我們需要實(shí)現(xiàn)applicationParse并將其包含在map_controls.js的window對(duì)象中。通過消息循環(huán)，如果它是來自bot的有效操作命令，則執(zhí)行該操作并只將消息返回給用戶。

現(xiàn)在就可以要求機(jī)器人移動(dòng)或縮放地圖了，它將發(fā)送應(yīng)用程序可以解釋并采取行動(dòng)的消息。通過此工具，您可以將聊天機(jī)器人集成到任何Web應(yīng)用程序中，并為用戶提供有趣且直觀的UI交互方式！

編譯出品

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定