GrumpyCat AI bot.
ROLE:- designer|
- coder
This AI chatbot (Dialogflow) is made with Node.js (+Express) and Socket.IO which provides a full duplex communication channel between front-end and back-end. It works only on Chrome as it uses the Web Speech API. This app was deployed to Render.
- JavaScript|
- HTML5|
- CSS3|
- Photoshop|
- Figma
1
At first there is a modal informing the user about the permissions needed in order to chat with GrumpyCat. The PLAY button also serves as the user gesture needed for creating the AudioContext for playing any sound.
2
GrumpyCat is purring while sleeping (as these CSS animated Zs indicate). Why would someone wake her up?
3
Well, GrumpyCat is... grumpy, so don’t expect a welcoming response. She will start with one of the many hard-coded phrases before Dialogflow takes over. The Speech Synthesis interface transforms the text to audio, giving her a voice.
4
Then it’s the turn of the SpeechRecognition Engine to transform your response to text so your words reach the back-end via the WebSocket and finally DialogFlow. There the well trained AI chatbot we’ll come with the appropriate answer so the cycle of grumpiness continues.