(Work In Progress) Hobby Project 1 - EmojiStory

This is the first substantial hobby project that I have created and worked on.

I had already gotten the idea to create this back when I was working on my last exam project at Noroff. On my exam project, I used a component/tool called EmojiMart to add an emoji picker kind of element on the website, kind of like you have on phones.

While working with this tool and going over the documentation, I discovered that it had some more complex functionality that might be useful. This tool had headless search functionality, where you could basically search and receive emojis under the hood, without having to use the actual physical picker element.

This functionality gave me the idea to create a cool little converter that turns sentences into co-responding emojis, that make sense.

Just turning words into emojis is extremely simple and easy to do. But turning a whole sentence into emoji form, where all the emojis as a whole represent the whole sentence becomes a bit harder (a lot).

This project has had two iterations that were substantially different and there had been so much work and thought put into the first iteration, that I decided to simply separate them and keep the first one to showcase the work that had been put into it and how the project has evolved. The first version of the project (where development stopped as soon as I discovered a better solution), can be found at the link below.

In the first iteration of the project, I worked with the headless search functionality of emojimart, to pass keywords and get back the co-responding emoji.

I would take a sentence, and split it up into all the seperate words. These words would then get passed through the headless search. If a certain word would have matching emojis, they would get saved (if a word had several emojis, one would get picked at random).

If a word did not return any matching emojis, I made use of the Datamuse API. This is a language/words API that has tons of great language-related functionality. You would take the word that has no matching emojis, make an API call to the Datamuse API endpoint for similar words, and get back a list of similar words, ordered by most similar to least similar.

This list of similar words, would then again get ran through the emojimart, headless search untill we found a word that had matching emojis. This emoji would then get saved into our emoji sentence.

Our functionality so far worked alright. It was decent but nowhere near perfect. For example, prepositions like "to" "on" etc. would logically not be able to co-responding to emojis like a right arrow or a finger pointing up etc.

The end solution for this in the first iteration, was to have an override function, and a list of overrides. So if a sentence includes an override word like "to", then it results a random emoji from a list of corresponding override emojis. This worked fairly well for the words that were listed in the override list, but it ended up not being a solution that in any realistic manner could be scaled. It would simply have taken far too much work to make a list for every word that should be overwritten.

The above realization prompted me to start looking into different solutions for my override problem. I had in the earlier days of my project toyed with the idea of using AI.

I started looking into and researching ChatGPT, as it would seem like a logical and good use case for it. Since OpenAI provides a very nice online test environment for ChatGPT on their website, I could quickly and easily test if ChatGPT could solve this problem for me.

I created a prompt with examples of what I was looking for and did the needed tests which showed that ChatGPT was going to be perfect for the job.

Initially, I started implementing ChatGPT functionality to simply cover the override words, but quickly realized that using ChatGPT for the whole emoji converting functionality would yield better results and be a far less complex and simpler implementation. This was when I decided to save my first iteration as the version 1 of EmojiStory, and then create a clone where the whole functionality was based on ChatGPT as the version 2 of EmojiStory.

Due to the fact that OpenAI deletes your API keys if you do not host them secretly, I had to figure out a way to host a local implementation of ChatGPT as a backend. My first plan was to try and use AWS Lambda, and do a serverless implementation where the ChatGPT backend was hosted separately and would spin up to return an answer to a prompt, but that turned out to be a little out of my expertise as my backend and architecture knowledge is limited.

The problem turned out to be solved fairly easily with the NextJs integrated backend API. I simply ran the ChatGPT backend in the same project as my frontend on NextJs. The actual calls to the OpenAI API would be done in this backend, and my API keys would not be exposed.

Since OpenAI provides a set amount of credits each month, and I was considering turning this into an actual online tool, I looked into rate-limiting requests that users could make, so a single person could not maliciously use up all the credits instantly. The rate limiting was implemented with the help of Upstash.