程序太枯燥？教你用AI实现UI交互式体验

点击上方关注，All in AI中国

会话界面越来越受欢迎，特别是处理看似并不透明的后端系统交易。例如，我们可以部署聊天机器人以引导客户完成故障排除过程，并在客户需要帮助时创建票据，而无需客户知道票据创建过程。这样可以为您的客户提供更直观的体验，提高客户的满意度，同时避免了员工出来故障单分类等工作，提高工作效率。

会话AI可以解决这个问题，但如果您的用户希望能够与您的前端应用程序进行交互呢?例如，用户可以不需确切链接就能浏览网站中的某个页面，或者用户能够在复杂的产品列表中快组找到自己的目标，而不需要应用复杂的过滤器。虽然我们的网络聊天可以嵌入到任何网站上，但它没有这些交互所必需的UI的上下文感知意识。为了演示我们如何实现这种上下文感知，本文将创建一个简单的地图应用程序，它带有一个嵌入式机器人，能够移动地图并放大或缩小:

通过定义向消息用户界面发送消息的“异常”方式，允许地图应用程序拦截消息、解析消息并移动地图、所有这一切都可以在最终消息显示给用户之前完成。

先决条件

首先，您需要使用SAP Conversational AI轻松构建一个简单的机器人。如果您不熟悉该平台，请转到本教程以了解如何构建一个搞笑的笑话机器人。

您还需要能够在您控制的某个位置托管我们的Webchat组件。

您还应该至少熟悉JavaScript和前端Web开发基础知识。

教程

首先，我们需要为我们的机器人定义接口，以便能够向我们的前端发送命令和消息。这将通过在发送给用户的普通消息字符串的位置，发送字符串化的JSON对象来完成。修改过的网络聊天将能够理解这个JSON对象，并能采取定义的操作，最后向用户显示“消息”。

这个操作非常简单，我们将发送一个具有“移动”或“缩放”动作的对象，然后发送一条可以向用户显示的消息。需要注意的是，我们需要将此JSON对象作为字符串发送，并且我们假设应用程序将解析它并仅向用户显示“message”的值。

如果我们的动作类型是“move”，地图需要导航到坐标。因此，我们将在JSON对象中包含一个位置的坐标。或者，如果我们的动作是zoom，我们需要知道是放大还是缩小。为此，我们将包括一个方向表示为1代表in或-1代表out。定义了这些之后，下面是JSON对象的一些示例:

考虑到这一点，我们可以开始构建我们的机器人。和往常一样，我们将从定义用户可以表达的意图开始。在本例中，我们有缩放和移动地图。

请注意，我们需要使用实体“direction”标记@zoom中的句子，但在@ move-map中会自动识别“location”。幸运的是，location gold实体提供了开箱即用的经度和纬度，因此我们能够轻松地将这些传递到前端。为了得到代表缩放方向的1或-1，我们将利用定制的资源。使用以下值添加键“name”和“direction”，然后将正确的实体值映射到它们各自的键值。

现在可以识别我们的移动地图意图，只需一个操作，如果我们的意图匹配的话就会触发：

并需要一个位置：

最后发回一条消息通知前端：

缩放技能同样可以用相似的方式实现，大家可以简单试一下。

现在机器人已经完成，接下来需要在本地主持网络聊天，以便我们可以对其进行修改以了解“异常”响应。

最后，来构建我们的Web应用程序。我们将首先为我们的地图创建一个容器div，编写用于处理地图交互的脚本（map_controls.js）， 它应该看起来像这样：

为了实现简单应用程序，我们将实现地图初始化和缩放/移动方法：

一旦聊天机器人成功地添加到应用程序中，我们就能够要求它移动或放大/缩小，但它仍然会向我们显示JSON字符串。为了解决这个问题，需要在Webchat/src/containers/Chat/index.js中添加以下代码。在窗口对象中搜索名为applicationParse的函数，并在它存在时调用它。

现在我们将在componentWillReceiveProps中调用setState之前调用getApplicationParse。这将确保我们的应用程序有机会在将任何内容发送回用户之前解析来自机器人的响应。

最后，我们需要实现applicationParse并将其包含在map_controls.js的window对象中。通过消息循环，如果它是来自bot的有效操作命令，则执行该操作并只将消息返回给用户。

现在就可以要求机器人移动或缩放地图了，它将发送应用程序可以解释并采取行动的消息。通过此工具，您可以将聊天机器人集成到任何Web应用程序中，并为用户提供有趣且直观的UI交互方式！

编译出品