• 

  Onboarding

• 

  Language Selection

• 

  Main Screen

Inspiration

As seniors in high school, we are approaching the season of... college applications! Among our peers, we come across the same chit-chat ever so often. "How are you German classes going?", "Are you doing well on your Korean lessons?", or "Nilai IELTS kamu berapa?" (which translates to "How much did you get for your IELTS exam?"). Interestingly, we realized that most of our peers are going to pursue higher education in a language that might not be their first! We, as members of this challenge, are no exception. I am going to pursue a bachelor's degree from an Indonesian university, and my teammate is going to China. That aside, studies show that the average person spends a little over 6 hours, per day, on the internet. From these two interesting facts, we knew what type of extension we would make: one that helps regular people hammer knowledge of the language they are learning, all while browsing the web.

What it does

Transpage is designed to help language learners integrate their target language into everyday web browsing. By intelligently translating random words, phrases, or sentences on websites, Transpage creates a dynamic learning environment for users. Whether you're reading Reddit, news articles, or YouTube comments, this extension seamlessly introduces your desired language into your routine. With built-in hints, validation features, and AI-driven text selection and translation powered by Google's Gemini Nano APIs, Transpage makes language practice engaging and practical. Turn your browsing time into learning time—learn, practice, and master a new language with Transpage!

How we built it

HTML and Javascript became our choice of medium for this challenge. In accordance with the theme of the challenge, we have most of our features built on top of Chrome, from local storage to the built-in APIs. Specifically for the built-in APIs, we used the Translation API and the Prompt API for our extension.

Challenges we ran into

We ran into several challenges. Most notable is the difficulty of performing context-aware translations for different languages. Not only that, the Chrome built-in APIs are still very much in beta and we had to scour everywhere to find a solution. (Huge thanks for the PSAs by Thomas! It helps a lot)

Accomplishments that we're proud of

We are proud to create a user-friendly language-learning tool that works seamlessly with the browser and powered by the browser itself. We have achieved a certain degree of context-aware translation which means that even in different languages the translations still makes sense.

What we learned

We learned how to create a Chrome extension (something we had never done before) and how to utilize Chrome's new built-in APIs. We learned the nuances of Chrome's messaging system and how to manage state between content scripts, background scripts, and the extension sidebar.

What's next for Transpage

Of course, to apply context-aware translation to every single language. We would also love to work with language professionals to provide the best, most up-to-date knowledge, of languages and linguistics for all people. Not only that, we want to implement a system to track the user's progress, provide personalized learning recommendations, and further gamify the whole experience. This also means to add community features and custom learning paths.

Built With

• chrome
• gemini-nano
• html
• javascript