rasa-webchat
rasa-dev-tutorial
Our great sponsors
rasa-webchat | rasa-dev-tutorial | |
---|---|---|
3 | 3 | |
916 | 22 | |
1.6% | - | |
0.0 | 0.0 | |
4 days ago | over 1 year ago | |
JavaScript | HTML | |
Apache License 2.0 | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
rasa-webchat
-
Accessing cookies and authenticating to WordPress API
For this, people will chat with the bot using this tool -> https://github.com/botfront/rasa-webchat
-
RASA - Socket.IO integration
The web chat we created does not support all Rasa functionality and it could be improved in many ways. If you want to add Rasa chat to your webpage, consider rasa-webchat which provides more features.
-
Building a Social Engineering Chatbot for Cyber Security Awareness
There is a python framework named Rasa, it s really easy and is open source. I use it at work. As for the frontend, you can use botfront ui. https://github.com/RasaHQ/rasa https://github.com/botfront/rasa-webchat
rasa-dev-tutorial
-
RASA - Giving voice to web chatbot
We already had the and and only added the two elements which contain a element. We want the feature to be disabled by default and display only the volume off icon. Hence we hide the volume on icon by adding style="display: none" to it. Styles Let's make the button nicer by adding this to the tag in the
:
.voice-icon { fill: currentColor; font-size: 22px; width: 1em; }
Enter fullscreen mode Exit fullscreen modeThis should be the result:
JavaScript
The last step is to add the behaviour.
Let's create atoggleVoice
function and add it as aclick
listener to the two buttons.
let voiceEnabled = false; const iconVolumeOn = document.getElementById('icon-volume-on'); const iconVolumeOff = document.getElementById('icon-volume-off'); function toggleVoice() { if (voiceEnabled) { voiceEnabled = false; iconVolumeOn.style.display = 'none'; iconVolumeOff.style.display = 'block'; } else { if ('speechSynthesis' in window) { voiceEnabled = true; iconVolumeOn.style.display = 'block'; iconVolumeOff.style.display = 'none'; } else { alert("Sorry, your browser doesn't support text to speech."); } } } iconVolumeOn.addEventListener('click', toggleVoice); iconVolumeOff.addEventListener('click', toggleVoice);
Enter fullscreen mode Exit fullscreen modeDepending on whether the voice is enabled or disabled, the function displays the appropriate icon and hides the other icon. It also sets
voiceEnabled
accordingly. The voice is enabled only when the SpeechSynthesis API is supported by the user's browser (this API is described later on).You can now toggle the button:
For the text-to-speech, we'll use Web Speech API. It allows us to create a
SpeechSynthesisUtterance
instance to which we assign a text.
When this instance is passed to thewindow.speechSynthesis.speak
function, the browser reads the text aloud.We want to read aloud every message from the chatbot after it is received, therefore we add this code at the end of the
appendMessage
function:
if (voiceEnabled && type === "received") { const voiceMsg = new SpeechSynthesisUtterance(); voiceMsg.text = msg; window.speechSynthesis.speak(voiceMsg); }
Enter fullscreen mode Exit fullscreen modeThat's it!
Run the application
- Serve the application on
http://localhost:8080
by runningnpx http-server webchat
. - In a new terminal window, run the rasa server with enabled cors for all origins:
rasa run --cors "*"
. - In another terminal window, run the actions server:
rasa run actions
. - Open
http://127.0.0.1:8080
and chat with the chatbot!
Repository for this tutorial:
petr7555 / rasa-dev-tutorial
You can checkout the state of the repository at the end of this tutorial by running:
git clone --branch 23-text-to-speech [email protected]:petr7555/rasa-dev-tutorial.git
Enter fullscreen mode Exit fullscreen mode - Serve the application on
-
RASA - Socket.IO integration
All that is left is a client. Create a folder named webchat in the Rasa chatbot project. Inside the webchat folder, create a new index.html file. This file will contain the source code for the interactive web chat. You can view the complete code here.
-
RASA - Custom submit action
Add the action also to the tests.
What are some alternatives?
botfront - Enterprise-grade open source GUI platform for Rasa teams
chaskiq - A full featured Live Chat, Support & Marketing platform, alternative to Intercom, Drift, Crisp, etc from cience.com
Darkwire.io - End-to-end encrypted instant web chat
Tinode - Instant messaging platform. Backend in Go. Clients: Swift iOS, Java Android, JS webapp, scriptable command line; chatbots
rasa - đŦ Open source machine learning framework to automate text- and voice-based conversations: NLU, dialogue management, connect to Slack, Facebook, and more - Create chatbots and voice assistants
webapp - Tinode web chat using React
chatRooms - Fun-made project for chatting anonymously
Accelerator - A dual battle game where two players can challenge each other and play a quiz game on various topics. Also, it's a kind of social media platform so users can post and see posts about their academic and non-academic topics. Make many friends and challenge them in Accelerator-āĻ¤ā§āĻŦāĻžāĻ°āĻ. Users can also write posts and comments in LaTeX formatting enabled and many more. In Accelerator-āĻ¤ā§āĻŦāĻžāĻ°āĻ app. Accelerate your learning by using this app.