Translatable

Translatable is a translation app that allows users to transcribe their speech and translate it to their desired language. This was the first AI wrapper I built before I even knew what an AI wrapper was.

It features a searchable dropdown menu that allows users to quickly select their desired input and output language. Transcriptions are done with Web Speech API while translations are powered with OpenAI.

Purpose of the Project

The purpose of Translatable was to provide a quick and easy way for users to transcribe and translate their speech.

I implemented a searchable dropdown menu for users to quickly find their desired input and output language.

This was my first individual project, and I wanted to find a unique way to implement an API.

The Process

This app can be broken down into three parts in terms of the amount of time and code: speech recognition/transcription, language input/output selection, and OpenAI API translation.

Web Speech API was the first time I had worked with a library. Up until this point I was just building pages with HTML, CSS and a bit of Javascript.

After getting Web Speech API set up, I needed to create a dropdown that allowed users to search the input out output languages. This required some custom code and a bit of creativity since <select> elements have limited styling.

Lastly, since I wanted to deploy this project, I needed to store the API keys on the server side. This was my first foray into the back-end as I had to learn how to use Express to create a server.

Problems

The first issue I encountered was with Web Speech API. The voice recordings were a bit glitchy, where the recording would sometimes terminate prematurely, or conversely, continue recording even after I had manually stopped it.

To fix this issue, I implemented a solution that involved creating multiple shorter recordings and stitching them together to get the final transcription.

Lesson Learned

This was the first time I implemented AI in my project. Learning how to set up and prompt OpenAI opened the door for implementation in upcoming projects.

It was also the first time I had dealt with any back-end technology, and in doing so sparked my curiosity to dive deeper into this area.