+2

[RASA 3] - Bài 2: Nhúng Chatbot Rasa vào website UI

Bài trước mình đã thực hành làm quen với Rasa 3 và dạy chatbot chào hỏi cơ bản. Tuy nhiên chatbot mà dùng giao diện command line thì nhìn cũng hơi chán nên mình sẽ nhúng Chatbot rasa vào giao diện website.

Vì mục đích bài này chỉ là có một giao diện chat thay thế command line cho đẹp thôi nên mình sẽ làm theo cách đơn giản và nhanh nhất có thể, không đi sâu vào các config, nếu muốn hiểu sâu hơn bạn có thể xem thêm ở trang tài liệu của Rasa nhé.

Build Websocket Rasa

Bước 1: Trong file credentials.yml thêm đoạn code sau:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

Rasa có hỗ trợ Authentication cho quá trình truyền nội dung chat nữa nhưng ở bài này mình chưa muốn đi sâu, bạn có thể xem thêm ở trang chính của Rasa mình để link đưới phần "Tài liệu tham khảo".

Bước 2: Run Rasa server dùng lệnh sau:

rasa run --cors "*"

Mặc định Rasa sẽ start server trên http://0.0.0.0:5005 Sau khi chạy lệnh đợi 1 lúc thấy hiện thông báo như hình dưới là đã hoàn thành.

image.png

Nhúng Rasa

Chèn đoạn code sau vào website của bạn:

<div id="rasa-chat-widget" data-websocket-url="http://localhost:5005"></div>
<script src="https://unpkg.com/@rasahq/rasa-chat" type="application/javascript"></script>

Thuộc tính data-websocket-url điền url Websocket Rasa đã build.

Lý do mình dùng "http://localhost:5005" chứ không phải "http://0.0.0.0:5005" là do khi để http://0.0.0.0:5005 chạy ở máy mình bị báo lỗi "Connection refused" làm cho web không kết nối được với bot rasa để gửi và nhận phản hồi, nên mình phải map host. Nếu bạn dùng "http://0.0.0.0:5005" không lỗi thì cứ dùng nhé.

Thông tin map host của mình như sau:

0.0.0.0 localhost

Nếu bạn chưa build sẵn một website thì cũng không sao, chỉ cần tạo một file html có nội dung như sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rasa ChatBot UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
  <body>
    <h1>Rasa ChatBot UI</h1>
    <div id="rasa-chat-widget" data-websocket-url="http://localhost:5005/"></div>
    <script src="https://unpkg.com/@rasahq/rasa-chat" type="application/javascript"></script>

  </body>
</html>

Mở file html vừa tạo lên bằng trình duyệt bất kỳ và test chat các câu chào hỏi mình đã huấn luyện cho bot ở bài trước và xem phản hồi.

Kết quả sẽ như hình sau:

image.png

Ngoài website Rasa còn hỗ trợ tích hợp chatbot lên nhiều kênh khác như: Facebook Messenger, Telegram,... mình sẽ cùng tìm hiểu sau nhé.

Tài liệu tham khảo

https://rasa.com/docs/rasa/connectors/your-own-website


All rights reserved

Bình luận

Đăng nhập để bình luận
Avatar
@anhpn191
thg 12 6, 2022 6:29 SA

mình đã làm theo các bước hướng dẫn của bạn mà trong chatbox của mình không có hồi đáp từ rasa bạn ạ, bạn có thể gợi ý thêm cho mình được không ạ?

Xem thêm (5)
Avatar
@anhpn191
thg 12 6, 2022 3:23 CH

@itkiwi Do có 1 sự hiểu lầm nho nhỏ nên mình đã thay đổi thông tin khai báo đối với socketio nên bị lỗi bạn ạ, mình đã thay đổi lại đúng theo hướng dẫn của bạn thì ok rồi. Cảm ơn bạn rất nhiều nha 😄

Avatar
@lelam
thg 5 2, 7:36 SA

@anhpn191 bạn sửa sao chia sẽ cho mình với. Mình cũng đang bị lỗi chatbox không có hồi đáp từ rasa giống bạn

Avatar
@danghydra
thg 3 29, 2023 1:13 CH

Mình dùng Pycharm thì bước mở web làm như thế nào ạ?

Avatar
@itkiwi
thg 4 4, 2023 4:35 SA

Mình chưa hiểu câu hỏi lắm. Bạn đang cần build website hay mở file html? Nếu bạn đang cần mở file html từ tool pycharm thì right click vào file-> Chọn Open In-> Browser -> trình duyệt muốn mở. image.png

Avatar
@vankhoat
thg 11 30, 2023 8:51 SA
Avatar
@lelam
thg 5 2, 6:59 SA

Mình đã làm theo hướng dẫn của bạn và khi chạy câu lệnh rasa run --cors "*" không thấy báo lỗi gì. Nhưng trong chatbox của mình không có hồi đáp từ rasa. Bạn có thể hướng dẫn mình cách khắc phục được không?

Avatar
@itkiwi
thg 5 2, 10:07 SA

Ở nội dung html bạn bạn khai báo data-websocket-url như thế nào? bạn copy url khai báo chổ data-websocket-url paste lên trình duyệt xem có bị báo lỗi gì không rồi chụp mình xem với nha

Avatar
@lelam
thg 5 3, 4:09 SA

@itkiwi Được rồi, cảm ơn bạn nhiều

Avatar
@Ngavo
thg 7 1, 2:13 CH

Mình đang bị lỗi chatbox không có hồi đáp từ rasa, Hãy chỉ cách giúp mình với. Thanks

Avatar
@itkiwi
thg 7 19, 12:36 CH

Bạn mô tả và chụp hình lỗi cụ thể được không? Xem kỹ lại chỗ data-websocket-url coi đúng với thông tin hiện ở Stating Rasa server on chưa? gõ url trên trình duyệt xem server chatbot đã run thành công chưa?

Avatar
+2
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí