微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

百度自研面向智能设备的语音交互编程语言VSL:用于实现语音交互视图

2019-06-06 19:29 陈奇

演讲嘉宾 | 陈奇
编辑 | 王莹
百度搜索前端团队在语音交互的探索和开发中,创造出一种面向智能设备语音交互的编程语言 VSL(Voice Specific Language),用于帮助开发者们快速、低成本的接入语音交互,并为语音操作视图提出通用解决方案。本文整理自百度高级前端工程师陈奇在 QCon 全球软件开发大会(北京站)2019 上的演讲,他在本次分享中为大家详细了介绍 VSL 的运转方式和实现功能。
VSL 的诞生背景
什么是语音交互

说到语音交互,大家会想到像 siri 这样的语音智能助手。的确,语音助手是我们生活中比较常见的一种语音交互方式,通过跟语音智能助手进行对话,可以快速的获取到我们想要的信息,省去打开搜索引擎进行信息搜索的人力成本。那么这样的交互方式,可以归纳为一种对话式的语音交互。

但对于前端工程师来说,有没有办法把语音也纳入我们的开发中,作为我们操作形式的一部分呢?答案是肯定的。我们把这样交互方式称之为视图操作式的语音交互,首先我们来看下语音交互的演变过程。

视图交互的演变过程

在早期的 PC 时代,大家基本上通过鼠标之类的外设进行点击或滑动来完成视图交互。之后,随着可触控式智能设备迅速发展,所触即所得的触控交互方式被大家迅速接受。而到了近几年,语音的爆红,语音进行视图交互的方式开始萌芽,并逐步发展。

视图交互的演化历程图

语音交互的应用场景
  1. 第一个应用场景是手机:可能大家认为手机的主要交互方式还是触控,但是对于一些比较复杂的场景(比如说复杂表单的输入等操作),相对于触控交互的方式来说,语音交互的方式可以发挥快速输入、快速选择的优势,达到快速操作的效果。

  2. 第二个应用场景是车载:当你在开车的时候,如果这时候想用手触控其他智能设备进行交互是非常危险的 。而语音交互恰巧可以帮你解放双手,增加我们驾驶的安全性。

  3. 第三个场景就是智能家用设备:当我们在看电视的时候,会遇到很多浏览或选择电影、电视信息的场景,这时候,如果在距离电视中远距离的情况下,通过语音的方式来操作视图,将会有非常良好的智能用户体验。

使用语音交互的场景

除了我上面说的这三个场景之外,语音交互还有很多其他的应用场景。比如,在一定的场景下,身体上有残障的用户无法手动使用外设进行操作,语音交互的方式可以很好的解决这个问题。类似的场景很多,这里就不一一叙述了。

传统的语音交互实践

起初,我们百度搜索团队在刚接触到语音交互需求的时候,大家常规的思路为:

  1. 前后端要约定可以执行的所有动作,比如用户的选择意图动作,或者滑动意图动作等,并约定这些动作所对应的 ID。

  2. 后端服务需要支持话术意图解析,即能解析用户话术,并与约定好的意图动作匹配成功。

  3. 用户发起语音后,后端解析话术意图,将与之匹配的动作 ID 传给前端。

  4. 前端根据约定好的 ID 去编写视图操作的处理逻辑

上面的思路虽然清晰,但是这种开发流程存在着以下缺点:

  • 前后端需要进行大量的沟通,协议一些约定。

  • 前端需要编写繁琐的关于语音端类处理、后端通信和视图操作处理等逻辑。

  • 开发和维护成本过高。

  • 可复用性差。

  • 多场景下的交互效果无法保持一致:同一个场景,不同端会有相似的需求,但是却没有一个固定的表达,在多场景下均能匹配到这个语音。而且也无法实现相同交互逻辑。

  • 没有形成规范:不同的人开发,代码的逻辑上无法统一,其实现的效果也无法保持一致。

为了解决这些问题,我们创造了 VSL(Voice Specific Language)。

VSL 的基本信息
定义

VSL 是 Voice Specific Language 的缩写,其定义是面向智能设备的语音交互编程语言。简单来说,它是为了解决语音交互视图问题而诞生的特定语言,通过提供一套接入规范和技术框架,并封装了语音交互的核心功能,使各场景能够快速、低成本的接入语音。

