AIvin

AIvin is a sentient chatbot. Talk with him, annoy him, and get to know him

Comment

Inspiration

I built a similar project in the past, back in my first year of studying IT. Our class assignment was to program a simple chatbot that responds to the user appropriately. It was the first ever coding project I started on, and it's my most memorable one, as I spent months working on it. I applied new features I learnt online into the chatbot as it was a very efficient way of learning for me, and at the end of my submission, it ended up being less chatbot and more of an experience. Unfortunately, I lost my source code to that, but I wanted to recreate that experience for others to try out, so I built this up.

What it does

It's a simple chatbot that reacts to you and whatever you do. You can poke him too, for funsies. Just make sure to not go overboard, you wouldn't want others to treat you the same way. There are other features, however, I'd like for you to not read the rest of the post if you don't want yourself to be spoiled (if you haven't watched the video yet). It's a surprise after all!

How we built it

I built the project with React Native, bootstrapped by Expo. I use react-native-gifted-chat for the chat function, which made things exceedingly simple. I used mobx-state-tree for a quick-and-easy global state as well as expo-av for sound and expo-speech for text-to-speech (TTS) functions.

Challenges we ran into

I would have to say that playing audio and text to speech was probably the trickiest part. I initially had difficulty trying to stop the TTS mid-sentence, so I built a recursive function that iterates through a list of text to say for TTS and queues them up accordingly, but I also wanted particular functions to trigger at certain dialogues. That's where the another problem comes in, I couldn't stop audio inside the triggered function as it probably had no access to the audio within the function's scope. After tinkering for a while, I figured out that I just had to rewrite the function, as well as pre-load the audio within the parent component and pass it into the child component. That way, the function would have access to the pre-loaded audio and could thus play and stop it at anytime.

Additionally, there was internal conflict within me when trying to go for a clean solution, vs a hacky one. I had a feature that required a couple of state variables for each feature component. My plan was to create a function that could iterate through however many feature components I wanted and populate the state accordingly. However, due to state's asynchronous nature, I was unable to update the state properly, instead only updating one part of the state. I eventually opted for the hacky solution, because the cleaner solution would end up costing me too much time.

Accomplishments that we're proud of

I struggled with designing the UI at first. It was complicated to achieve what I envisioned as it required structured CSS layouts, which I didn't have time to do. So I just hacked it out using absolute positioning and ended up having a picture-perfect design that I feel will definitely capture the user's attention.

At the end of this project, I managed to accomplish everything I envisioned the project to be capable of in version 1.0, and is hopefully able to give the user an impactful experience. Of course, there were many other features that I intended, and intend to add, I'm proud that I was able to avoid this inner urge to feature-creep myself and cause myself to waste too much time.

I'm also pleased with the video that I created. Though I had little experience with video editing, I still managed to edit out a video that is very close to what I had imagined the project trailer to be.

What we learned

I learnt a whole lot on audio and TTS in Expo and will definitely refer back to this project. The video editing skills I picked up will be handy in the long run, especially when I participate in future hackathons.

I used to unconsciously feature-creep myself, and as a result, become unable to push out an MVP on time. I managed to avoid the same fate this time, and worked on only the core features. As a result, I had enough time to edit the video properly, do all the final touch-ups and reflect on my thoughts clearly

What's next for AIvin

I will publish this onto the App Store, however AIvin is by no means finished. It still has at least a couple more features to include, such as an additional route and support for Android. And of course, when I finally grasp AI in React Native, I can actually make AIvin become a truly intelligent chatbot.

Built With

Share this project:

Updates