Shiba Chatbot
Strategies:
Ideation
Coding
Tools used:
p5.js
Illustrator
Duration:
2 Weeks
Project Overview
If there is anything that I learned from 2020, it would be self-care. Taking care of yourself means more than drinking more water; it also means being more conscious of how you feel.
Therefore, I decided to make a program that provides people a chance to share whatever they have to say without judgment and encourages them to talk about and reflect on their feelings.
Try out the chatbot here: p5.js chatbot
My Process
To make a chatbot, I had to figure out how to make the program capable of responding to any sentence, which means I had to write a script for the bot’s “brain”. As I was looking for a legit platform/tool where I could learn the syntax and write out the codes, I stumbled upon RiveScript, a plain-text, line-based scripting language that looks super easy to learn. After going through a couple of examples and videos, I started writing out my script with some help from RiveScript’s documentation.
I want users to be able to talk to the program, so for my user input, I used a speech recognition library called p5.speech. It essentially listens to what users are saying via the mic and converts that to strings through Google’s speech-to-text service.
With these two main elements ready, all I needed to do is to put everything together. This is when problems started to show up. Because the bot is operating from a separate file, it needs to make sure everything is loaded before responding. Here, instead of using preload/callback functions, I decided to use async/await functions so that it can run simultaneously with the rest of the sketch.
Final Result
After some debugging and figuring out how async/await functions actually work, I moved on to create my visuals. Since this is a chatbot, I decided to go for a simple and adaptive layout that will adjust to different screen sizes.
The program will start as soon as the user starts speaking. Before the user speaks, the Shiba will patiently wait for user input.
When the user says hi, the Shiba would put out a response in the textbox, with its mouth open.
The chatbot would also randomly ask for the user’s name at the start, and it would memorize and greet you with your name.
The program will patiently listen to whatever you say and encourage you to dig deeper into how you are feeling.
When the user finally reaches a point where they explicitly talk about how they feel, the bot will return with some words of encouragement and prompt the user to return at any time if they need someone to vent.
Try out the sketch here: p5.js chatbot