特点

VSL 特点有三个,分别是低成本,低耦合和标准化:

  • 低成本:为了解决页面视图赋予语音交互功能的开发成本过高。

  • 低耦合:语音的处理从页面视图里抽象出来,开发者不需要关心语音操作的流程,只需要进行一些简单的配置,即可赋予整个视图语音交互的能力。

  • 标准化:实现了一套语音交互视图的标准,统一了我们的开发形式,并且在交互效果上达成统一。

VSL 的使用和运转
如何使用 VSL

假设我们把 VSL 应用的场景精简化,简化到里面只有一个点击的确认按纽,我们现在想要达到的效果是:当我们说确认时,能够触发点击按纽的操作。在使用 VSL 的时,主要分为两个部分:

  1. 对于 button 这个节点,需要声明 voice-tag 标签属性值是“确认”,voice-action 标签属性值是“click”。

  2. 在 JS 层需要引入 VSL 模块,并且进行初始化

你可以看到,这短短不到十行的代码,就代表整个页面已经拥有了语音交互的能力,不管对这个页面说“确认”,或“确定”,或“点击确认按纽”的时候,都会响应这个按纽的点击操作。

VSL 的运转流程

VSL 在是如何去处理整个视图以及语音交互功能呢?接下来,就为大家介绍一下:

  1. VSL 注册了端能力,具备进行语音监听能力,可以在页面视图中获取用户所说的话术。注册端能力的形式,在不同端下表达方式是不一样的。有些 APP 自身会提供一些语音的接口,在用户授权的情况下拿到用户的语音数据,像一些浏览器可以通过 getUserMedia 这样的方式去获取到用户的音频流,并且发送给音频识别服务,然后进行 query 解析。

  2. 在拿到用户 query 之后,VSL 会对页面声明的那些属性进行解析,并且随着 query 一同去请求意图识别服务。

  3. 这些具体信息给了意图识别服务之后,意图识别服务会去匹配用户意图的指令信息,并将结果值返回。

  4. 根据指令中的节点和命令信息进行视图操作。

深入理解 VSL

看完上面的流程图之后,可能大家还是不太理解,我这边总结了四个问题,这四个问题也是整个流程比较关键的四个点:

  1. 视图节点的属性,声明有什么作用?

  2. VSL 针对视图解析了哪些信息?

  3. 意图识别服务回传的指令信息是什么,具体表达含义是什么?

  4. VSL 是如何执行这些指令信息的?

先不急于回答这些问题,下面我给大家介绍 VSL 的基本概念 Action,在此过程中顺便解答下上面的问题。

Action 的基本概念

Action 的中文表达就是行为,它在 VSL 定义很简单,也就是一种用户行为的抽象,不管是点击、滑动、选择都是一种 Action,是 VSL 进行视图解析、意图分析以及行为操作的基本单元。它由三个部分组成,分别是操作对象、属性和处理器:

  • 操作对象:即这个行为的目标,进行操作所针对节点。

  • 属性:操作对象的基本信息,比如说它的意图为确认或取消,或者是对于一些基本控件的信息等。举个例子,比如说我们的 Input 控件,它的属性类型可能会是密码、邮箱等。

  • 处理器:简单来讲,就是在匹配到这个意图之后,VSL 该如何执行这个 Action,并反映到视图的操作上面。下图就是定义了 Action 的执行方式是“点击”。

VSL 也提供了一系列的属性和 JSAPI 来描述这一系列的 Action 的行为:

VSL 中内内置了 12 种 Action,分别包含了点击、输入、滑动、选择、切换标签,并且也提供了 JS API,以便用户根据自己的场景需求来自定义不同的 Action。

Action 实例

我们再把视角回到“点击确认按纽”的例子中,在声明 voice-action 和 voice-tag 属性之后,整个视图会创建一个 Action 的实例,其中包含了三个部分:

  1. 对象,即 button 节点。

  2. Action 的类别,本例为 click,以及它的意图为“确认”,并且同时包含了 VSL 生成的唯一识别的 ID。

  3. 整个 Action 处理器,处理器的内容为触发该按纽的 click 操作。

