LinguaTab

Inspiration

We love learning new languages while browsing—but jumping between tabs, copying text, and opening heavy AI tools breaks the flow. Chrome’s built‑in, on‑device AI opens a unique path: give learners lightweight help (vocab, phrases, and practice) instantly, privately, and right where they are.

What it does

• Helps you learn words and phrases in context as you browse.
• Lets you practice with an on‑device AI tutor (quick drills, phrase usage, and gentle corrections).
• Builds a portable “mini‑deck” of saved words and phrases from any page.
• Checks your browser for built‑in Chrome AI readiness (e.g., LanguageModel, Translator, LanguageDetector) and guides you to enable flags when needed.
• Works privately on‑device whenever possible; no cloud round‑trips for core interactions.

How we built it

The frontend is built with Angular. AI capability detection is handled by a small declarative pipeline that checks for the presence of built-in APIs such as LanguageModel, Translator, and LanguageDetector, probes the availability of LanguageModel, normalizes its status, and displays structured results with details and prerequisites. A Chrome Extension shell (MV3) provides instant access directly from the browser. The data model for storing words and phrases is optimized for fast lookup and future synchronization.

Challenges we ran into

• Evolving Chrome AI surface: names and availability differ by version, flags, and device—needed defensive detection.
• UX for “sometimes available” features: conveying statuses like ready, after-download, or missing prerequisites without confusion.
• Keeping everything snappy and private while staying within extension constraints.

Accomplishments that we're proud of

• A clear, dependency‑aware AI readiness check that’s robust yet simple for users.
• A focused learning workflow: capture, review, and practice words and phrases directly from the page you’re on.
• Private‑first design leveraging on‑device AI when available.

What we learned

• On‑device AI UX needs graceful fallbacks and honest status messaging.
• Small, contextual learning moments beat long study sessions in a browser.
• Declarative checks and the new Angular control flow reduce complexity and bugs.

What's next for LinguaTab

• Smarter practice sessions (spaced repetition, mini‑quizzes, pronunciation checks where supported).
• Richer phrase insights (collocations, examples from the current page, and gentle tutor prompts).
• Optional cloud sync for decks, staying privacy‑aware and opt‑in.
• More languages and locales, plus deeper i18n coverage.

Built With

• angular.js
• tailwindcss
• typescript