“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

There are a lot of voice assistants out there: Siri for iOS, Cortana for Windows, Google Assistant for Android, Amazon’s Alexa, and Android’s Android. Major factories also launched small degree, small elegant, small love, Tmall spirit and other smart speaker products, loved by everyone. One of these voice assistants or voice AI products is basically based on mobile devices. In addition to a few online search and translation apps using voice assistant, few Web apps using voice function are seen. Mainly because voice devices in mobile scenarios are generally standard, voice functions can free hands, it is very convenient to use. Computers run smoothly without sound cards and microphones, and Web voice technology is not native, so it costs a lot to develop. With the popularity of Serverless and cloud computing cloud services, I believe voice Web Apps will become popular. Alan, an advanced voice AI platform, is recommended below. If you can’t wait, first experience the final effect, English words to read correctly yo 😎.

Overview of Alan

Alan provides a complete serverless environment to build powerful and reliable in-app voice assistants and chatbots. There’s no need to create speech models, train speech recognition software, deploy and host speech components — the Alan AI back end does most of the work. The voice experience of your application can be built and developed by a single developer, rather than a team of machine learning and DevOps experts, so you can add a voice interface to your application at no extra cost.

With Alan, you can go beyond touching and typing interfaces, and voice can enable any complex workflow or function in your application. Alan speech scripts are written in JavaScript, which makes them highly customizable and flexible. The voice interfaces created by Alan are built once and can be deployed anywhere — you don’t need to rebuild them for a particular platform.

2. Alan starts

Want to create a voice assistant for your application? Follow these steps to get started using Alan.

1. Register with Alan Studio

Sign up for Alan Studio or log in (if you are already registered).

2. Create a voice script

Enter Alan Studio and you can see the existing project statistics, the Create Voice Assistant button, and the number of free interactions available. The diagram below:

Free users can interact 50 times by default, or up to nine times if they bind to Github and like Alan. After using up the free number of times, users will need to switch to a paid plan and recharge online to continue using The Alan voice cloud service.

1) New construction projects

Clicking on Create Voice Assistant displays the following selection dialog:

Select a blank template here to create a project, or copy a sample voice script template to edit the project. The Alan Studio online editor looks like this:

2) Write voice scripts

To allow users to interact with your voice assistant, you need to add voice script commands that users can provide. A voice script describes the structure of a conversation with the user, or the expected conversation scenario.

In Alan Studio, enter the following code in the script editing area:

// 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'});
});
Copy the code

You can also Add multiple voice scripts by clicking the Add Script button. Examples of voice scripts provided by Alan so far are: Bitcoin, Calculator, News, CRM, Small Talk, Weather, Jeopardy, Translation.

3) Test the voice script

In Alan Studio, under the Edit TAB, type chat or press the microphone button to speak to test the voice script.

Free users have limitations: They cannot use Alan Studio’s test view

It can be viewed via the Log panel at the bottom of Alan Studio:

  • System log: Alan Studio system messages
  • Syntax log: Error information about voice scripts
  • Phrase log: Information about a conversation message in a conversation

3. Integrate into the application

From the Alan Studio toolbar, click on Integrations, first select The same as Integration, and generally select Development for Development phase. The most important thing is to Copy the SDK Key, as shown below:

Free users have feature limitations: they can’t choose a consolidated environment.

This is used when the client invokes the cloud service. We can also configure the Alan button in this panel.

Free users have limitations: you can’t add edit personalization options. Chinese voice support is yet to be verified.

Alan Studio will generate the corresponding embedded code according to the configuration, as shown below:

  • Create a new HTML file and add the script tag to the page:
<script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
Copy the code
  • Add a container to the Alan button:
<div class="alan-btn"></div>
Copy the code
  • inscriptCopy the embed code example in the tag and modify it as follows:
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" });
Copy the code

