概览 (Dialogflow)

Interactive Canvas 是基于 Google 助理构建的框架,可让开发者为对话型 Action 添加沉浸式视觉体验。此视觉体验是一个交互式 Web 应用,Google 助理会在对话中作为回应发送给用户。与 Google 助理对话中内嵌的传统富媒体响应不同,Interactive Canvas Web 应用会以全屏 Web 视图的形式呈现。

如果您想在 Action 中执行以下任一操作,应使用 Interactive Canvas:

  • 打造全屏视觉效果
  • 创建自定义动画和过渡
  • 直观呈现数据
  • 创建自定义布局和 GUI
图 1.一个使用 Interactive Canvas 构建的交互式游戏。

支持的设备

互动式画布目前可在以下设备上使用:

  • 智能显示屏
  • Google Nest Hub
  • Android 移动设备

运作方式

使用 Interactive Canvas 的 Action 与常规对话型 Action 的工作方式类似。用户仍与 Google 助理进行来回对话以实现自己的目标;但是,互动式画布操作会向用户发送可打开全屏 Web 应用的响应,而不是在对话中返回响应,而用户可以继续通过语音或轻触与 Web 应用互动,直到对话结束。

使用 Interactive Canvas 的 Action 有几个组成部分:

  • 对话型 Action:一种使用对话界面执行用户请求的 Action。交互式 Canvas Action 使用网页视图来呈现响应,而不是复合信息卡或简单的文本和语音响应。对话型 Action 使用以下组件:
    • Dialogflow 代理:您在 Dialogflow 中自定义为与 Action 用户对话的项目。
    • 执行方式:部署为 webhook 的代码,可实现 Dialogflow 代理的对话逻辑并与 Web 应用通信。
  • Web 应用:这是一种前端 Web 应用,包含您的 Action 在对话期间向用户发送的自定义视觉元素。您可以使用 HTML、JavaScript 和 CSS 等 Web 标准构建 Web 应用。

对话型 Action 和 Web 应用通过以下方式相互通信:

  • Interactive Canvas API:一个 JavaScript API,包含在 Web 应用中,用于在 Web 应用与对话型 Action 之间进行通信。
  • HtmlResponse:此响应包含 Web 应用的网址和要传递的数据。您可以使用 Node.jsJava 客户端库返回 HtmlResponse

为了说明 Interactive Canvas 的工作原理,我们假设有一个称为 Cool Colors 的 Action,该操作将设备屏幕的颜色更改为用户指定的颜色。用户调用 Action 后,该流程将如下所示:

  1. 用户对支持 Google 助理的设备说“Turn the screen blue”。
  2. Actions on Google 平台会将用户的请求路由到 Dialogflow 以匹配 intent。
  3. 匹配的 intent 的执行方式会运行,并且系统会向设备发送一个 HtmlResponse。如果设备尚未加载 Web 应用,系统会使用该网址加载该应用。
  4. Web 应用加载时,会使用 interactiveCanvas API 注册回调。然后,data 对象的值将传递到 Web 应用的已注册 onUpdate 回调。在本例中,执行方式会发送一个 HtmlResponse,其 data 包含一个值为 blue 的变量。
  5. Web 应用的自定义逻辑会读取 HtmlResponsedata 值,并做出定义的更改。在此示例中,这会使屏幕变为蓝色。
  6. interactiveCanvas 将回调更新发送到设备。

后续步骤

如需了解如何构建 Interactive Canvas Action,请参阅构建概览页面。

如需查看完整的 Interactive Canvas Action 的代码,请参阅示例