Tích hợp Trí Tuệ Nhân Tạo Rasa để làm Web Chatbot

Ở bài trước, “Cài đặt platform Trí tuệ nhân tạo Rasa trên Windows” Tui đã hướng dẫn rất chi tiết từng bước để các bạn có thể cài đăt được platform Trí tuệ nhân tạo Rasa trên Windows.

Tiếp tục bài này Tui hướng dẫn các bạn làm thế nào để tích hợp Trí tuệ nhân tạo Rasa vào hệ thống Website của mình. Cụ thể ta sẽ làm 1 Chatbot Web dạng cơ bản như thế này:

Bạn để ý thường chatbot nó sẽ tương tác ở góc phải dưới cùng mỗi màn hình Web. Ta sẽ làm tương tự như vậy. Dĩ nhiên ở bài này chỉ là mới demo sơ sơ để ngó xem con server RASA do chính ta build trên máy local nó có hoạt động để giúp ta làm Chatbot như trên hay không. Còn các kịch bản để làm ra các Product thực tế thì ta cần nhiều thời gian để xây dựng các kịch bản dựa trên các tài liệu mà Rasa cung cấp. Tuy nhiên, về cơ bản kỹ thuật build Chatbot nó sẽ như vậy.

Chúng ta bắt đầu nhé (lưu ý nếu chưa làm bài Cài đặt platform Trí tuệ nhân tạo Rasa trên Windows thì không được máu me làm tiếp). Không được tỏ vẻ nguy hiểm khi chưa cài đặt được Platform này.

Trong ổ D (bạn không có thì tạo ổ khác, nhưng nếu dân lập trình mà chỉ có 1 ổ C thì Tui nghĩ bạn cần phải thức tỉnh lương tri, lập tức tạo thêm 1 ổ logic D).

Tạo thư mục sau trong ổ D: D:/Rasa/webchatbot

Sau đó mở Anaconda prompt lên để di chuyển lệnh vào thư mục này. Xem hình và gõ theo:

Sau đó activate rasa_install_demo bằng lệnh:

[code language=”python”]
conda activate rasa_install_demo
[/code]

Xem hình minh họa:

Gõ lệnh cho đúng như trên rồi nhấn enter(Lưu ý ở bài trước bạn đặt tên gì thì lấy tên đó nha. Vì bài trước Tui đặt là rasa_install_demo nên bài này Tui lấy tên này).

Sau khi Nhấn Enter, xem hình kết quả:

Như vậy nó đã được activated.

(rasa_install_demo) D:/Rasa/webchatbot>

Bây giờ ta thử Kiểm tra version của Rasa, gõ lệnh:

[code language=”python”]
rasa –version
[/code]

xem hình gõ lệnh:

Gõ Enter, xem kết quả:

Màn hình trên cho ta biết các thông số về phiên bản con AI Rasa.

tiếp theo: Khởi tạo Rasa bằng cách gõ lệnh:

[code language=”python”]
rasa init
[/code]

Xem hình:

Nhấn Enter, xem kết quả:

Ở màn hình trên là hỏi ta Tạo nơi lưu trữ dự án, vì đang trỏ lệnh ở D:/rasa/webchatbot nên ta nhấn enter luôn để tạo mặc định. Xem kết quả:

Nó hỏi có train một model lúc khởi tạo không, ta chọn Y.

và chờ nó thực hiện:

Chờ tiếp thôi chứ biết sao giờ…

Tùy vào độ ốm yếu của máy mà bạn thấy màn hình dưới đây lâu hay mau

Tạm thời bài này ta chưa xử lý giọng nói, nên ta nhập n rồi nhấn enter, và chờ nó thực hiện tiếp:

Như vậy nó đã tạo ra dự án cho bạn, vào thư mục để kiểm tra.

Vào ổ D bạn sẽ thấy dự án được tạo ra như dưới đây (nếu không thấy thì có thể nghiệp mình còn nặng, cần sống tử tế hơn và phải cấu hình lại từ bài học 1):