Click here to see the full example code. When the user says “going left” or “left”, Alanw plays the text left to the user and moves the ball 50px to the left, as well as any other direction. If the number of free voice calls has been used up, a voice prompt will be heard for the user to recharge.

In this example, after the Alan button instance is initialized, we activate the Alan button programmatically using the Activate () method, call the playText() method to play you are Welcome, and use the playCommand() method to move the ball 50px to the right;

Server API

1. The intention

You can define voice commands in a script using the Intent () function. This feature can be used to complete user requested tasks or answer user questions.

In the Intent () function, you must specify one or more patterns — the user utterances that invoke the command, and one or more response actions that must be triggered when the command is invoked. The command and response sections support regular expressions and wildcards. See schema for details.

When writing commands, you can add predefined and user-defined slots to the intent pattern. Slots are variables in the user’s discourse that allow Alan to identify and retrieve useful information.

2. The response

In Alan, you can trigger a response to a voice command by:

  • play()
  • reply()

1) Play

Play () is a predefined function for responding to actions. You can use it to respond to users or send commands to client applications.

In response to the user

To play the response back to the user, you need to define a pattern in the play() function. Alan will use this sentence in response. In the example above, this command is invoked when the user says: going right or right. In response, Alan plays the text Right to the user.

Send commands to the App

The play() function can be used to send commands to client applications integrated with Alan. Such commands allow you to perform specific activities on the application side, such as navigating to another page in the application, highlighting UI elements on the screen, and so on. This way, you can synchronize voice and visual effects and create a multimodal interface for your application.

To send the command, pass JSON to the play() function. In the example above, this command is invoked when the user says: going right or right. In response, Alan sends the go-right command to the client App. Of course, there are more flexible ways to send commands at the same time

To process commands on the application side, you must define handlers for the commands you receive from Alan’s voice script. See the onCommand handler for more information.

2) a reply

Reply () is a predefined function that you can use if you just need to give the user a response without doing anything complicated.

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

It’s really play(voice text), and in the Reply () function, you can use patterns and slots just as you would in the Play () function.

3. Intention matching

Your project can have many voice commands. When the user issues a command, Alan matches the command with the most appropriate intent in the script. To do this, Alan evaluates each intent individually and assigns different weights or matching scores to the intent.

The match score ranges from 1 (most accurate match) to 0 (no match). The command with the highest score is selected as the best match.

In the following example, if the user asks: What’s the weather like? The first intention will be selected as the best match. The second intent will not be matched because it contains more words than the user’s utterance. And vice versa, if the user asks: What’s the weather like today? The second intention will get a higher score because it is the most accurate match.

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! ')});Copy the code

Verbose syntax server API.

Iv. Alan client SDK

1. Supported platforms

Using the Alan client SDK, you can integrate Alan with the following built applications:

  • JavaScript
  • React
  • Angular
  • Vue
  • Ember
  • Electron
  • Ionic
  • iOS
  • Android
  • Apache Cordova
  • Flutter
  • React Native
  • Microsoft PowerApps

2. Main parameters

This section uses JavaScript as an example. The main parameters of Alan button are:

  • Key: The Alan Studio project key.
  • RootEl: Add elements for Alan button. If rootEl is not provided, the Alan button is added to the body.
  • OnCommand: Used to handle callbacks to commands from Alan’s voice script. In this callback, you can set the logic for the application to react to commands received by the voice script.
  • OnButtonState: Receives a callback to the Alan button connection state.

Currently, the Alan Web SDK only supports modern browsers, not Internet Explorer.

Five, the outlook

Voice AI is going to be the dominant way of interacting in the future. According to a recent survey by Bain & Company, voice will account for about 30% of future human-computer interaction. Voice assistant mobile App still occupies a dominant position with its innate advantages, while voice assistant will continue to innovate as an enhanced function of Web App to make our life better.

Reference:

  • studio.alan.app
  • Alan. App/docs/usage /…
  • Alan. App/docs/client…
  • Alan. App/docs/usage /…