您可能不知道的Alan

无忧前端
1,355 阅读9分钟

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

当前有很多语音助手：iOS有Siri，Windows有小娜，Android有Google Assistant，亚马逊的Alexa，国内安卓有灵犀。各大厂还推出了小度、小雅、小爱、天猫精灵等智能音箱产品，深受大家喜爱。这些语音助手或语音AI产品有一个基本上都是基于移动设备的。除了少有几个在线搜索、在线翻译App使用语音助手，很少看到使用了语音功能的Web App。主要还是因为移动场景下语音设备一般是标配，语音功能能解放双手，使用起来很方便。而电脑没有声卡没有麦克风一样跑得很溜，加上Web语音技术不是原生的，自行研发成本很高。随着Serverless（无服务器环境）和云计算云服务大行其道，我相信语音Web App会流行起来的。下面就会为大家推荐一个高级语音AI平台Alan。如果您已经迫不及待，先体验一下最终效果吧，英语单词要读准哟😎。

一、Alan概述

Alan提供了一个完整的无服务器环境来构建强大且可靠的应用内语音助手和聊天机器人。无需创建口语模型、训练语音识别软件、部署和托管语音组件——Alan AI后端完成了大部分工作。您的应用程序的语音体验可以由单个开发人员构建和开发，而不是由机器学习和 DevOps专家团队构建和开发，因此您无需额外开销即可向应用添加语音界面。

使用Alan，您可以超越触摸和键入界面的功能，并且语音可以在您的应用程序中启用任何复杂的工作流程或功能。Alan语音脚本是用JavaScript编写的，这使得它们具有高度的可定制性和灵活性。使用Alan创建的语音界面构建一次即可部署在任何地方——您无需为特定平台重建它们。

二、Alan起步

想为您的应用创建语音助手吗？请按照以下步骤开始使用Alan。

1. 注册Alan Studio

注册Alan Studio或登录（如果您已经注册）。

2. 创建语音脚本

进入Alan Studio，可以看到已有的项目统计、Create Voice Assistant按钮、可用的免费交互次数。如下图：

alan-studio-ui.png

免费用户可以默认交互50次，如果绑定github并给Alan点赞，可以送交互（最多9次）。免费次数用完后，用户需要更改成付费方式并在线充值才能继续使用Alan语音云服务。

1) 新建工程

单击Create Voice Assistant会显示如下选择对话框：

select.png

此处选择一个空白模板新建工程，也可以复制一个语音脚本示例模板来编辑工程。Alan Studio在线编辑器的界面如下：

alan-studio.png

2) 编写语音脚本

要让用户与您的语音助手交互，您需要添加用户可以提供的语音脚本命令。语音脚本描述了与用户对话的结构，或预期的对话场景。

在Alan Studio中，在脚本编辑区输入以下代码：

// Use this sample to create your own voice commands
intent('(going| ) right', p => {
    p.play('Right');
    p.play({command:'go-right'});
});

intent('(going| ) left', p => {
    p.play('Left');
    p.play({command:'go-left'});
});

intent('(going| ) up', p => {
    p.play('Up');
    p.play({command:'go-up'});
});

intent('(going| )down', p => {
    p.play('Down');
    p.play({command:'go-down'});
});

也可以通过点击Add script按钮来新增多个语音脚本。目前Alan提供的语音脚本示例有：Bitcoin（比特币语音助手）、Calculator（计算器机器人）、News（新闻头条播报）、CRM（客户关系管理语音助手）、Small Talk（简单聊天机器人）、Weather（天气播报机器人）、Jeopardy（极限游戏机器人）、Translation（翻译机器人）。

3) 测试语音脚本

在Alan Studio中，在Edit选项卡下方，键入聊天或按麦克风按钮说话，可以测试语音脚本。

免费用户有功能限制：不能使用Alan Studio的测试视图

通过Alan Studio底部的日志面板可以查看：

  • 系统日志：Alan Studio系统消息
  • 语法日志：语音脚本错误信息
  • 短语日志：对话中对话消息的信息

3. 集成到应用程序中

在Alan Studio工具栏中点击Integrations，首先要选择整合一样，开发阶段一般选择Development。最重要需要Copy SDK Key，如下图：

免费用户有功能限制：不能选择整合环境。

sdk-key.png

这个在客户端调用云服务时会用到。我们还可以在该面板中配置Alan按钮。

customize.png

免费用户有功能限制：不能添加编辑个性化配置选项。能不能支持中文语音有待验证。

根据配置Alan Studio会生成相应的嵌入代码，如下图：

sample-code.png

  • 新建一个html文件，将脚本标记添加到页面：
<script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
  • 给Alan按钮添加一个容器：
<div class="alan-btn"></div>
  • 在script标签中复制嵌入代码示例并做如下相应修改：
