Posts Tagged “UI”

Building A Simple AI Chatbot With Web Speech API And Node.js

Building A Simple AI Chatbot With Web Speech API And Node.js

Using voice commands has become pretty ubiquitous nowadays, as more mobile phone users use voice assistants such as Siri and Cortana, and as devices such as Amazon Echo and Google Home1 have been invading our living rooms. These systems are built with speech recognition software that allows their users to issue voice commands2. Now, our web browsers will become familiar with to Web Speech API, which allows users to integrate voice data in web apps.

With the current state of web apps, we can rely on various UI elements to interact with users. With the Web Speech API, we can develop rich web applications with natural user interactions and minimal visual interface, using voice commands. This enables countless use cases for richer web applications. Moreover, the API can make web apps accessible, helping people3 with physical or cognitive disabilities or injuries. The future web will be more conversational and accessible!

Enhancing User Experience Link

Web Speech API enables websites and web apps not only to speak to you, but to listen, too. Take a look at just some great examples of how it can be used to enhance the user experience. Read more →4

In this tutorial, we will use the API to create an artificial intelligence (AI) voice chat interface in the browser. The app will listen to the user’s voice and reply with a synthetic voice. Because the Web Speech API is still experimental, the app works only in supported browsers5. The features used for this article, both speech recognition and speech synthesis, are currently only in the Chromium-based browsers, including Chrome 25+ and Opera 27+, while Firefox, Edge and Safari support only speech synthesis at the moment.

Browser compatibility6
(View large version7)

This video shows the demo in Chrome, and this is what we are going to build in this tutorial!

[embedded content]
A simple AI chat bot demo with Web Speech API

To build the web app, we’re going to take three major steps:

  1. Use the Web Speech API’s SpeechRecognition interface to listen to the user’s voice.
  2. Send the user’s message to a commercial natural-language-processing API as a text string.
  3. Once API.AI returns the response text back, use the SpeechSynthesis interface to give it a synthetic voice.
The app flow8

The entire source code9 used for this tutorial is on GitHub.

Prerequisites Link

This tutorial relies on Node.js. You’ll need to be comfortable with JavaScript and have a basic understanding of Node.js.

Make sure Node.js10 is installed on your machine, and then we’ll get started!

Setting Up Your Node.js Application Link

First, let’s set up a web app framework with Node.js. Create your app directory, and set up your app’s structure like this:

├── index.js
├── public
│ ├── css
│ │ └── style.css
│ └── js
│ └── script.js
└── views
 └── index.html

Then, run this command to initialize your Node.js app:

$ npm init -f

The -f accepts the default setting, or else you can configure the app manually without the flag. Also, this will generate a package.json file that contains the basic info for your app.

Now, install all of the dependencies needed to build this app:

$ npm install express apiai --save

With the --save flag added, your package.json file will be automatically updated with the dependencies.

We are going to use Express11, a Node.js web application server framework, to run the server locally. To enable real-time bidirectional communication between the server and the browser, we’ll use Socket.IO12. Also, we’ll install the natural language processing service tool, API.AI13 in order to build an AI chatbot that can have an artificial conversation.

Socket.IO is a library that enables us to use WebSocket easily with Node.js. By establishing a socket connection between the client and server, our chat messages will be passed back and forth between the browser and our server, as soon as text data is returned by the Web Speech API (the voice message) or by API.AI API (the “AI” message).

Now, let’s create an index.js file and instantiate Express and listen to the server:

const express = require('express'); const app = express(); app.use(express.static(__dirname + '/views')); // html app.use(express.static(__dirname + '/public')); // js, css, images const server = app.listen(5000); app.get('/', (req, res) => { res.sendFile('index.html'); }); read more

Read more »

The Surprising Relationship Between Gamification And Modern Persuasion

The Surprising Relationship Between Gamification And Modern Persuasion

If you’re like me, then being persuaded requires a scientific approach and concrete examples. And that’s exactly what this article does. It explains how gamification can work by showing the relationship between gamification, UX design and BJ Fogg’s modern persuasion phenomenon, “mass interpersonal persuasion.” And it has a lot of practical gamification examples that you can apply to your own products for more engaging experiences.

Today, virtually all companies (except for special ones like Basecamp1) have to grow non-stop. Why? Well, that’s simply how the capitalist engine works. Investors pour money into startups, banks loan money to entrepreneurs, employees accept stock options instead of cash, all in the hope of the company growing much bigger. That’s why there is so much emphasis on growth. Otherwise, the whole system would collapse. It’s kind of crazy when you think a bit more deeply about it, but I’ll leave that part to you for now. read more

Read more »