To style the button as seen in the demo, refer to the style.css file in the source code. Then, add a button interface in the HTML’s body: Talk Let’s set up our index.html file and include our front-end JavaScript file ( script.js) and Socket.IO, which we will use later to enable the real-time communication: The UI of this app is simple: just a button to trigger voice recognition. The Web Speech API has a main controller interface, named SpeechRecognition, to receive the user’s speech from a microphone and understand what they’re saying. ![]() Receiving Speech With The SpeechRecognition Interface Now, let’s work on our app! In the next step, we will integrate the front-end code with the Web Speech API. Now, let’s create an index.js file and instantiate Express and listen to the server: const express = require('express') Īpp.use(express.static(_dirname + '/views')) // htmlĪpp.use(express.static(_dirname + '/public')) // js, css, images 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). ![]() Socket.IO is a library that enables us to use WebSocket easily with Node.js. Also, we’ll install the natural language processing service tool, API.AI in order to build an AI chatbot that can have an artificial conversation. To enable real-time bidirectional communication between the server and the browser, we’ll use Socket.IO. We are going to use Express, a Node.js web application server framework, to run the server locally. With the -save flag added, your package.json file will be automatically updated with the dependencies. Now, install all of the dependencies needed to build this app: $ npm install express socket.io apiai -save Also, this will generate a package.json file that contains the basic info for your app. The -f accepts the default setting, or else you can configure the app manually without the flag. Then, run this command to initialize your Node.js app: $ npm init -f Create your app directory, and set up your app’s structure like this. Make sure Node.js is installed on your machine, and then we’ll get started! Setting Up Your Node.js Applicationįirst, let’s set up a web app framework with Node.js. You’ll need to be comfortable with JavaScript and have a basic understanding of Node.js. The entire source code used for this tutorial is on GitHub. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |