Inspiration

My little cousin has never been the best at recognizing when people are sad, or understanding how to react to people's words. Even though she is still young, she doesn't quite understand emotions and expressions yet. I wanted to help her learn reactions to words, to teach her that what she says impacts someone and what they say impact her as well. How could I make an emotion teacher for her? This is when I thought of creating Valencia.

What it does

Valencia is an app that is essentially a chatbot, trained to respond to your emotions and your feelings. When you say something mean, Valencia, the character, displays a sad expression. When you say you are feeling super, Valencia becomes happy.

How I built it

I started by coming up with a design for the platform. I wanted it to be a basic, easy to interact with UI as I was making it for my little cousin. I wanted a simple ChatBox, and then Valencia at the top. Once I figured out the code in Python, I converted it to JavaScript. To format the UI, I used HTML and CSS. After designing and coding was completed, I moved onto animating the expressions. I already had Valencia's design courtesy of the class I was taking at UW Seattle, and I animated each expression in Maya 2023. I animated four expressions: content, happy, sad, and shocked. Though these animations took time, they were not challenges.

Challenges I ran into

I had a lot of difficulty fixing the code in JavaScript, HTML, and CSS, as I am not super proficient in these languages. Additionally, displaying the animations was incredibly difficult. There was no way to directly attach the app for animating into the app I was coding, so I had to save the animations as videos. Using Google Drive was the wrong path to display the videos, because it was too slow and couldn't display it properly. Displaying through YouTube led to excessive Ads and other unnecessary videos popping up. Finally, I settled on making GIFs for each animation. This solved the problem perfectly: the animations were playing in a loop, there were no other videos popping up, it didn't take any extra time to display.

Accomplishments that I'm proud of

I am truly so proud of being able to make a difference. As I watched my little cousin use the app and mimic the expressions she saw on Valencia, I realized I had done it. Now, instead of me teaching her how to express emotion, she can learn it from Valencia for the time being. I am so proud of being able to help her even in such a minor way. I'm also proud of learning more about different languages, finding different ways to meet my requirements instead of giving up, and overall being able to put all this together.

What I learned

Through this project, I learned more of JavaScript, HTML, and CSS. I learned how to look for as many options as possible instead of giving up on important features. Plus, since this is the first time making a mobile app, that's a new skill I learned too.

What's next for Valencia

Before I can publish this on a larger platform, I have to improve a lot of its features. This is still a base to improve on, and a lot of Valencia's responses are not accurate. I need to train Valencia to understand a wider scope of responses/entries. Plus, Valencia's emotions need to be broader, as right now they mainly contain levels of happy and sad. If I can, I hope to improve the quality of Valencia's expressions, as right now they don't seem too humane. Overall, it needs some cleaning and touch ups.

Share this project:

Updates