OVERVIEW
In this blog, you will learn,
- What is a Carousel?
- How to attach carousel as a message with rasa chatbot?
- How to create a story in rasa chatbot to call the action to attach carousel ?
In our previous blog, you must have understood that how you can create an End user chatbot to find the nearest hospital for bed availability and you you must have interfaced it with some website through socket.io. In this blog, you will use the same project with some modifications that you’ll see now.
What is a Carousel?
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, custom markup or text. It also includes support for previous or next controls and indicators. Here is a demo for the carousel,
Attach Carousel with Rasa Chatbot
Now, let’s understand how to attach the carousel with the rasa chatbot responses. To do that, first of all I’ll be using my previous project from my previous blog. You can check that blog to understand the project and also you will get the code to download. Once you will have the code with you and you have already setup the virtual environment for the project, now you’ll understand how to create a carousel and attach carousel to the response.
Let’s go step by step, firstly lets understand how are we going to attach carousel and to call it in stories. For that currently I’ll be using the existing story and will modify it. Now when the greet intent will be triggered, a custom action with attached carousel will be called. Here is the code to be added to rules.yml,
rules.yml
- rule: Say `hello` when the user starts a conversation with intent `greet
conversation_start: false
steps:
- intent: greet
- action: action_resources_listRest of the code is just the same like we had in our project. Now let’s create the action “action_resources_list”, this action will call the carousel. Here is the carousel data which is attached with the dispatcher to form a carousel,
covid_resources = {
"type": "template",
"payload": {
"template_type": "generic",
"elements": [{
"title": "MBMC",
"subtitle": "FIND BED, SAVE LIFE.",
"image_url": "static/hospital-beds-application.jpg",
"buttons": [{
"title": "Hospital Beds Availability",
"url": "https://www.covidbedmbmc.in/",
"type": "web_url"
},
{
"title": "MBMC",
"type": "postback",
"payload": "/affirm"
}
]
},
{
"title": "COVID.ARMY",
"subtitle": "OUR NATION, SAVE NATION.",
"image_url": "static/oxygen-cylinder-55-cft-500x554-500x500.jpg",
"buttons": [{
"title": "RESOURCES AVAILABILITY",
"url": "https://covid.army/",
"type": "web_url"
},
{
"title": "COVID ARMY",
"type": "postback",
"payload": "/deny"
}
]
},
{
"title": "Innovate Youself",
"subtitle": "Get It, Make it.",
"image_url": "static/test.jpg",
"buttons": [{
"title": "Innovate Yourself",
"url": "https://www.innovationyourself.com/",
# "https://yt3.ggpht.com/ytc/AAUvwnhZwcqP89SH71KugPDfltbcpBajoPpxihN7aPGOmzE=s900-c-k-c0x00ffffff-no-rj",
"type": "web_url"
},
{
"title": "Innovate Yourself",
"type": "postback",
"payload": "/greet"
}
]
},
{
"title": "RASA CHATBOT",
"subtitle": "Conversational AI",
"image_url": "static/rasa.png",
"buttons": [{
"title": "Rasa",
"url": "https://www.rasa.com",
"type": "web_url"
},
{
"title": "Rasa Chatbot",
"type": "postback",
"payload": "/greet"
}
]
}
]
}
}In the above dictionary, there are two key and value pairs, one is type and second one is payload. Type will define the type of output you will get and payload will contain a dictionary containing all the details required to form a carousel with multiple cards. Inside this dictionary we have two keys, one is template_type and the other one is elements that will hold a list containing the details of every card to be displayed with attach carousel.
Here we are have two keys image_url and url, path to image_url is on the current directory of the project and for url it can be any website link. Website link is static and will not affect your project but the image_url is not static and it may vary depending on the deployment. So in that case we have to create a directory holding all the images to be displayed on the attach carousel. Create a directory with name “static” and store all images in that.
When you have the final data ready with you to attach carousel, call the dispatcher and attach the carousel dictionary to it. Here is a code for it, that will be added to the actions.py,
actions.py
class ActionResourcesList(Action):
def name(self) -> Text:
return "action_resources_list"
def run(self, dispatcher: CollectingDispatcher,
tracker: Tracker,
domain: Dict[Text, Any]) -> List[Dict[Text, Any]]:
covid_resources = {
"type": "template",
"payload": {
"template_type": "generic",
"elements": [{
"title": "MBMC",
"subtitle": "FIND BED, SAVE LIFE.",
"image_url": "static/hospital-beds-application.jpg",
"buttons": [{
"title": "Hospital Beds Availability",
"url": "https://www.covidbedmbmc.in/",
"type": "web_url"
},
{
"title": "MBMC",
"type": "postback",
"payload": "/affirm"
}
]
},
{
"title": "COVID.ARMY",
"subtitle": "OUR NATION, SAVE NATION.",
"image_url": "static/oxygen-cylinder-55-cft-500x554-500x500.jpg",
"buttons": [{
"title": "RESOURCES AVAILABILITY",
"url": "https://covid.army/",
"type": "web_url"
},
{
"title": "COVID ARMY",
"type": "postback",
"payload": "/deny"
}
]
},
{
"title": "Innovate Youself",
"subtitle": "Get It, Make it.",
"image_url": "static/test.jpg",
"buttons": [{
"title": "Innovate Yourself",
"url": "https://www.innovationyourself.com/",
"type": "web_url"
},
{
"title": "Innovate Yourself",
"type": "postback",
"payload": "/greet"
}
]
},
{
"title": "RASA CHATBOT",
"subtitle": "Conversational AI",
"image_url": "static/rasa.png",
"buttons": [{
"title": "Rasa",
"url": "https://www.rasa.com",
"type": "web_url"
},
{
"title": "Rasa Chatbot",
"type": "postback",
"payload": "/greet"
}
]
}
]
}
}
dispatcher.utter_message(attachment=covid_resources)
return []Now register the action name in domain.yml
domain.yml
actions:
- action_resources_listNow the code is ready from our end. Now train the model, start the action server and rasa server with the given command,
rasa train
run rasa server in terminal 1,
rasa run --model models --enable-api --cors "*" --debug
and run action server in other terminal,
rasa run actionsFor more details and clarification check this video,
You can download the full code here(branch: master),
HOSPITAL BED AVAILABILITY | CAROUSEL
Now, everything is setup, it’s time to open the website where you have injected the script and test your bot with attach carousel. This is how your bot will respond once it’s ready,
Time to wrap up now. Hope you liked our content on building a chatbot to find the nearest hospital for bed availability with attach carousel. See you in our next blog, thanks for reading our blog and do leave a comment below to help us improve the content to serve you all of our experience with you. Stay tuned with us for more rasa chatbot contents.
Also check out our other playlist Rasa Chatbot, Internet of things, Docker, Python Programming, etc.
Become a member of our social family on youtube here.
