Inspiration
We were driven by the outdated systems that are present today that attempt to effectively translate language. Looking at the few modern language translators that took advantage of the capabilities of current day devices, we realized that even they had some flaws. There was no continuation to each app/website, as soon as the text was translated, the app’s purpose was over. We believed that there is more to learning a language than translating it once and forgetting about it, so we created DefineMe.
What it does
DefineMe uses the OCR algorithm in order to allow users to take a picture or import a picture from their phone through our app. After this, the app then takes the user’s picture and converts it to a text file. Then, the user has the option of which language they want to convert their text to. This text is then sent to our backend written in node.js and using the Microsoft Translator API, converts the text into the language of the user’s choice. To complete the process, the translated text is sent back to the user and in order to further support the user, we added a functionality to the app to add the translated text to a user’s Quizlet set, using the Quizlet API. Along with the app, we also have a landing page that gives the user additional info about the app and its features.
How I built it
We wrote the front end of the landing page in HTML, CSS, and using Bootstrap classes in order to keep the page organized with Bootstrap’s grids. We coded the front-end of the app in Swift, and this includes UI, forms of input, and the OCR algorithm. We then sent this text to a backend and using node.js, we translated the text into the target language, and sent back the text file.
Challenges I ran into
Some of the challenges we ran into while making this project are formatting the landing page properly so that it was aesthetically pleasing, images not being found in both the app and the web, and many logical bugs with the program. One of the hardest bugs to fix was when the Translator API converted the commas separating elements in the array into the target language as well, causing syntax errors when compiled.
Accomplishments that I'm proud of
We are proud of the fact that we took two concepts that are used frequently, translating machines and quizlet’s flashcard concept, and combined them into something completely different, in a way that redefines the methods of handling the learning process. We are also proud of the fact that we were able to seperate the front end and backend for collaboration, and after they were finished, pair them together efficiently. We are also proud of the fact to have a landing page that talks about our app in addition to the app itself.
What I learned
We learned how to use bootstrap grids in css to create simple webpages that are easy for the eyes to absorb, yet look elegant and professional. We learned how to call online APIs into our code and use their functions to achieve tasks. We also learned how to format in HTML, using both css and the .html file to make sure all our images were aligned. Another thing we learned is how to test the front-end and backend when not paired, using simple print statements and hosting on the localhost. We also learned how to implement JavaScript code into an HTML file, through the use of typed.js, an additional feature that adds to the aesthetic quality of the website.
What's next for Define: Me
Although we believe DefineMe has a solid concept that can help millions, we strive for more. We realize that translations don’t only happen from text, they also happen through audio. Because of this, we plan on implementing a audio translation feature, that allows you to speak or play a recording, and the app will then record your voice and write out what your saying to translate it. DefineMe will also have the capability of speaking translated words to the user instead of just displaying the text. In addition, we wish to utilize the leap motion for an improved user navigation through the Quizlet sets they create, for a more convenient learning experience. In order to provide users with more knowledge relating to their language, we wish to use Metacademy’s application code of logistic regression in order to find relatable words to the vocabulary that the user is translating. Examples of this are synonyms and antonyms, which will help vary the user’s vocabulary.
Log in or sign up for Devpost to join the conversation.