Thursday, December 26, 2024
\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
  $ npm init\n<\/pre>\n\n\n\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

  $ npm init\n<\/pre>\n\n\n\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
.\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

  $ npm init\n<\/pre>\n\n\n\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

.\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

  $ npm init\n<\/pre>\n\n\n\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n

Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

.\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

  $ npm init\n<\/pre>\n\n\n\n

This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

   $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

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 \u201cAI\u201d message).<\/p>\n\n\n\n

Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

 'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

Creating The User Interface:<\/strong><\/h3>\n\n\n\n

The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

 recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

const socket = io();<\/em><\/p>\n\n\n\n

Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

socket.emit('chat message', text);<\/p>\n\n\n\n

Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

Use this for reference:<\/p>\n\n\n\n

 var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

 io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

It's done.Run the following command in your terminal.<\/p>\n\n\n\n

$ node index.js<\/em><\/p>\n\n\n\n

And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

You can refer to my repository for further help.<\/p>\n\n\n\n

\nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
\n
  • Express:\u00a0npm install express --save<\/em><\/li>\n<\/ul>\n\n\n\n

    Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

    Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

    .\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

    Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

      $ npm init\n<\/pre>\n\n\n\n

    This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

    Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

       $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

    We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

    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 \u201cAI\u201d message).<\/p>\n\n\n\n

    Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

     'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

    Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

    Creating The User Interface:<\/strong><\/h3>\n\n\n\n

    The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

     <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

    To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

    Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

    In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

    We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

    Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

    Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

     recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

    Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

    document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

    Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

    recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

    Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

    Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

    You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

    Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

    const socket = io();<\/em><\/p>\n\n\n\n

    Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

    socket.emit('chat message', text);<\/p>\n\n\n\n

    Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

    To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

    Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

    Use this for reference:<\/p>\n\n\n\n

     var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

    or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

    Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

     io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

    Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

    Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

    Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

    The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

    function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

    In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

    Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

    Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

    Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

    'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

    It's done.Run the following command in your terminal.<\/p>\n\n\n\n

    $ node index.js<\/em><\/p>\n\n\n\n

    And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

    You can refer to my repository for further help.<\/p>\n\n\n\n

    \nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
    \n
  • dotenv:\u00a0npm i dotenv-extended<\/em><\/li>\n\n\n\n
  • Express:\u00a0npm install express --save<\/em><\/li>\n<\/ul>\n\n\n\n

    Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

    Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

    .\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

    Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

      $ npm init\n<\/pre>\n\n\n\n

    This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

    Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

       $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

    We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

    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 \u201cAI\u201d message).<\/p>\n\n\n\n

    Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

     'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

    Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

    Creating The User Interface:<\/strong><\/h3>\n\n\n\n

    The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

     <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

    To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

    Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

    In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

    We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

    Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

    Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

     recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

    Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

    document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

    Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

    recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

    Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

    Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

    You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

    Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

    const socket = io();<\/em><\/p>\n\n\n\n

    Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

    socket.emit('chat message', text);<\/p>\n\n\n\n

    Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

    To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

    Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

    Use this for reference:<\/p>\n\n\n\n

     var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

    or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

    Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

     io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

    Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

    Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

    Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

    The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

    function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

    In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

    Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

    Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

    Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

    'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

    It's done.Run the following command in your terminal.<\/p>\n\n\n\n

    $ node index.js<\/em><\/p>\n\n\n\n

    And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

    You can refer to my repository for further help.<\/p>\n\n\n\n

    \nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
    \n
  • APIAI :\u00a0npm i apiai<\/em><\/li>\n\n\n\n
  • dotenv:\u00a0npm i dotenv-extended<\/em><\/li>\n\n\n\n
  • Express:\u00a0npm install express --save<\/em><\/li>\n<\/ul>\n\n\n\n

    Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

    Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

    .\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

    Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

      $ npm init\n<\/pre>\n\n\n\n

    This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

    Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

       $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

    We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

    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 \u201cAI\u201d message).<\/p>\n\n\n\n

    Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

     'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

    Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

    Creating The User Interface:<\/strong><\/h3>\n\n\n\n

    The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

     <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

    To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

    Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

    In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

    We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

    Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

    Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

     recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

    Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

    document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

    Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

    recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

    Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

    Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

    You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

    Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

    const socket = io();<\/em><\/p>\n\n\n\n

    Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

    socket.emit('chat message', text);<\/p>\n\n\n\n

    Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

    To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

    Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

    Use this for reference:<\/p>\n\n\n\n

     var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

    or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

    Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

     io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

    Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

    Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

    Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

    The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

    function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

    In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

    Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

    Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

    Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

    'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

    It's done.Run the following command in your terminal.<\/p>\n\n\n\n

    $ node index.js<\/em><\/p>\n\n\n\n

    And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

    You can refer to my repository for further help.<\/p>\n\n\n\n

    \nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
    \n
  • Installation of Node.js<\/li>\n\n\n\n
  • APIAI :\u00a0npm i apiai<\/em><\/li>\n\n\n\n
  • dotenv:\u00a0npm i dotenv-extended<\/em><\/li>\n\n\n\n
  • Express:\u00a0npm install express --save<\/em><\/li>\n<\/ul>\n\n\n\n

    Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

    Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

    .\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

    Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

      $ npm init\n<\/pre>\n\n\n\n

    This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

    Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

       $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

    We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

    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 \u201cAI\u201d message).<\/p>\n\n\n\n

    Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

     'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

    Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

    Creating The User Interface:<\/strong><\/h3>\n\n\n\n

    The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

     <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

    To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

    Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

    In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

    We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

    Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

    Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

     recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

    Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

    document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

    Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

    recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

    Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

    Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

    You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

    Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

    const socket = io();<\/em><\/p>\n\n\n\n

    Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

    socket.emit('chat message', text);<\/p>\n\n\n\n

    Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

    To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

    Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

    Use this for reference:<\/p>\n\n\n\n

     var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

    or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

    Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

     io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

    Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

    Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

    Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

    The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

    function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

    In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

    Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

    Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

    Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

    'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

    It's done.Run the following command in your terminal.<\/p>\n\n\n\n

    $ node index.js<\/em><\/p>\n\n\n\n

    And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

    You can refer to my repository for further help.<\/p>\n\n\n\n

    \nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
    \n
  • Supported browser<\/li>\n\n\n\n
  • Installation of Node.js<\/li>\n\n\n\n
  • APIAI :\u00a0npm i apiai<\/em><\/li>\n\n\n\n
  • dotenv:\u00a0npm i dotenv-extended<\/em><\/li>\n\n\n\n
  • Express:\u00a0npm install express --save<\/em><\/li>\n<\/ul>\n\n\n\n

    Setting Up Your Application:<\/strong><\/h3>\n\n\n\n

    Set up a web app framework with Node.js. Create your app directory, and set up your app\u2019s structure like this:<\/p>\n\n\n\n

    .\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 files\n    \u2502   \u251c\u2500\u2500 css\n    \u2502   \u2502   \u2514\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 js\n    \u2502       \u2514\u2500\u2500 script.js\n    \u2514\u2500\u2500 views\n        \u2514\u2500\u2500 index.html\n<\/pre>\n\n\n\n

    Then, run this command to initialize your Node.js app:<\/p>\n\n\n\n

      $ npm init\n<\/pre>\n\n\n\n

    This will generate a package.json file that contains the basic info for your app.<\/p>\n\n\n\n

    Now, install all of the dependencies needed to build this app:<\/p>\n\n\n\n

       $ npm i apiai\n   $ npm install socket.io\n   $ npm i dotenv-extended$ npm install express --save   \n<\/pre>\n\n\n\n

    We are going to use Express, 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\u2019ll use Socket.IO. Also, we\u2019ll install the natural language processing service tool, APIAI in order to build an AI chatbot that can have an artificial conversation.<\/p>\n\n\n\n

    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 \u201cAI\u201d message).<\/p>\n\n\n\n

    Now, let\u2019s create an index.js file and instantiate Express and listen to the server:<\/p>\n\n\n\n

     'use strict';\n\n    var apiai = require('apiai');\n    var APIAI_TOKEN =apiai(\" \"); \/\/use a api token from the official siteconst APIAI_SESSION_ID = \" \"; \/\/use a session id\n    \n    const express = require('express');\n    const app = express();\n    \n    app.use(express.static(__dirname + '\/views')); \n    app.use(express.static(__dirname + '\/files')); \n    \n    const server = app.listen(process.env.PORT || 3000, () => {\n      console.log('Server listening on port %d ', server.address().port);\n    });\n    \n    const io = require('socket.io')(server);\n    io.on('connection', function(socket){\n      console.log('a user connected');\n    });\n    \n    \n    \n    \/\/ Web UI\n    app.get('\/', (req, res) => {\n      res.sendFile('index.html');\n    });\n    \n    io.on('connection', function(socket) {\n      socket.on('chat message', (text) => {\n        console.log('Message: ' + text);\n    \n        \/\/ Get a reply from API.ai\n    \n        let apiaiReq = APIAI_TOKEN.textRequest(text, {\n          sessionId: APIAI_SESSION_ID\n        });\n    \n        apiaiReq.on('response', (response) => {\n          let aiText = response.result.fulfillment.speech;\n          console.log('Bot reply: ' + aiText);\n          socket.emit('bot reply', aiText);\n        });\n    \n        apiaiReq.on('error', (error) => {\n          console.log(error);\n        });\n    \n        apiaiReq.end();\n    \n      });\n    });   \n<\/pre>\n\n\n\n

    Now,we will integrate the front-end code with the Web Speech API.<\/p>\n\n\n\n

    Creating The User Interface:<\/strong><\/h3>\n\n\n\n

    The UI of this app is simple: just a button to trigger voice recognition. Let\u2019s 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:<\/p>\n\n\n\n

     <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width\"><title>Recognito<\/title>\n      \n          <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\"><\/head><body><section><h1>Recognito<\/h1><button id=\"btn\"><i class=\"fa fa-microphone\"><\/i><\/button>\n      \n            <div><p>You said: <em class=\"output-you\">...<\/em><\/p><p>Recognito replied: <em class=\"output-bot\">...<\/em><\/p><\/div><\/section>\n      \n          <script src=\"socket.io\/socket.io.js\"><\/script><script src=\"js\/script.js\"><\/script><\/body><\/html>    \n<\/pre>\n\n\n\n

    To style the button , refer to the style.css file in the source code.<\/p>\n\n\n\n

    Capturing Voice With JavaScript:<\/strong><\/h3>\n\n\n\n

    In script.js, invoke an instance of SpeechRecognition, the controller interface of the Web Speech API for voice recognition:<\/p>\n\n\n\n

    We\u2019re including both prefixed and non-prefixed objects, because Chrome currently supports the API with prefixed properties.<\/p>\n\n\n\n

    Also, we are using some of ECMAScript 6 syntax in this tutorial, because the syntax, including the const and arrow functions, are available in browsers that support both Speech API interfaces,Speech Recognition and SpeechSynthesis.<\/p>\n\n\n\n

    Optionally, you can set varieties of properties to customize speech recognition:<\/p>\n\n\n\n

     recognition.lang = 'en-US';\n    recognition.interimResults = false;\n     \n<\/pre>\n\n\n\n

    Then, capture the DOM reference for the button UI, and listen for the click event to initiate speech recognition.<\/p>\n\n\n\n

    document.querySelector('button').addEventListener('click', () => {\n              recognition.start();\n        });\n<\/pre>\n\n\n\n

    Once speech recognition has started, use the result event to retrieve what was said as text. This will return a SpeechRecognitionResultList object containing the result, and you can retrieve the text in the array. Also, as you can see in the code sample, this will return confidence for the transcription, too.<\/p>\n\n\n\n

    recognition.addEventListener('result', (e) => {\n             let last = e.results.length - 1;\n             let text = e.results[last][0].transcript;\n           \n             console.log('Confidence: ' + e.results[0][0].confidence);\n           \n             \/\/ We will use the Socket.IO here later\u2026\n           });\n<\/pre>\n\n\n\n

    Real-Time Communication With Socket.IO:<\/strong><\/h3>\n\n\n\n

    Socket.IO is a library for real-time web applications. It enables real-time bidirectional communication between web clients and servers. We are going to use it to pass the result from the browser to the Node.js code, and then pass the response back to the browser.<\/p>\n\n\n\n

    You may be wondering why are we not using simple HTTP or AJAX instead. You could send data to the server via POST. However, we are using WebSocket via Socket.IO because sockets are the best solution for bidirectional communication, especially when pushing an event from the server to the browser. With a continuous socket connection, we won\u2019t need to reload the browser or keep sending an AJAX request at a frequent interval.<\/p>\n\n\n\n

    Instantiate Socket.IO in script.js somewhere:<\/p>\n\n\n\n

    const socket = io();<\/em><\/p>\n\n\n\n

    Then, insert this code where you are listening to the result event from SpeechRecognition:<\/p>\n\n\n\n

    socket.emit('chat message', text);<\/p>\n\n\n\n

    Now, let\u2019s go back to the Node.js code to receive this text and use AI to reply to the user.<\/p>\n\n\n\n

    To build a quick conversational interface, we will use API.AI because it provides a free developer account and allows us to set up a small-talk system quickly using its web interface and Node.js library.<\/p>\n\n\n\n

    Setting Up APIAI:<\/strong><\/h3>\n\n\n\n

    Use this for reference:<\/p>\n\n\n\n

     var APIAI_TOKEN =apiai(\"5afc4bdf601046b39972ff3866cca392\");\n     const APIAI_SESSION_ID = \"chatbot-clvxfh\";\n<\/pre>\n\n\n\n

    or get your own by visiting the official site(Getting Started)<\/a>and signing up.<\/p>\n\n\n\n

    Now we will use the server-side Socket.IO to receive the result from the browser.<\/strong><\/p>\n\n\n\n

     io.on('connection', function(socket) {\n              socket.on('chat message', (text) => {\n            \n      \/\/ Get a reply from API.AI\n            \n      let apiaiReq = apiai.textRequest(text, {\n        sessionId: APIAI_SESSION_ID\n      });\n            \n      apiaiReq.on('response', (response) => {\n        let aiText = response.result.fulfillment.speech;\n        socket.emit('bot reply', aiText); \/\/ Send the result back to the browser!\n      });\n            \n      apiaiReq.on('error', (error) => {\n        console.log(error);\n      });\n            \n      apiaiReq.end();\n            \n              });\n        });\n<\/pre>\n\n\n\n

    Once the connection is established and the message is received, use the API.AI APIs to retrieve a reply to the user\u2019s message.When API.AI returns the result, use Socket.IO\u2019s socket.emit() to send it back to the browser.<\/p>\n\n\n\n

    Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\n

    Create a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n

    The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n

    function synthVoice(text) {\n              const synth = window.speechSynthesis;\n              const utterance = new SpeechSynthesisUtterance();\n              utterance.text = text;\n              synth.speak(utterance);\n            }\n<\/pre>\n\n\n\n

    In the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n

    Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n

    Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n

    Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n

    'use strict';\n\n       const socket = io();\n       \n       const outputYou = document.querySelector('.output-you');\n       const outputBot = document.querySelector('.output-bot');\n       \n       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n       const recognition = new SpeechRecognition();\n       \n       recognition.lang = 'en-US';\n       recognition.interimResults = false;\n       recognition.maxAlternatives = 1;\n       \n       document.querySelector('button').addEventListener('click', () => {\n         recognition.start();\n       });\n       \n       recognition.addEventListener('speechstart', () => {\n         console.log('Speech has been detected.');\n       });\n       \n       recognition.addEventListener('result', (e) => {\n         console.log('Result has been detected.');\n       \n         let last = e.results.length - 1;\n         let text = e.results[last][0].transcript;\n       \n         outputYou.textContent = text;\n         console.log('Confidence: ' + e.results[0][0].confidence);\n       \n         socket.emit('chat message', text);\n       });\n       \n       recognition.addEventListener('speechend', () => {\n         recognition.stop();\n       });\n       \n       recognition.addEventListener('error', (e) => {\n         outputBot.textContent = 'Error: ' + e.error;\n       });\n       \n       function synthVoice(text) {\n         const synth = window.speechSynthesis;\n         const utterance = new SpeechSynthesisUtterance();\n         utterance.text = text;\n         synth.speak(utterance);\n       }\n       \n       socket.on('bot reply', function(replyText) {\n         synthVoice(replyText);\n       \n         if(replyText == '') replyText = '(No answer...)';\n         outputBot.textContent = replyText;\n  });\n<\/pre>\n\n\n\n

    It's done.Run the following command in your terminal.<\/p>\n\n\n\n

    $ node index.js<\/em><\/p>\n\n\n\n

    And search localhost:3000 in any supported browser.<\/p>\n\n\n\n

    You can refer to my repository for further help.<\/p>\n\n\n\n

    \nhttps:\/\/github.com\/sujanchhetri\/Recognito\n<\/div><\/figure>\n","post_title":"Creating A Chatbot Using Socket.io, API.AI and Web Speech API","post_excerpt":"In the world full of Siri, Cortana & Alexa, have you ever wondered you can create a new friend of yours. Well it might not be that intelligent but it not worthless to try creating something new. 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. ","post_status":"publish","comment_status":"open","ping_status":"open","post_password":"","post_name":"creating-a-chatbot-using-socket-io-api-ai-and-web-speech-api","to_ping":"","pinged":"","post_modified":"2024-11-14 03:29:51","post_modified_gmt":"2024-11-14 03:29:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/blogue.tech\/?p=256","menu_order":0,"post_type":"post","post_mime_type":"","comment_count":"0","filter":"raw"}],"next":false,"prev":false,"total_page":1},"paged":1,"column_class":"jeg_col_3o3","class":"jnews_block_3"};
    \n