火星网校
程序太枯燥?教你用AI实现UI交互式体验
发布时间：2024-01-23 12:02:02 浏览量：260次
点击上方关注，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交互方式！
编译出品
热门课程推荐
热门资讯
-
想将照片变成漫画效果？这篇文章分享了4个方法，包括Photoshop、聪明灵犀、VanceAI Toongineer、醒图，简单操作就能实现，快来尝试一下吧！
-
2. 华为手机神奇“AI修图”功能，一键消除衣服！原图变身大V领深V！
最近华为手机Pura70推出的“AI修图”功能引发热议，通过简单操作可以让照片中的人物换装。想了解更多这款神奇功能的使用方法吗？点击查看！
-
近年来,人工智能逐渐走入公众视野,其中的AI图像生成技术尤为引人注目。只需在特定软件中输入关键词描述语以及上传参考图就能智能高效生成符合要求的...
-
4. AI视频制作神器Viggle：让静态人物动起来，创意无限！
Viggle AI是一款免费制作视频的AI工具，能让静态人物图片动起来，快来了解Viggle AI的功能和优势吧！
-
5. Logo Diffusion——基于sd绘画模型的AI LOGO 生成器
这下LOGO设计彻底不用求人了。接下来详细演示一遍操作流程首先进入Logo D... 想学习更多AI技能,比如说关于怎么样利用AI来提高生产效率、还能做什么AI...
-
6. 零基础10分钟生成漫画，教大家如何用AI生成自己的漫画
接下来,我将亲自引导你,使用AI工具,创作一本既有趣又能带来盈利的漫画。我们将一起探索如何利用这个工具,发挥你的创意,制作出令人惊叹的漫画作品。让...
-
7. AI显卡绘画排行榜:4090无悬念，最具性价比出人意料
在AI绘图领域，Stable Diffusion的显卡绘图性能备受关注。本文整理了Stable Diffusion显卡的硬件要求和性能表现，以及2023年3月显卡AI绘图效率排行榜和性价比排行榜。欢迎查看最新的AI显卡算力排行榜。
-
以下是一些免费的AI视频制作网站或工具,帮助您制作各种类型的视频。 1. Lumen5:Lumen5是一个基于AI的视频制作工具,可将文本转换为视频。 用户可以使...
-
就能快速生成一幅极具艺术效果的作品,让现实中不懂绘画的人也能参与其中创作!真的超赞哒~趣趣分享几款超厉害的AI绘画软件,提供详细操作!有需要的快来...
-
10. 10个建筑AI工具，从设计到施工全覆盖!肯定有你从来没听过的
讲述了建筑业比较著名的AI公司小库科技做出的探索,在这儿就不多说了。今天,我们试着在规划设计、建筑方案设计、住宅设计、管道设计、出渲染图、3D扫...