Action 在 VSL 中的运转模式

分为以下几个步骤:

  1. 通过 DSL 解析器来把整个页面解析成了一系列的 Action 的集合,这些 ACTION 集合里面,包含了我们所需要响应交互信息的各种节点元素。

  2. 在解析完 Action 集合之后,用户发起语音,Action 中的信息会被传至意图理解服务。

  3. 意图理解服务在匹配到合适的 Action 之后,会把结果返回给视图层,视图层的 Action  Process 会去执行匹配意图的处理器。

VSL 的架构

VSL 的架构分为两块:

  1. 核心模块,就是左边的 Core,它的定义是针对 VSL 中不同场景变换的那些模块的集合,比如说我们的视图解析的 DSL 解析器模块、Action 的管理器模块,以及一些默认的 Action 模块,还有跟意图识别服务通讯的等等这些模块。

  2. 扩展模块,该模块里面主要包含了 VSL 在各个端下执行时所依赖的端能力,比如说依赖的一些跟端进行匹配的功能,在不同的端下执行端能力来实现音频的监听,这些在端上面的表达都是不一样的。不同的端下有其本身默认的一系列 Action,我们可以看到的是在这个场景下面,如果我们需要对 VSL 进行新的场景支持时,唯一需要做得就是在 Exception、端能力和默认 Action 中进行部分补充和添加即可。

VSL 的内部流程

从用户发起语音交互的 query,到整个页面执行视图操作的过程中所发生的事情:

  1. 当页面被初始化时,DSL 解析器将会对整个页面进行视图解析。

  2. 在用户发起语音 query 时,语音监听模块会拿到用户的语音,此时会和页面信息一同发送给识别服务。

  3. 识别服务在匹配到符合用户意图的 Action 之后,会回传给视图层的 Action  Manager 模块,Action  manager 模块会带着匹配到的动作 ID 去执行对应的 Action,Action 里面的处理器也会同步的操作视图。

VSL 的应用场景
  • 百度的搜索结果,比如快递查询,机票查询和房贷计算器等,将 VSL 作为它们语音交互功能的支撑。

  • 百度的语音产品,比如说百度作业模式等,也将 VSL 作为该产品语音交互的基础。

  • 搭载了 DuerOS 的智能设备,VSL 提供了语音交互视图的功能,就以小度智能音箱中的语音视图交互场景为例,它的覆盖率已经达到了 90%。

VSL 的未来

我们正在努力丰富并强化 VSL 的功能,不仅仅是增强意图识别能力,还要丰富用户指令集,拓宽更多的应用场景。另外,我们还希望 VSL 不只在百度内部推广,希望未来能将 VSL 普及并开源,在业内为语音交互视图提供通用解决方案。

语音交互视图是下一个比较热门的概念,随着智能设备的发展和语音交互能力的提升,我相信接下来会有越来越多的场景支持语音交互。希望这次的分享能够给大家带来一定的帮助和思考。

PPT官网下载地址: https://2019.qconbeijing.com/schedule?utm_source=infoq&utm_campaign=full&utm_term=0606

 活动推荐

2019 年 6 月 14 -15 日, 由极客邦科技旗下 TGO 鲲鹏会主办的 GTLC 全球技术领导力峰会将正式在上海举行,我们精心策划了技术、思维、战略、管理、视野及领导力等六大专场,并邀请行业内最具影响力的管理者许式伟、季昕华、陆栋栋等大咖加入讲师天团,他们将通过体系化、有洞见的分享帮你应对不断升级的挑战!

详情联系票务小晶:18518913363(同微信)

 
前端之巅 更多文章 巧用ES6,轻松优化Vue代码 开发者拍案叫绝!苹果发布全新Swift UI框架 iTunes将死,苹果计划发布三款独立应用取而代之 Lightning Web组件霸气开源:基于最新的Web标准!可构建任何平台的Web应用 为什么2019年了我还在用jQuery
猜您喜欢 父与子 漫谈“架构团队”之组织架构 面试题:两位盲人问题 依托开源技术,中国联通研发CU-DC\/OS推进IT综合治理的实践 浅谈动态跟踪技术之DTrace