Javascript Turorial App - Viết ứng dụng chat voice JS
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>Chat with Chitti</header>
<section class="main">
<div class="user-area">
<img src="images/user.png">
</div>
<div class="chatarea-main">
<div class="chatarea-outer">
<!-- <div class="chatarea-inner user">Hello hi, how area you, i am good. What about you!</div>
<div class="chatarea-inner chatbot">Hello hi, how area you, i am good. What about you!</div>
<div class="chatarea-inner user">Hello hi, how area you, i am good. What about you!</div> -->
</div>
</div>
<div class="chatbot-area">
<img src="images/chatbot.png">
</div>
<button id="mic"><i class="flaticon-microphone"></i></button>
</section>
<script src="js/main.js"></script>
</body>
</html>
File style.css
@font-face {
font-family: 'Roboto-Regular';
src: url('../fonts/Roboto-Regular.eot');
src: local('☺'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype'), url('../fonts/Roboto-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Flaticon";
src: url("../fonts/Flaticon.eot");
src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
url("../fonts/Flaticon.woff2") format("woff2"),
url("../fonts/Flaticon.woff") format("woff"),
url("../fonts/Flaticon.ttf") format("truetype"),
url("../fonts/Flaticon.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "Flaticon";
src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
}
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 30px;
font-style: normal;
}
.flaticon-microphone:before { content: "\f100"; }
*{margin: 0;padding: 0;box-sizing: border-box;}
body{font-family: 'Roboto-Regular';background: #E7F2F1;}
header {
height: 60px;
background: #fff;
color: #03283B;
text-align: center;
line-height: 60px;
font-size: 30px;
box-shadow: 10px 0 5px #b9b7b7;
width: 100%;
position: fixed;
z-index: 2;
}
.main {
width: 100%;
float: left;
margin-top: 60px;
padding: 30px 0;
}
.main button {
background: #ff3b3b;
padding: 15px;
border-radius: 50%;
box-shadow: 0 0 10px #666;
position: fixed;
right: 20px;
bottom: 20px;
border: none;
color: #fff;
cursor: pointer;
}
.main button:focus{outline: none;}
.container {
width: 85%;
margin: 0 auto;
}
.user-area, .chatbot-area {
width: 20%;
height: calc(100vh - 60px);
margin-right: 15px;
display: flex;
align-items: center;
position: fixed;
left: 80px;
z-index: 99999;
}
.chatbot-area {
float: right;
right: 80px;
left: auto;
}
.user-area img, .chatbot-area img {
width: 100%;
}
.user-area img{left: 0;}
.chatarea-main {
width: 42%;
margin: 0 auto;
}
.chatarea-outer {
width: 100%;
float: left;
}
.chatbot-area .chatarea-main{float: left;}
.chatarea.user {
float: right;
width: 40%;
padding: 20px 0;
}
.chatarea-inner {
float: left;
width: 60%;
padding: 10px;
color: #fff;
position: relative;
margin: 5px 0;
}
.chatarea-inner.user{
background: #6522A4;
}
.chatarea-inner.chatbot{
background: #466EB6;
float: right;
}
.chatarea-inner.user:before {
content: '';
position: absolute;
border-right: 20px solid #6522A4;
border-top: 20px solid transparent;
border-bottom: 0px solid transparent;
bottom: 0;
left: -20px;
}
.chatarea-inner.chatbot:before {
content: '';
position: absolute;
border-left: 20px solid #466EB6;
border-top: 20px solid transparent;
border-bottom: 0px solid transparent;
bottom: 0;
right: -20px;
}
.chatbot-area .chatarea-inner{float: left;}
File main.js
let mic = document.getElementById("mic");
let chatareamain = document.querySelector('.chatarea-main');
let chatareaouter = document.querySelector('.chatarea-outer');
let intro = ["Hello, I am Chitti", "Hi, I am a Robo", "Hello, My name is Chitti"];
let help = ["How may i assist you?","How can i help you?","What i can do for you?"];
let greetings = ["i am good you little piece of love", "i am fine, what about you", "don't want to talk", "i am good"];
let hobbies = ["i love to talk with humans", "i like to make friends like you", "i like cooking"];
let pizzas = ["which type of pizza do you like?", "i can make a pizza for you", "i would love to make a pizza for you", "would you like cheese pizza?"];
let thank = ["Most welcome","Not an issue","Its my pleasure","Mention not"];
let closing = ['Ok bye-bye','As you wish, bye take-care','Bye-bye, see you soon..']
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
function showusermsg(usermsg){
let output = '';
output += `<div class="chatarea-inner user">${usermsg}</div>`;
chatareaouter.innerHTML += output;
return chatareaouter;
}
function showchatbotmsg(chatbotmsg){
let output = '';
output += `<div class="chatarea-inner chatbot">${chatbotmsg}</div>`;
chatareaouter.innerHTML += output;
return chatareaouter;
}
function chatbotvoice(message){
const speech = new SpeechSynthesisUtterance();
speech.text = "This is test message";
if(message.includes('who are you')){
let finalresult = intro[Math.floor(Math.random() * intro.length)];
speech.text = finalresult;
}
if(message.includes('fine')){
let finalresult = help[Math.floor(Math.random() * help.length)];
speech.text = finalresult;
}
if(message.includes('how are you' || 'how are you doing today')){
let finalresult = greetings[Math.floor(Math.random() * greetings.length)];
speech.text = finalresult;
}
if(message.includes('tell me something about you' || 'tell me something about your hobbies')){
let finalresult = hobbies[Math.floor(Math.random() * hobbies.length)];
speech.text = finalresult;
}
if(message.includes('pizza')){
let finalresult = pizzas[Math.floor(Math.random() * pizzas.length)];
speech.text = finalresult;
}
if(message.includes('thank you' || 'thank you so much')){
let finalresult = thank[Math.floor(Math.random() * thank.length)];
speech.text = finalresult;
}
if(message.includes('talk to you' || 'talk')){
let finalresult = closing[Math.floor(Math.random() * closing.length)];
speech.text = finalresult;
}
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
}
recognition.onresult=function(e){
let resultIndex = e.resultIndex;
let transcript = e.results[resultIndex][0].transcript;
chatareamain.appendChild(showusermsg(transcript));
chatbotvoice(transcript);
console.log(transcript);
}
recognition.onend=function(){
mic.style.background="#ff3b3b";
}
mic.addEventListener("click", function(){
mic.style.background='#39c81f';
recognition.start();
console.log("Activated");
})