var btn = alanBtn({
  right: 24,
  top: 24,
  size: 48,
  key: "8fc5f867070d9b45dbfb01d46106baf62e956eca572e1d8b807a3e2338fdd0dc/stage",
  onCommand: (commandData) => {
    console.log(commandData);
    let style = document.getElementById("circle").style;
    const command = commandData.command;
    if (command === "go-right") {
      style.transform += "translateX(50px)";
    }
    ...
  },
  rootEl: document.getElementById("alan-btn")
});
btn.activate();
btn.playText("you are welcome");
btn.playCommand({ command: "go-down" });

点击此处查看完整实例代码。当用户说：going left或left，Alanw会向用户播放文本Left并将小球向左移动50px，其它方向亦然。如果免费语音次数已经使用完，会听到一个语音提示让用户充值。

在本实例中，Alan按钮实例初始化完成后，我们使用activate()方法以编程方式打开激活Alan按钮，调用playText()方法播放you are welcome，并使用playCommand()方法执行将小球向右移动50px;

三、服务器端API

1. 意图

您可以使用intent()函数在脚本中定义语音命令。该功能可用于完成用户要求的任务或回答用户的问题。

在intent()函数中，您必须指定一种或多种模式 — 调用命令的用户话语，以及调用命令时必须触发的一种或多种响应操作。命令和响应部分支持正则表达式、通配符。详细语法详见模式。

编写命令时，您可以将预定义和用户定义的插槽添加到意图模式。插槽是用户话语中的变量，允许Alan识别和检索有用的信息。

2. 响应

在Alan中，您可以通过以下功能触发语音命令的响应操作：

  • play()
  • reply()

1) Play

play()是用于响应操作的预定义函数。您可以使用它来响应用户或向客户端应用程序发送命令。

响应用户

要向用户播放响应，您需要在play()函数中定义一个模式。Alan将使用这句话作为回应。在上面示例中，当用户说：going right或right会调用该命令。 作为响应操作，Alan向用户播放文本Right。

向App发送命令

play()函数可用于向与Alan集成的客户端应用程序发送命令。此类命令可让您在应用程序端执行特定活动，例如，导航到应用程序中的另一个页面、突出显示屏幕上的UI元素等。通过这种方式，您可以同步语音和视觉效果，并为您的应用创建多模式界面。

要发送命令，请将JSON传递给play()函数。在上面示例中，当用户说：going right或right会调用该命令。 作为响应操作，Alan向客户端App发送go-right命令。当然，更灵活的方式发送命令的同时

要在应用程序端处理命令，您必须为从 Alan 的语音脚本接收到的命令定义处理程序。有关详细信息，请参阅 onCommand处理程序。

2) 答复

reply()是一个预定义的函数，如果你只需要给用户一个响应，不需要做任何复杂的动作，就可以使用它。

intent('Say $(W hello|goodbye)',
  reply('$(W)'));

其实就是play(语音文本)，在reply()函数中，您可以像在play()函数中一样使用模式和插槽。

3. 意图匹配

您的项目可以有许多语音命令。当用户发出命令时，Alan会将命令与脚本中最合适的意图进行匹配。为此，Alan 分别评估每个意图，并为意图分配不同的权重或匹配分数。

匹配分值范围从1（最准确的匹配）到0（不匹配）。得分最高的命令被选为最佳匹配。

在下面的示例中，如果用户询问：天气如何？第一个意图将被选为最佳匹配。 第二个意图将不会被匹配，因为它包含的单词比用户的话语多。 反之亦然，如果用户问：今天的天气如何？第二个意图将获得更高的分数，因为它是最准确的匹配。

intent('What is the weather?', p => {
  p.play('The weather is a word');
});

intent('What is the weather today?', p => {
  p.play('The weather today is great!')
});

详细语法服务端API。

四、Alan客户端SDK

1. 支持平台

使用Alan客户端SDK，您可以将Alan与下列构建的应用集成在一起：

2. 主要参数

下面将以JavaScript为例进行介绍。Alan按钮最主要的参数有：

  • key：Alan Studio项目的密钥。
  • rootEl：添加Alan按钮的元素。如果没有提供rootEl，则将Alan按钮添加到body中。
  • onCommand：用于处理来自Alan语音脚本的命令的回调。在此回调中，您可以设置- - 有关应用程序对语音脚本接收到的命令做出反应的逻辑。
  • onButtonState：接收 Alan 按钮连接状态的回调。

目前Alan Web SDK只支持现代浏览器，不支持IE浏览器。

五、展望

语音AI会成为未来最主流的交互方式。根据贝恩公司此前的一份调研数据显示，未来人机交互方式中，语音交互将会占到30%左右。语音助手移动App以其先天优势仍然占据主导地位，而语音助手将作为Web App增强功能不断创新，让我们的生活更美好。

参考：

avatar
文章
阅读
粉丝