Cách làm chatbot bằng Javascript (JS)

Denset - Định nghĩa một cách đơn giản nhất, chatbot là một chương trình máy tính tương tác với người dùng bằng ngôn ngữ tự nhiên dưới một giao diện đơn giản, âm thanh hoặc dưới dạng tin nhắn. Hãy cùng Denset đi tìm cách làm bằng chatbot chỉ bằng JS thui nhé

Từ khóa tìm kiếm: chatbot, chương trình máy tính, công cụ chat tự động, robot, bot, js, html, javascript, css,...
Bài viết liên quan: Sử dụng Codepad của Desnet để thử code, Khung soạn thảo văn bản tiện lợi bằng HTML
Bình luận: Hãy tích cực bình luận, Dini sẽ luôn trả lời bạn. Dùng thông tin thật của mình để bình luận sẽ giúp Dini liên hệ và trả lời bạn dễ dàng hơn. Cuối cùng, hãy bình luận văn minh, đừng chửi tục.
Bản quyền: Dini và các bạn hãy cùng để link bản quyền nếu copy từ bất kì nguồn nào. Nếu hổng nhớ nguồn thì hãy ghi là "Sưu tầm" nhé.

Code

<script>
function change_alias(alias) {
    var str = alias;
    str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g,"a"); 
    str = str.toLowerCase();
    str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g,"e"); 
    str = str.replace(/ì|í|ị|ỉ|ĩ/g,"i"); 
    str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g,"u"); 
    str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g,"o"); 
    str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g,"y"); 
function getAnswer(input1){
    str = str.replace(/đ/g,"d");
    str = str.trim(); 
    return str;
}
var user_profile = [];
 var input = change_alias(input1);
   if (input == bodaucau(change_alias(user_profile[i].description[j]))){
    for (var i=0;i<user_profile.length;i++){
     for (var j=0;j<user_profile[i].description.length;j++){
          var length = user_profile[i].link.length;
    return "Ồ-nâu! Mình chưa thể hỉu được tin nhắn của bạn rùi. Vì sao ư? Đơn giản vì đây chỉ là bản demo thui, nhắn 'xem cách làm' để làm ra chatbot như này nhé";
       return user_profile[i].link[Math.floor(Math.random() * length)];
      }
        }
    }
    var url = "https://google.com";
}
function Messwrite(elm, loai, mess){
var doituong = document.getElementById(elm);
else if (loai == 1){doituong.innerHTML += '<div style="border:2px solid #ff6d1f;background-color:#ffb41f;border-radius:16px;padding: 10px; margin: 4px;"><b>Bạn</b>:  '+mess+'</div>';}
if (loai == 0){responsiveVoice.speak(mess, "Vietnamese Male");doituong.innerHTML += '<div style="border:2px solid #1fadff;background-color:#1ff0ff;border-radius:16px;padding: 10px; margin: 4px;"><b>Desbot</b>: '+mess+'</div>';} 
}
function bodaucau(str){
    str = str.toLowerCase();
    str = str.replace(/!|@|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'|\"|\&|\#|\[|\]|~|\$|_|`|-|{|}|\||\\/g," ");
    str = str.replace(/ + /g," ");
         Messwrite(idOfdemo, 0, an);
    str = str.trim(); 
    return str;
}
function qaa(){
 var value = document.getElementById("fname");
 var check = value.value.replace(/ /g,"");
 if (check == ""){} else{
  Messwrite(idOfdemo, 1, value.value);
        var an = getAnswer(bodaucau(value.value));
        //value.value = "Chờ tí nhé, Desbot sẽ trả lời thôi...";
        //value.disabled = true;
        value.value = "";
  setTimeout(function(){
         //value.disabled = false;
document.getElementById("nhantinbox").innerHTML = '<div id="formSendMess" style="border-radius: 16px;background-color: #f2f2f2;padding: 8px; margin: 4px;"><input type="text" id="fname" name="firstname" placeholder="Nhập tin nhắn..." style="width: calc(100% - 55px);padding: 12px 20px;display: inline-block;border: 1px solid #ccc;border-radius: 16px 0px 0px 16px;box-sizing: border-box;" onkeyup="if(event.keyCode === 13){qaa()}"> <input type="submit" id="myBtn" value="Nhắn" style="width: 50px;background-color: #1fadff;color: white;padding: 12px 0px; border: none;border-radius: 0px 16px 16px 0px;cursor: pointer;float: right;" onclick="qaa()"></div>'};
        }, 1000);
 }
}
window.onload = function() {Messwrite(idOfdemo, 0, "Ha-lô bạn! Hãy nhắn tin cùng tui nhé. Tui là công cụ chat tự động đó. Nhưng tui còn khá nhiều khuyết điểm, bạn hãy giúp tôi hoàn thiện nhé.");
var idOfdemo = "demo";


//Desbot - A chatbot code by Desnet (bit.ly/Denset)


~Code chat~


</script>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=s3FOVpNo"></script>
<div id="demo"></div>
<div id="nhantinbox"></div>

Hướng dẫn sử dụng

Bước 1: Copy code trên vào nơi cần hiển thị chatbot

Bước 2: Ở ~Code chat~, với mỗi một input (xem hình trên để biết input là gì) thì hãy thêm một dòng sau. Nhớ là sửa hai cái chữ màu đỏ nhé:

user_profile.push({description:["input"],link: ["output"]});

Ví dụ một input có nhiều output (Tức là khi đánh từ trong input sẽ random để xuất ra các output):

user_profile.push({description:["chào"],link: ["Helo", "Xin chào"]});

Ví dụ nhiều input, nhiều output (Khi đánh một trong các input thì sẽ random các output để xuất ra):

user_profile.push({description:["chào", "xin chào"],link: ["Helo", "Xin chào"]});

Những điều hay của Chatbot bằng JS

Có giọng nói tích hợp
Hỗ trợ nhiều input và output
Chỉ bằng JS
Không phân biệt dấu câu, chữ hoa/thường, chữ có dấu/không dấu

Bạn có thể xem ví dụ mẫu ở đây: https://www.w3schools.com/code/tryit.asp?filename=GBEUYZRVWSIC

Ok, chúc bạn thành công! Hẹn gặp lại bạn!

Tìm kiếm

Phá Mạng - Desnet