Skip to content

Conversation

@trivedikavya
Copy link

@trivedikavya trivedikavya commented Jan 28, 2026

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:

  • SDK Integration: Seamlessly integrates lingo.dev/sdk into a modern React environment.
  • Real-time Localization: Demonstrates lingo.localizeText for dynamic, user-generated content (instead of just static site text).
  • Secure Backend Proxy: Implements a Node.js/Express bridge (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:

  1. Backend: node server.js (Port 3001)
  2. Frontend: npm run dev (Port 5173)
  3. Test: Upload the provided test.png included 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

    • Lingo-lens: image-based translation app with upload/drag-and-drop, automatic script detection, OCR extraction, translation, and progress/results UI.
  • Documentation

    • Comprehensive README with demo/testing links, prerequisites, installation, configuration, and end-to-end usage instructions.
  • Chores

    • Project scaffolding: tooling, build/lint/configuration, styles, and a local translation backend; added ignore patterns for development artifacts.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link

coderabbitai bot commented Jan 28, 2026

📝 Walkthrough

Walkthrough

Adds a new community demo "Lingo-lens": a React + Vite frontend with Tailwind/CSS, Tesseract.js OCR/script detection, an Express proxy using Lingo.dev for translation, project configs, and documentation.

Changes

Cohort / File(s) Summary
Project Config & Tooling
community/Lingo-lens/.gitignore, community/Lingo-lens/package.json, community/Lingo-lens/pnpm-workspace.yaml, community/Lingo-lens/vite.config.js, community/Lingo-lens/tailwind.config.js, community/Lingo-lens/postcss.config.js, community/Lingo-lens/eslint.config.js
Adds gitignore, package manifest, PNPM workspace, and tooling configs for Vite, Tailwind, PostCSS, and ESLint; sets dependencies and dev scripts.
Documentation & Changeset
community/Lingo-lens/README.md, .changeset/little-bugs-clap.md
Adds README with setup/run instructions and a changeset recording the new demo and minor CSS fix.
Frontend Entry & Bootstrap
community/Lingo-lens/index.html, community/Lingo-lens/src/main.jsx
Adds HTML entry and React bootstrap using createRoot + StrictMode.
Frontend App & Styles
community/Lingo-lens/src/App.jsx, community/Lingo-lens/src/App.css, community/Lingo-lens/src/index.css
Implements image upload UI, script detection, OCR, translation flow, state handling, and styles/animations; exports default App component.
Client Translation Service
community/Lingo-lens/src/services/lingo.js
Adds translateText(...) which maps language codes and POSTs to local /api/translate, returning translation or throwing on error.
Backend Server
community/Lingo-lens/server.js
Adds Express server (port 3001) requiring LINGO_API_KEY, exposes POST /api/translate, validates input, invokes Lingo.dev engine.localizeText, and returns JSON responses.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Frontend as React Frontend
    participant OCR as Tesseract.js
    participant Server as Express Server
    participant Lingo as Lingo.dev API

    User->>Frontend: Upload image + select target language
    Frontend->>OCR: Detect script (OSD)
    OCR-->>Frontend: Script/lang hint
    Frontend->>OCR: Perform OCR (lang)
    OCR-->>Frontend: Extracted text
    Frontend->>Server: POST /api/translate (text, sourceLang, targetLang)
    activate Server
    Server->>Lingo: localizeText(text, { sourceLocale, targetLocale })
    Lingo-->>Server: Translated text
    deactivate Server
    Server-->>Frontend: { translation }
    Frontend->>User: Display OCR text and translation
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • vrcprl

Poem

🐰 I hopped through pixels, sniffed each script and sign,

OCR nibbled letters, Lingo turned them fine.
From upload to translation my tiny lens did bend—
Snap, translate, display: a rabbit-made friend. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3
❌ Failed checks (3 warnings)
Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description covers the purpose, features, and running instructions, but does not follow the required template structure with explicit Summary, Changes, Testing, Visuals, and Checklist sections. Restructure the description to match the template: add a concise Summary section, list Changes as bullet points, include Testing section with checkboxes, add Visuals section if applicable, and complete the Checklist with changeset and breaking changes confirmations.
Out of Scope Changes check ⚠️ Warning Most changes are in-scope (Lingo-lens app under /community), but the .changeset/little-bugs-clap.md file marking unrelated packages as patch updates appears to be out-of-scope for this community app submission. Remove the changeset file or ensure it only documents the Lingo-lens addition; clarify whether the patch updates to other packages are intentional and required for this PR.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding LingoLens, a full-stack OCR and translation demo app to the community directory for the Community Sprint.
Linked Issues check ✅ Passed The PR successfully meets all coding requirements from issue #1761: the app is added under /community/Lingo-lens with a README explaining functionality, local setup instructions, and highlighted Lingo.dev SDK features including SDK integration, real-time localization, and secure backend proxy.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 to LINGO_API_KEY for 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, and targetLang without 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.message directly 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: Redundant ecmaVersion specification.

ecmaVersion is set both at the languageOptions level (2020) and within parserOptions ('latest'). The parserOptions.ecmaVersion takes precedence for parsing. Consider removing the redundant outer one for clarity.

Suggested cleanup
     languageOptions: {
-      ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
         ecmaVersion: 'latest',

@sumitsaurabh927
Copy link
Contributor

@trivedikavya please address all the comments, thanks!

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 to LINGO_API_KEY and 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

@coderabbitai
Copy link

coderabbitai bot commented Jan 29, 2026

✅ Actions performed

Comments resolved.

Copy link
Author

@trivedikavya trivedikavya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Author

@trivedikavya trivedikavya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

@sumitsaurabh927
Copy link
Contributor

Great project Kavya.

Two minor suggestions:

  • In demo, it would be better if you can show that you can switch languages and read it in multiple languages. Currently, you only showed English. Also, why is the video unlisted? Any reason? I'm curious.
  • The 'g' in Hero text Lingo Lens looks cut off. Not sure if it just a font thing or a minor CSS issue.

But these aside, the project looks great!

@sumitsaurabh927
Copy link
Contributor

@trivedikavya please resolve the failing pr check!

@sumitsaurabh927
Copy link
Contributor

Also, your pnpm workspace and readme should be inside the project directory.

@sumitsaurabh927 sumitsaurabh927 dismissed their stale review January 29, 2026 05:33

misplaced files

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

@trivedikavya trivedikavya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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!

@sumitsaurabh927
Copy link
Contributor

@coderabbitai full review

@coderabbitai
Copy link

coderabbitai bot commented Jan 29, 2026

✅ Actions performed

Full review triggered.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.js separately (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 server instead of node server.js.

community/Lingo-lens/eslint.config.js (2)

16-23: Redundant ecmaVersion settings may cause confusion.

ecmaVersion is specified as 2020 in languageOptions (Line 17) and as 'latest' in parserOptions (Line 20). The nested parserOptions.ecmaVersion takes 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: The varsIgnorePattern is 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 for sourceLang parameter.

While text and targetLang are validated, sourceLang is 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);
+    }

// PHASE 3: TRANSLATE
try {
setProgress(`Translating to ${targetLang.toUpperCase()}...`);
const translation = await translateText(currentText, sourceLang, targetLang);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Detected language not passed to translation when using auto-detect.

When sourceLang is 'auto', the script detection phase determines ocrLang (e.g., 'jpn'), but translateText still receives 'auto' instead of the detected language. This forces the Lingo.dev SDK to re-detect the language unnecessarily.

Consider passing ocrLang to translateText for better accuracy and efficiency:

Suggested fix
-  const translation = await translateText(currentText, sourceLang, targetLang);
+  const translation = await translateText(currentText, ocrLang, targetLang);

This ensures the detected script/language from Tesseract is forwarded to the translation service.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const translation = await translateText(currentText, sourceLang, targetLang);
const translation = await translateText(currentText, ocrLang, targetLang);
🤖 Prompt for AI Agents
In `@community/Lingo-lens/src/App.jsx` at 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.

Comment on lines +1 to +3
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find Biome configuration files and CI configuration
echo "=== Looking for Biome configuration files ==="
find . -name "biome.json*" -o -name ".biomeignore" 2>/dev/null | head -20

echo -e "\n=== Looking for CI configuration ==="
find . -path "./.git" -prune -o -type f \( -name "*.yml" -o -name "*.yaml" \) -print 2>/dev/null | grep -E "(\.github|\.gitlab|\.circleci|\.travis)" | head -20

echo -e "\n=== Checking repository root for config files ==="
ls -la | grep -E "(biome|package\.json|tsconfig|eslint)" || echo "No matching config found at root"

Repository: lingodotdev/lingo.dev

Length of output: 828


🏁 Script executed:

#!/bin/bash
# Search for any Biome configuration references in the codebase
echo "=== Searching for Biome config references ==="
rg "noUnknownAtRules|@tailwind" --max-count 20 || true

echo -e "\n=== Checking if Biome is mentioned in package.json or similar ==="
rg "biome|css|lint" package.json || true

Repository: lingodotdev/lingo.dev

Length of output: 4265


🏁 Script executed:

#!/bin/bash
# Explore the Lingo-lens directory structure
echo "=== Lingo-lens directory structure ==="
find community/Lingo-lens -type f -name "*.json" -o -name "*.config.*" 2>/dev/null | head -20

Repository: lingodotdev/lingo.dev

Length of output: 329


🏁 Script executed:

#!/bin/bash
# Read the root biome.json
echo "=== Root biome.json ==="
cat biome.json

echo -e "\n=== Community video-translator biome.json ==="
cat community/video-translator/biome.json

echo -e "\n=== pr-lint.yml workflow ==="
cat .github/workflows/pr-lint.yml

Repository: lingodotdev/lingo.dev

Length of output: 2927


🏁 Script executed:

#!/bin/bash
# Check if Lingo-lens directory has any Biome-related config or ignore files
echo "=== Checking for Biome references in Lingo-lens ==="
rg -i "biome" community/Lingo-lens/ || echo "No Biome config in Lingo-lens"

echo -e "\n=== Check postcss.config.js ==="
cat community/Lingo-lens/postcss.config.js

echo -e "\n=== Check tailwind.config.js ==="
cat community/Lingo-lens/tailwind.config.js

Repository: lingodotdev/lingo.dev

Length of output: 2546


Biome CSS linting will fail locally on @tailwind directives.

The root biome.json has CSS linting enabled with recommended rules, which include noUnknownAtRules. When developers run Biome locally, @tailwind directives will be flagged as errors. Add inline ignore comments or configure Biome to allow Tailwind directives.

Note: The CI workflow (pr-lint.yml) does not currently run Biome linting, so this issue only affects local development.

🧩 Option A — inline ignore comments
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
+@tailwind base;
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
+@tailwind components;
+/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
+@tailwind utilities;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@tailwind base;
@tailwind components;
@tailwind utilities;
/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
`@tailwind` base;
/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
`@tailwind` components;
/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind directives */
`@tailwind` utilities;
🧰 Tools
🪛 Biome (2.3.13)

[error] 1-1: Unexpected unknown at-rule: tailwind

tailwind is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
See MDN web docs for a known list of at-rules.
To fix this issue, consider removing the unknown at-rule.

(lint/suspicious/noUnknownAtRules)


[error] 2-2: Unexpected unknown at-rule: tailwind

tailwind is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
See MDN web docs for a known list of at-rules.
To fix this issue, consider removing the unknown at-rule.

(lint/suspicious/noUnknownAtRules)


[error] 3-3: Unexpected unknown at-rule: tailwind

tailwind is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.
See MDN web docs for a known list of at-rules.
To fix this issue, consider removing the unknown at-rule.

(lint/suspicious/noUnknownAtRules)

🤖 Prompt for AI Agents
In `@community/Lingo-lens/src/index.css` around lines 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build Demo Apps, Integrations etc & Win Exclusive Lingo.dev Swag!

2 participants