Inspiration
More than half of the internet’s content is inaccessible to many users because it is written in a language they do not understand. Existing translation tools often require copying text into another app, break webpage layouts, or produce literal translations that miss context.
We built Lingo Page to make the web instantly understandable without forcing users to leave the page they are reading.
Our goal was not simply to connect a browser extension to an AI model. We wanted to build a reliable translation system that could understand, translate, recover, and restore complex webpages without breaking them.
What it does
Lingo Page is an AI-powered browser extension that translates webpage text directly inside the original website while preserving its layout, images, links, buttons, and interactive elements.
Users can:
- Translate an entire webpage in place.
- Preserve the original webpage structure and formatting.
- Restore the original page instantly.
- Retry only the sections that failed.
- Continue interrupted translations without losing completed work.
- See clear explanations when a translation stops or fails. -Translate contextually instead of using basic word-for-word replacement.
- Handle both left-to-right and right-to-left languages.
Unlike basic translation extensions, Lingo Page treats translation as a recoverable workflow. Successful sections remain translated even if another section fails.
How we built it
We built the extension using WXT, React, TypeScript, and Manifest V3
The extension analyzes a webpage’s DOM, identifies translatable text nodes, excludes unsafe or irrelevant content, groups the text into translation batches, and replaces only the original text. It does not rebuild the webpage, which helps preserve the site’s original layout and functionality.
Our backend uses Cloudflare Workers and Hono to:
-Securely manage AI API requests.
- Keep provider API keys outside the browser.
- Validate requests and responses.
- Handle rate limits, timeouts, and partial failures.
- Return structured translation results and diagnostics.
We created a provider-independent architecture that can support Gemini, OpenAI, Anthropic, DeepL, and OpenAI-compatible models without rewriting the core translation system.
One of our hardest challenges was handling partial translation failures. A long webpage may contain hundreds of sections, and one rate limit, timeout, or malformed response should not force the user to restart.
We designed a recovery system that:
-Tracks each translation section independently.
- Preserves completed translations.
- Identifies unfinished sections.
- Reports the reason for failure. -Respects provider retry limits.
- Continues only from the missing content.
We also had to preserve page functionality while supporting different writing directions, especially right-to-left languages.
Accomplishments that we're proud of
We are proud that Lingo Page is more than a simple AI API wrapper.
Our main accomplishments include:
-Translating webpages without rebuilding or breaking them. -Creating resilient partial-translation recovery. -Preserving successful results after failures.
- Restoring the original page without another API request.
- Protecting AI provider keys through a server-side backend.
- Supporting multiple AI providers through one architecture.
- Handling large webpages with up to 1,000 translation sections in testing.
- Building clear diagnostics for rate limits, network errors, invalid responses, and provider failures.
The feature we are most proud of is the recovery system. Most translation tools treat a failed request as a complete failure. Lingo Page keeps the work that succeeded and continues from exactly where it stopped.
What we learned
We learned that building a dependable AI product requires much more than sending text to a language model.
The hardest work was building the systems around the model:
-Extracting the correct content. -Preserving webpage structure. -Preventing unsafe DOM changes. -Validating model responses. -Handling rate limits and network failures. -Recovering without duplicating work. -Giving users visibility into what happened.
We also learned that AI applications should be transparent. Users should know what succeeded, what failed, why it failed, and what action they can take next.
What's next for Lingo Page AI Translation Extension
Our next step is to expand Lingo Page from a webpage translator into a complete AI translation platform.
Planned features include:
- Side-by-side original and translated views.
- Translation styles such as formal, casual, slang, and technical. -Improved support for dynamically updated websites.
- PDF, document, ebook, and subtitle translation with layout preservation. -Image and live-camera translation.
- A translation keyboard for chats and messaging apps.
- Mobile and desktop applications. -Saved translation history and personalization. -Team workspaces for website, app, and game localization.
- Translation quality feedback and analytics.
Our long-term vision is to make any digital content understandable instantly, regardless of its language, format, platform, or location.
Built With
- codex
- gemini
- gpt
- react
- typescript
Log in or sign up for Devpost to join the conversation.