一个前端开发工程师的天猫精灵自定义技能开发评测报告

本文涉及的产品
简介: 本文介绍了一个前端开发工程师第一手的使用天猫精灵进行自定义技能开发的体验和心得。

笔者作为一位前端开发工程师,最近很荣幸的收到了天猫精灵的评测邀请。虽然针对天猫精灵进行技能创建和开发,需要的开发知识和我日常工作中使用到的 Angular 和 TypeScript 开发大相径庭,但感谢天猫精灵技能应用平台详尽友好的入门文档,我还是欣然接受了这个邀请。

虽然从普通用户眼中,使用语音向天猫精灵发起指令,然后收到后者的语音回复,这个流程似乎很简单,但背后实际上有着人工智能中 ASR(语音识别)、NLP(自然语言处理)、TTS(语音合成)等自然语言处理技术的参与和整合。

我们先来看一个典型的用户通过语音同天猫精灵交互的流程图。

  1. 用户用语音唤醒天猫精灵,后者接收到用户语音,上传到智能应用平台。
  2. 平台使用 ASR(音频转文字)和 NLP(自然语言处理)技术,智能解析出用户发出语音包含的意图(通俗的说,即用户当前期望天猫精灵完成什么样的操作)。平台会自动将当前用户指令,匹配到开发人员创建的对应的技能和意图去。具体的匹配过程,就是将平台所有解析到的参数信息,通过 HTTPS 请求访问开发者提供的服务接口。
  3. 开发者负责实现的服务(托管在自己的应用服务器或者阿里云 Serverless 环境),接收到平台发送的请求参数,执行业务逻辑(比如天气预报查询,智力题,语音游戏等),并组装回复结果。
  4. 智能应用平台收到开发者服务执行完业务逻辑返回的响应数据后,使用 TTS(文字转音频)合成音频,并将音频推送回天猫精灵。
  5. 天猫精灵将收到的音频通过麦克风播报出来,本轮同用户的交互就完成了。

clipboard1.png

分析这个交互场景,不难发现,需要开发人员动手操作的流程包含以下两个方面:

  1. AliGenie 技能应用平台上创建新的技能和意图,用于接收用户通过语音发送过来的请求。
  2. 应用开发人员自己选择在应用服务器还是 Serveless 运行环境里实现新的技能需要完成的业务逻辑编写。

新技能的创建和意图的定义

登录 AliGenie 技能应用平台,点击 创建新技能,通过向导创建一个新技能。

clipboard2.png

下面是天猫精灵技能创建页面。这个页面的 url:

https://iap.aligenie.com/console/newskill/89247/basic?id=2022042968002&childType=skill

其中 skill id 为 89247,id 为 2022042968002 ,取的是技能创建时间。

clipboard3.png

从开发流程状态迁移图能看出,一个新的语音技能,从创建后,依次要经过下列的步骤,最后才能正式发布给用户使用:

  • 定义语音交互模型
  • 构建后端服务逻辑
  • 添加屏显页面(可选步骤,可跳过)
  • 测试:可以用真机测试或者网页上测试

在技能属性维护的明细页面,我们可以观察到下列信息:

clipboard4.png

技能最重要的属性是维护技能调用词,当用户向天猫精灵发出的语音指令,包含技能调用词时,天猫精灵才会进行相应的技能处理状态。

在我的评测里,我选用的技能调用词为 汪子熙是谁,因为该调用词不能和平台已有的调用词相冲突。

一个语音技能可以包含多个意图。意图代表用户同天猫精灵进行交互对话的目的。比如我的自定义技能,包含了三个意图:体重,天气查询和欢迎意图。意图标识即意图 ID,需要在技能开发人员编写的代码实现里使用到。

clipboard5.png

我们在上图选择一个意图打开,比如 天气查询 意图,打开其编辑页面,能看到一个 单轮对话表达 的维护界面。因为之前已经说过,一个语音技能可以对应多个意图,所以如果用户向天猫精灵发起的语音指令,同单轮对话表达里维护的语句相同或相似时,就被判定为命中了对应的意图。

比如用户向天猫精灵发起的对话,同下列类型的语句相似时:

  • 杭州今天天气怎么样
  • 今天天气怎么样
  • 杭州天气怎么样

clipboard6.png

智能应用平台就会将这些请求参数,比如 今天杭州,以及判定出的意图 id,weather,传入应用程序业务接口。在我们自己编写的程序里,拿到 weather id,就知道当前用户期望 查询 杭州 这个城市 今天 的天气情况,此时就可以调用天气查询的 Restful API 完成业务逻辑了。

单轮对话表达式的参数定义

我们观察到了在意图的单轮对话表达式维护界面里,杭州今天 这两个词都通过特殊的颜色进行高亮。这代表它们是对话表达式里的参数。显然,天气预报业务要针对具体的城市和日期才有意义,因此这些参数也需要被发送到应用开发人员编写的服务接口中去。

clipboard7.png

