Jul 19, 2022
A Voice Bot with Alan and Monaca
A voice chatbot is a conversational AI communication tool that can capture, interpret, and analyze vocal input given by the speaker to respond in a similar natural language. Users can interact with a voice AI chatbot with voice commands and receive relevant responses. In this article, we will learn how to create a simple voice chatbot mobile application with the help of Alan.
What we are building?
We are going to build a hybrid mobile application in which users could start a simple daily conversation with the bot. The application will recognize the user’s voice and convert it into “intent” and the AI will pick the response and reply in “voice”. To build this application from scratch, we will need a lot of machine learning components to understand user voices for different spoken languages and accents, natural language processing, and speech-to-text/text-to-speech. It would at least take months, if not years, to collect data and train the models. Fortunately, we have a service, Alan, that does these things for us. It provides the production-ready AI solution for us which we can just plug and play in our application.
What is Alan?
Alan is an advanced Voice AI Platform that allows you to add a voice interface to your app without overhead.
Alan is an end-to-end conversational AI platform to build robust and reliable in-app voice assistants and chatbots. There is no need to create spoken language models, train the speech recognition software, deploy and host voice components — the Alan AI backend does the bulk of work. With Alan, a voice experience for your app can be built and developed by a single developer, rather than a team of Machine Learning and Dev Ops experts.
Creating Voice Bot
First and foremost, we have to create an Alan project, a voice assistant to handle the user’s vocal input. Please sign up for a free account with Alan before continuing.
You can create the project with Alan Studio.
Alan Studio lets you go beyond the capabilities of touch and type interfaces and voice enable any complex workflow or function in your app. Voice scripts are written in JavaScript, which makes them highly customizable and flexible.
In this article, we will be creating a simple chit-chat application. Thus, we choose the “Hello World” project.
What we have in the above picture is the script that Alan used to handle user’s vocal conversation. Let’s look at the snippet of the script.
intent(
'Who\'s there',
'What\'s your name',
p => {
p.play(
'My name is Alan.',
'It\'s Alan.',
);
},
);When the user speaks Who's there or What's your name or something similar such as Your name , name , How can i call you , etc. The Alan AI converts those vocal to texts and tries to match defined intent and response back, in this case, it will say My name is Alan. or It's Alan. back to the user.
Let’s look at another snippet.
const intentPatterns = [
'What is your favorite food',
'What food do you like',
];intent(intentPatterns, p => {
p.play('CPU time, yammy!');
});
Similarly, this section is prepared to answer when the user asks what Alan likes to eat.
As you can see here, the script is straightforward. Please explore it and adjust it to your preference. You could also add new scripts or import from the provided templates to make your application smarter.
Integrations
After you are satisfied with the scripts and settings, it’s time to integrate into your mobile application. To do that, click on theIntegrations button at the top and copy SDK to insert into the application code later.
Coding Time
The application we are creating is based on Framework7-Vue template. To start off, we need to install the Alan SDK plugin to the project. Therefore, please add “@alan-ai/cordova-plugin-alan-voice” to the package.json file as follows.
{
"name": "voice-chat",
... "dependencies": {
...
"@alan-ai/cordova-plugin-alan-voice": "^2.7.0",
},
"cordova": {
"plugins": {
...
"@alan-ai/cordova-plugin-alan-voice": {}
}
}
}
Next, delete all the code from “src/pages/home.vue” and replace it with the following code to create the message template/component provided by Framework 7. The code is simple. It displays the interactive messages between the user and Alan bot. Once we add a new message to the “messagesData” variable, the message will be displayed on the screen. It will display as it from the user if the “message.type” is “sent” or null and display as it from the Alan bot if the “message.type” is “received”.
<template>
<f7-page>
<f7-navbar title="Your Companion Voice Chat" /><f7-messages>
<f7-messages-title>Press the Alan icon and start talking</f7-messages-title>
<f7-message
v-for="(message, index) in messagesData"
:key="index"
:type="message.type"
:name="message.name"
:avatar="message.avatar"
:first="isFirstMessage(message, index)"
:last="isLastMessage(message, index)"
:tail="isTailMessage(message, index)"
>
<template #text>
<!-- eslint-disable-next-line -->
<span v-if="message.text" v-html="message.text"></span>
</template>
</f7-message>
</f7-messages>
</f7-page>
</template>
Next, let’s add the script tag to the file.
<script>
import { f7ready } from 'framework7-vue';export default {
data() {
return {
messagesData: [],
people: {
name: 'Alan',
avatar: 'https://avatars.githubusercontent.com/u/54960780?s=200&v=4',
},
};
},
mounted() {
f7ready(() => {
const self = this;
document.addEventListener('deviceready', self.deviceReady, false);
});
},
methods: {
deviceReady() {
const self = this;
// Please input your ALAN API KEY for better customization
const API_KEY = '1ee6a74d9cccea77faceb579449bc5142e956eca572e1d8b807a3e2338fdd0dc/stage'; // This is the free API Key provided by ALAN
cordova.exec(
self.alanData,
self.alanDataError,
'alanVoice',
'addButton',
[API_KEY]
);
},
alanData(response) {
const self = this;
if (
response.type === 'onEvent' &&
response.data &&
response.data.text
) {
if ( response.data.final && response.data.name === 'recognized') {
self.sendMessage(response.data.text);
} else if (response.data.ctx && response.data.ctx.success) {
self.receiveMessage(response.data.text);
}
}
},
alanDataError(error) {
alert('There are some error. Please try again');
console.log(error);
},
sendMessage(text) {
const self = this;
const messagesToSend = [];
messagesToSend.push({
text,
});
self.messagesData.push(...messagesToSend);
},
receiveMessage(answer) {
const self = this;
const person = self.people;
self.messagesData.push({
text: answer,
type: 'received',
name: person.name,
avatar: person.avatar,
});
}
},
};
</script>
Explanation
In the “data()” section, we created “messagesData” to store messages and “people” to store the icon for Alan bot when replying the message.
data() {
return {
messagesData: [],
people: {
name: 'Alan',
avatar: 'https://avatars.githubusercontent.com/u/54960780?s=200&v=4',
},
};
},In the “mounted()” section, we invoke “deviceReady” function when the application/device is ready — running on a mobile phone and everything is loaded properly.
deviceReady() {
const self = this;
// Please input your ALAN API KEY for better customization
const API_KEY = '<INSERT_YOUR_ALAN_API_KEY_HERE>';
cordova.exec(
self.alanData,
self.alanDataError,
'alanVoice',
'addButton',
[API_KEY]
);
},This is where we insert Alan button to the application. It is plain simple. If the button is added successfully, it will invoke “alanData” otherwise it will call “alanDataError”.
alanData(response) {
const self = this;
if (
response.type === 'onEvent' &&
response.data &&
response.data.text
) {
if (response.data.final && response.data.name === 'recognized') {
self.sendMessage(response.data.text);
} else if (response.data.ctx && response.data.ctx.success) {
self.receiveMessage(response.data.text);
}
}
},In this snippet, we filter the “response” whether the result is when Alan detected the user’s vocal or detected the answer received from the server. In this Alan SDK version, as of this writing, it is the message from the user when the “response.data.final” is true and it is the answer from the AI when the “response.data.ctx.success” is true. Thus we invoke functions “sendMessage” and “recieveMessage” respectively.
To debug it, you can write “console.log(response)” in the function to see the value when we are communicating with Alan server.
sendMessage(text) {
const self = this;
const messagesToSend = [];
messagesToSend.push({
text,
});
self.messagesData.push(...messagesToSend);
},The difference is the “receiveMessage” set the “type” to “recieved” as well as sets “name” and “avatar” to show Alan bot icon.
receiveMessage(answer) {
const self = this;
const person = self.people;
self.messagesData.push({
text: answer,
type: 'received',
name: person.name,
avatar: person.avatar,
});
}All the source code can be found here.
To run the application, you have to build application with Cordova/Monaca. Please refer to this document to build the application.
The application is not working properly on Android devices.
Conclusion
In this article, we have learned how to use Alan to develop a simple voice chat mobile application. This is just a simple introduction and a small part of what the service can offer. You can read more about the tools here.
Happy Coding.
