scroll

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

laptop mockup scene

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

laptop mockup scene

GrumpyCat is purring while sleeping (as these CSS animated Zs indicate). Why would someone wake her up?

3

laptop mockup scene

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

laptop mockup scene

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.