下图是 weather,天气预报意图的参数列表页面,其中 城市 的 id 为 city,我们可以在应用接口的代表中使用该 id,获取用户语音请求中包含的 城市 名称。

clipboard8.png

上图 参数名称 右边的一列,叫做 关联实体。实体(Entity)是自然语言处理领域里中表示一类短语的集合,包含了应用所在领域的关键词和术语。

比如天气预报领域,关键词为时间,地点,天气状况。在智能应用平台的处理流程里,实体负责告诉平台,当从用户语音请求中解析出参数时,这些参数的可能取值范围。语音技能支持自定义实体或者引用平台提供的公共实体。

上图定义的参数,都有一个一一对应的实体,界面如下:

clipboard9.png

如果用户发起的请求里,并没有显式说明想知道哪一个城市的天气状况,此时我们可以使用 精灵追问 功能,向用户发起一个新的提问,比如:你问的是哪一个城市?从而获取 city 参数的值。

clipboard10.png

意图编辑页面里的多轮对话编辑也是一个很有用的功能:

clipboard11.png

上图的例子是,如果用户当前的请求已经位于 weather 意图的处理上下文,在这个情况下用户再次追问:那北京呢?此时智能平台会判断出,这一轮的对话仍旧属于天气预报的意图,因此会将 city = 北京 这个参数串,发送给用户定义的业务实现接口。

技能后端编码

技能的后端编码是天猫精灵自定义技能开发的重头戏。点击 代码编辑 面板,可以为该技能针对的业务接口实现,选择对应的服务部署方式。

在线开发模式同阿里云云原生开发即 FAAS,这两种方式均无需搭建自己的应用服务器,区别在于前者作为一款免费的云服务资源和在线开发环境,资源额度有限,更适合快速体验天猫精灵技能应用的开发流程,而不适合用于技能的生产模式下部署。

clipboard12.png

因而我选择了阿里云的 Serverless 产品 FAAS,可以直接在浏览器里进行技能后端服务的开发,调试,部署和运行。

clipboard13.png

依次开通 API 网关,日志服务,函数计算,对象存储四个资源后,基于 Java Spring Boot 应用模板,快速创建一个服务实现:

clipboard14.png

clipboard15.png

访问 FAAS 环境的控制台 url

这个后台服务接口的 Java 实现代码,托管在 codeup 代码仓库上:

clipboard16.png
clipboard17.png

在开发部署页面,我们可以查看部署日志,对 FAAS 实例的硬件参数进行调整等操作:

clipboard18.png
clipboard19.png
clipboard20.png

API 网关和 FC 计算服务的关系如下图所示:

clipboard21.png

点击 前往开发,就可以在浏览器里使用 CloudIDE 进行 Java 开发了:

clipboard22.png

对于天天用 Visual Studio Code 进行 Angular 开发的笔者,对于这个浏览器里使用的 Cloud IDE 的外观再熟悉不过了:https://workbench.aliyun.com/intersys/2022042901718897/develop?orgId=626bfb21cfea268afc21ab8d

clipboard23.png

在 Cloud IDE 里能完成绝大多数常规的开发操作,比如代码编辑,git 代码仓库提交,Maven 构建,一键部署等等:

clipboard24.png
clipboard25.png

该 Cloud IDE 提供的更多功能,可以通过 视图-> 命令面板 里查看:

clipboard26.png
clipboard27.png

接下来,就可以在 Cloud IDE 基于模板生成的项目里,通过实现 GenieEntry 的 execute 方法,来编写自定义技能的业务逻辑了:

clipboard28.png

相关实践学习
基于函数计算一键部署掌上游戏机
本场景介绍如何使用阿里云计算服务命令快速搭建一个掌上游戏机。
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
19天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
59 3
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
1月前
|
前端开发 小程序
919. 【前端】Taro.useShareAppMessage 自定义分享封面
919. 【前端】Taro.useShareAppMessage 自定义分享封面
75 2
|
1月前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
62 5
|
2月前
|
缓存 前端开发 JavaScript
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
60 0
|
2月前
|
前端开发 JavaScript Java
从前端到后端:探索Web开发的技术演进
本文将介绍Web开发领域中前端和后端技术的演进过程。我们将从最初的静态网页开始,逐步探索动态网页、前后端分离、服务器端渲染等技术,以及流行的编程语言如Java、Python和C的应用。通过了解这些技术的发展,读者可以更好地理解Web开发的现状以及未来的趋势。
|
2月前
|
前端开发 NoSQL 关系型数据库
从前端到后端:探索全栈开发的无限可能
本文将介绍全栈开发的概念以及其在现代技术领域中的重要性。我们将深入探讨前端和后端开发的关联,并探索多种编程语言(如Java、Python、C、PHP、Go)以及数据库技术在全栈开发中的应用。通过本文,读者将了解到如何成为一名全栈开发人员,以及如何利用全栈开发的技能构建出强大且可扩展的应用程序。
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
73 0
|
11天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。