Như vậy tới đây bạn có thể dùng Mở Visual Studio, hay Visual Code, hay bất kỳ trình Dev Editor cái gì cũng được, quen cái nào sài cái đó. Tui trước giờ mê bác BillGate nền toàn sài đồ của Bác ấy không.

Vậy mở Visual Studio 2019 nhé (ở bài 1 các bạn cũng đã gặp).

Từ Visual Studio. Chọn “Open a local folder“, chọn thư mục của dự án :

Bấm “Select Folder”

Kết quả mở trong Visual Studio:

Bây giờ mở file “credentials.yml” và chỉnh sửa:

Dòng 20 đến 23 mở nó ra:

Sửa chỗ này:

[code language=”html”]
socketio:
user_message_evt:
bot_message_evt:
session_persistence:
[/code]

Thành:

[code language=”html”]
socketio:
user_message_evt: user_uttered
bot_message_evt: bot_uttered
session_persistence: true
[/code]

Xem hình:

Bây giờ tạo một trang index.html, trang này để tích hợp AI RASA vào để làm tool chatbot:

Bấm chuột phải vào dự án / chọn Add/ chọn New File:

Lúc này trong mục Solution sẽ ra 1 tên file cho ta, ta sử nó thành: Index.html

xem hình:

Bây giờ ta code HTML, Javascript cho Index.html như sau:

Chưa biết gì về HTML cơ bản thì xem 29 Video clip về HTML Tui quay ở đây đủ sài: https://www.youtube.com/watch?v=i4UH1T4Fkos&list=PLmEUE4MG8_b6MO1o3KcWnqsBscWMGnf5Y

[code language=”python”]

!(function () {
let e = document.createElement(“script”),
t = document.head || document.getElementsByTagName(“head”)[0];
(e.src =
“https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js”),
// Replace 1.x.x with the version that you want
(e.async = !0),
(e.onload = () => {
window.WebChat.default(
{
initPayload:’/greet’,
customData: { language: “en” },
socketUrl: “http://localhost:5005”,
// add other props here
},
null
);
}),
t.insertBefore(e, t.firstChild);
})();

[/code]

ở trên:

[code language=”html”]
socketUrl: “http://localhost:5005”
[/code]

Nghĩa là ta muốn start 1 con AI RASA server ở cổng 5005

Bây giờ ta quay lại Anaconda gõ lệnh sau để start con AI RASA server này:

[code language=”python”]
rasa run -m models –enable-api –cors “*”
[/code]

Xem hình:

Chờ nó chạy và xem kết quả:

Như vậy nó đã start RASA server tại http://localhost:5005

Ta có thể kiểm tra :

Như vậy sau khi kiểm tra trên trình duyệt thì rõ ràng con Server AI Rasa đã chạy thành công.

Để chạy Web Index.html thử nghiệp Chatbot ta:

Có thể mở trình duyệt bất kỳ lên. Ví dụ là Chrome chẳng hạn

Rồi gõ đường dẫn: D:/Rasa/webchatbot/index.html Vào trình duyệt, xem kết quả:

Góc phải dưới cùng bạn thấy biểu tượng chát không? Nhấn vào nó rồi thử nghiệm:

Như vậy tới đây Tui đã hướng dẫn xong các bước rất chi tiết để tích hợp trí tuệ nhân tạo RASA vào hệ thống Web để làm Chatbot. Nó hay ở chỗ là mình tự build được local (và tự đây ta có thể để lên private cloud hoặc public cloud).

Tui sẽ sắp xếp thời gian để viết các hướng dẫn liên quan tới tạo kịch bản của chatbot, cũng như cách deploy nó lên Cloud như thế nào. Dĩ nhiên Tui rất bận, các bạn đừng ngồi chờ, hay cố gắng tự tìm hiểu trước.

Source code và file cấu hình mà Tui làm trong máy của Tui, bạn có thể tải ở đây:

https://www.mediafire.com/file/ty1u5jl7hwtmh4r/webchatbot.rar/file

Chúc các bạn thành công!

Leave a Reply