feat: Add LingoLens App for Community Sprint #1922
Conversation
📝 WalkthroughWalkthroughIntroduces a new "Lingo-lens" demo application in the community directory showcasing Lingo.dev's translation capabilities. The full-stack application combines a React frontend with Tesseract-based OCR, automated script detection, and an Express backend proxy to Lingo.dev's API, enabling image-to-text extraction and translation. Changes
Sequence DiagramsequenceDiagram
actor User
participant ReactApp as React App<br/>(Frontend)
participant Tesseract as Tesseract.js<br/>(OCR)
participant Backend as Express Server<br/>(server.js)
participant LingoAPI as Lingo.dev API
User->>ReactApp: Upload image
ReactApp->>Tesseract: Detect script (Phase 1)
Tesseract-->>ReactApp: Detected script type
ReactApp->>Tesseract: Extract text (Phase 2)<br/>with detected language
Tesseract-->>ReactApp: Extracted text
ReactApp->>Backend: POST /api/translate<br/>(text, sourceLang, targetLang)
Backend->>LingoAPI: localizeText(text,<br/>sourceLocale, targetLocale)
LingoAPI-->>Backend: Translated text
Backend-->>ReactApp: Translation result
ReactApp->>User: Display extracted &<br/>translated text
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 🧪 Unit Test Generation v2 is now available!We have significantly improved our unit test generation capabilities. To enable: Add this to your reviews:
finishing_touches:
unit_tests:
enabled: trueTry it out by using the Have feedback? Share your thoughts on our Discord thread! Comment |
![coderabbitai[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@community/Lingo-lens/README.md`:
- Around line 25-35: Remove the duplicated "## 🛠️ Setup Instructions" and the
duplicated "### Prerequisites" subsection (including the repeated bullet list
for Node.js and Lingo.dev API Key) so only one setup section remains; search for
the headings "## 🛠️ Setup Instructions" and "### Prerequisites" in README.md
and delete the duplicate block that was copy/pasted.
In `@community/Lingo-lens/src/App.jsx`:
- Around line 69-85: The OCR worker created via Tesseract.createWorker in the
OCR phase can leak if worker.recognize(image) throws; modify the block around
createWorker/recognize/terminate so the worker is always terminated (use
try/finally): create the worker with Tesseract.createWorker(ocrLang), call await
worker.recognize(image) inside a try block and assign result.data.text to
currentText, and in the finally ensure await worker.terminate() is called;
preserve existing error handling that logs the error, sets setExtractedText,
setIsProcessing(false) and setProgress("Failed") in the catch for ocrError (or
rethrow after termination).
- Around line 46-66: The detector worker created via Tesseract.createWorker is
not always terminated because detector.terminate() is only called after a
successful detect; move the lifecycle management into a try/finally: create the
worker (detector) before the try, call detector.detect(image) inside the try,
and in the finally always call detector.terminate() (guarding for detector !==
undefined/null) to ensure the worker is cleaned up even if detector.detect
throws; keep the existing catch for setting ocrLang to 'eng' but perform
termination in finally.
- Around line 17-31: handleImageUpload currently creates a new object URL
without revoking the previous one, causing a leak; before calling
setImage(URL.createObjectURL(...)) revoke the existing image URL (the current
image variable) if present (e.g., if (image) URL.revokeObjectURL(image)), then
create and set the new URL and reset state. Update handleImageUpload to revoke
the prior URL (referencing handleImageUpload, image, setImage) so the cleanup
effect and manual revoke both prevent leaks.
In `@community/Lingo-lens/src/services/lingo.js`:
- Around line 9-10: The code currently maps sourceLang through langMap and
silently defaults to 'en' via sourceCode, which can cause silent wrong
translations; change this to compute a finalSourceCode: if sourceLang === 'auto'
then finalSourceCode = 'auto'; else if langMap[sourceLang] exists use that
value; otherwise do not default to 'en'—either set finalSourceCode =
undefined/null to allow remote auto-detection or throw/log an explicit error;
then use finalSourceCode (not sourceCode) in the request body so unknown
languages aren't silently mapped to 'en' (referencing sourceLang, langMap,
sourceCode, finalSourceCode and the request body).
🧹 Nitpick comments (4)
community/Lingo-lens/server.js (3)
14-17: Consider failing fast when the API key is missing.The server logs a warning but continues initialization, which will cause confusing errors on the first translation request. Also,
VITE_prefix is conventionally for client-exposed variables in Vite; consider renaming toLINGO_API_KEYfor server-side usage.Suggested improvement
const apiKey = process.env.VITE_LINGO_API_KEY; -if (!apiKey) console.warn("WARNING: VITE_LINGO_API_KEY is missing in .env file"); +if (!apiKey) { + console.error("ERROR: LINGO_API_KEY is missing in .env file"); + process.exit(1); +} const engine = new LingoDotDevEngine({ apiKey });
19-44: Add input validation for request body parameters.The endpoint destructures
text,sourceLang, andtargetLangwithout validating their presence. Missing or invalid values could cause unclear errors from the SDK. Basic validation improves robustness for this demo.Proposed validation
app.post('/api/translate', async (req, res) => { try { const { text, sourceLang, targetLang } = req.body; + + if (!text || typeof text !== 'string') { + return res.status(400).json({ error: 'Missing or invalid "text" parameter' }); + } + if (!targetLang || typeof targetLang !== 'string') { + return res.status(400).json({ error: 'Missing or invalid "targetLang" parameter' }); + } console.log(`Processing: ${sourceLang} -> ${targetLang}`);
41-44: Avoid exposing raw error messages to clients.Returning
error.messagedirectly could leak sensitive information (e.g., API key issues, internal paths). Consider returning a generic message while logging the full error server-side.Suggested improvement
} catch (error) { console.error("Server Error:", error); - res.status(500).json({ error: error.message }); + res.status(500).json({ error: 'Translation failed. Please try again.' }); }community/Lingo-lens/eslint.config.js (1)
16-24: RedundantecmaVersionspecification.
ecmaVersionis set both at thelanguageOptionslevel (2020) and withinparserOptions('latest'). TheparserOptions.ecmaVersiontakes precedence for parsing. Consider removing the redundant outer one for clarity.Suggested cleanup
languageOptions: { - ecmaVersion: 2020, globals: globals.browser, parserOptions: { ecmaVersion: 'latest',
|
@trivedikavya please address all the comments, thanks! |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@community/README.md`:
- Around line 32-36: The README uses the wrong directory casing
("community/lingo-lens") which will break on case-sensitive filesystems; update
the installation steps to use the correct directory name "community/Lingo-lens"
wherever referenced (e.g., the cd command in the "1. Installation" section) and
scan the README for any other occurrences of "lingo-lens" to normalize to
"Lingo-lens".
🧹 Nitpick comments (1)
community/Lingo-lens/server.js (1)
14-18: Rename server-side secret to avoid confusion with client-exposed variables.The
VITE_prefix signals to developers that a variable is safe to expose to the client. While no client code currently references this key, using this prefix for a server-only secret is misleading and risks accidental exposure if client code is added later. Rename toLINGO_API_KEYand update the README/.env instructions to make the server-only intent clear.-const apiKey = process.env.VITE_LINGO_API_KEY; +const apiKey = process.env.LINGO_API_KEY; if (!apiKey) { - console.error("ERROR: VITE_LINGO_API_KEY is missing in .env file. Server exiting."); + console.error("ERROR: LINGO_API_KEY is missing in .env file. Server exiting."); process.exit(1); }Update README:
LINGO_API_KEY=lin_your_actual_api_key_here
✅ Actions performedComments resolved. |
There was a problem hiding this comment.
@sumitsaurabh927 sir I have updated the environment variable configuration to follow security best practices. I renamed VITE_LINGO_API_KEY to LINGO_API_KEY in both the .env file and server.js. This ensures the API key remains a server-side secret and is not exposed to the client-side browser.
trivedikavya
left a comment
trivedikavya
left a comment
There was a problem hiding this comment.
@sumitsaurabh927 sir I have resolved the requested resource and system fixes:
-
Resource Management: Implemented try...finally blocks in App.jsx to ensure Tesseract workers are always terminated and added logic to revoke previous object URLs to prevent memory leaks.
-
Path Casing: Normalized all directory references to Lingo-lens in the README.md to ensure compatibility with case-sensitive filesystems.
|
Great project Kavya. Two minor suggestions:
But these aside, the project looks great! |
|
@trivedikavya please resolve the failing pr check! |
|
Also, your pnpm workspace and readme should be inside the project directory. |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@community/Lingo-lens/README.md`:
- Around line 31-45: Fix the case-sensitive path and heading level in the
README: update the installation step to use the exact directory name
"community/Lingo-lens" (e.g., change cd community/lingo-lens to cd
community/Lingo-lens) so the path matches the repository, and change the "## 3.
Running the App" heading to "### 3. Running the App" to match the preceding step
levels; update any references to LINGO_API_KEY example if needed to remain under
the same heading.
In `@community/Lingo-lens/src/App.jsx`:
- Around line 24-33: handleImageUpload currently revokes the existing object URL
and accepts new uploads even while OCR is running, which can break in-flight
processing; update handleImageUpload to early-return when isProcessing is true
(or check a processing flag) so new uploads are ignored during processImage, and
move any URL.revokeObjectURL(image) logic to run only when not processing (or
after processImage completes) to avoid revoking a URL that processImage is still
using; also ensure the file input element is disabled while isProcessing so user
cannot trigger uploads while OCR/translation is active.
- Around line 97-103: The finally block currently sets setProgress("Done!") even
on failure; update the control flow so success and failure set progress
differently: inside the catch for transError call setProgress("Failed") (or a
message including transError.message) and leave setIsProcessing(false) in
finally, while moving setProgress("Done!") into the successful path after the
translation completes (the try block). Refer to setTranslatedText,
setIsProcessing, setProgress and the transError catch to implement these
changes.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@community/Lingo-lens/README.md`:
- Line 39: Update the README reference to use the correct case for the directory
name: change the phrase "lingo-lens directory" to "Lingo-lens" so it matches the
actual directory name used elsewhere (e.g., as shown earlier in the README) and
avoids issues on case-sensitive filesystems.
trivedikavya
left a comment
trivedikavya
left a comment
There was a problem hiding this comment.
@sumitsaurabh927 sir I have updated the LingoLens application with the following changes to resolve the current blocking issues:
- Fixed pnpm Workspace Issue: Resolved the ERR_PNPM_OUTDATED_LOCKFILE error by syncing the root pnpm-lock.yaml and updating the root pnpm-workspace.yaml to include the ./community/* directory.
- Hero Text CSS Fix: Corrected the CSS issue where the 'g' in the "Lingo Lens" hero text appeared cut off. This was adjusted by [mention briefly if it was line-height, padding, or overflow].
- Project Documentation: Updated the package.json with the correct dependencies for react, vite, and tesseract.js to support the new advanced features.
- The issues or comments Given By coderabbit and Other issues Are Also Solved
- Note on Video Demo: The previous video has been marked as unlisted because it is now outdated. I am currently recording a new demo video that covers all the recently added advanced features. I will update the link as soon as it's ready.
New Video Link Now It is Ready !!
Looking forward to your feedback!
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@community/Lingo-lens/src/App.jsx`:
- Line 95: When sourceLang is 'auto' the detected OCR language (ocrLang) should
be forwarded to the translation call instead of leaving sourceLang as 'auto';
update the call to translateText(currentText, sourceLang, targetLang) so that it
passes ocrLang when sourceLang === 'auto' (e.g., compute effectiveSource =
sourceLang === 'auto' ? ocrLang : sourceLang and call translateText(currentText,
effectiveSource, targetLang)), ensuring translateText gets the detected
script/language for better accuracy.
In `@community/Lingo-lens/src/index.css`:
- Around line 1-3: Add a Biome lint exception so local linting doesn't flag
Tailwind directives: either add inline Biome ignore comments above the `@tailwind`
lines in community/Lingo-lens/src/index.css (e.g., /* biome-disable
noUnknownAtRules */ before the `@tailwind` base/components/utilities and /*
biome-enable noUnknownAtRules */ after if desired) or update the root biome.json
to allow the Tailwind at-rules by adding "noUnknownAtRules": { "allowAtRules":
["tailwind", "apply", "screen", "variants"] } (or similar) under the CSS rules
configuration to whitelist the Tailwind directives.
🧹 Nitpick comments (6)
community/Lingo-lens/package.json (1)
6-11: Consider adding a script to start the backend server.The current scripts only cover frontend tooling. Since the app requires running
node server.jsseparately (as noted in the PR description), adding a convenience script would improve developer experience.💡 Suggested improvement
"scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "server": "node server.js" },This allows running
npm run serverinstead ofnode server.js.community/Lingo-lens/eslint.config.js (2)
16-23: RedundantecmaVersionsettings may cause confusion.
ecmaVersionis specified as2020inlanguageOptions(Line 17) and as'latest'inparserOptions(Line 20). The nestedparserOptions.ecmaVersiontakes precedence, making the outer setting ineffective. Consider removing the redundant declaration for clarity.Suggested fix
languageOptions: { - ecmaVersion: 2020, globals: globals.browser, parserOptions: { ecmaVersion: 'latest', ecmaFeatures: { jsx: true }, sourceType: 'module', }, },
25-27: ThevarsIgnorePatternis overly permissive.The pattern
^[A-Z_]ignores any variable starting with an uppercase letter OR an underscore. This will suppress warnings for all React components (capitalized), constants, and any underscore-prefixed variables—potentially hiding genuine unused variable issues.Consider narrowing it to only ignore unused imports (e.g., React in older JSX transforms) or explicitly unused parameters:
Suggested fix
rules: { - 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + 'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }], },community/Lingo-lens/server.js (2)
11-12: Consider restricting CORS origin for production use.
app.use(cors())allows requests from any origin. While acceptable for a local development demo, consider documenting this or adding origin restrictions if deployed beyond localhost.Example for restrictive CORS
-app.use(cors()); +app.use(cors({ + origin: process.env.ALLOWED_ORIGIN || 'http://localhost:5173' +}));
27-35: Missing validation forsourceLangparameter.While
textandtargetLangare validated,sourceLangis used without validation. Invalid values (other than'auto'or supported locale codes) will be passed directly to the SDK and may cause unexpected behavior or errors.Suggested fix
if (!targetLang || typeof targetLang !== 'string') { return res.status(400).json({ error: 'Missing or invalid "targetLang" parameter' }); } + + const validSourceLangs = ['auto', 'en', 'ja', 'zh', 'fr', 'es', 'hi']; + if (sourceLang && !validSourceLangs.includes(sourceLang)) { + return res.status(400).json({ error: 'Invalid "sourceLang" parameter' }); + } console.log(`Processing: ${sourceLang} -> ${targetLang}`);community/Lingo-lens/src/App.jsx (1)
93-105: Inconsistent indentation in translation phase.Lines 93-105 use 2-space indentation at the block level while the rest of the function uses 6-space indentation. This appears to be an unintended formatting issue.
Suggested fix
// PHASE 3: TRANSLATE try { - setProgress(`Translating to ${targetLang.toUpperCase()}...`); - const translation = await translateText(currentText, sourceLang, targetLang); - setTranslatedText(translation); - setProgress("Done!"); // Move this here from the finally block -} catch (transError) { - console.error(transError); - setTranslatedText("Translation Failed: " + transError.message); - setProgress("Failed"); // Add this line -} finally { - setIsProcessing(false); - // Remove setProgress("Done!") from here -} + setProgress(`Translating to ${targetLang.toUpperCase()}...`); + const translation = await translateText(currentText, sourceLang, targetLang); + setTranslatedText(translation); + setProgress("Done!"); + } catch (transError) { + console.error(transError); + setTranslatedText("Translation Failed: " + transError.message); + setProgress("Failed"); + } finally { + setIsProcessing(false); + }
- pass detected ocrLang to translation service for better performance - add biome-ignore directives to index.css for Tailwind at-rules - update changeset to be empty as requested by maintainers
trivedikavya
left a comment
trivedikavya
left a comment
There was a problem hiding this comment.
@sumitsaurabh927 Sir I improve translation accuracy and resolve local linting issues
- pass detected ocrLang to translation service for better performance
- add biome-ignore directives to index.css for Tailwind at-rules
- update changeset
running checks; please wait :) |
🚀🥳 |
2 participants
Hi Lingo.dev Team! 👋
I am excited to submit LingoLens for the Community Sprint / Subreddit Launch! 🚀
LingoLens is a full-stack OCR and Translation application designed to showcase the power of the Lingo.dev SDK for real-time user content. It allows users to upload an image of text (like a receipt or document), extracts the text via browser-side OCR (Tesseract.js), and instantly localizes it using the Lingo.dev engine.
🎥 Demo Video
I have recorded a full walkthrough of the app in action:
▶️ Watch the Demo on YouTube
separate repo link
🚀 Lingo.dev Features Highlighted
This demo highlights a "creative, efficient, and powerful" way to use Lingo.dev by combining it with AI vision tools:
lingo.dev/sdkinto a modern React environment.lingo.localizeTextfor dynamic, user-generated content (instead of just static site text).server.js) to handle API authentication securely, solving CORS issues common in frontend-heavy apps.🛠️ How to Run Locally
Detailed instructions are in the
README.md, but here is the quick start:node server.js(Port 3001)npm run dev(Port 5173)test.pngincluded in the repo to see the translation pipeline immediately.Submission for: Subreddit Launch & Community Sprint
Related Issue: #1761
Closes #1761
Summary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.