feat: Add LingoLens App for Community Sprint (#1922)

* Lingo-lens

* Unwanted Folder Created

* Advance Features Added

* test: verification

* Testing

* Going to re add Lingo-lens

* Lingo-lens

* feat: add changeset for LingoLens

* coderabbit feedback

* Env Variable changed

* fix(community/lingo-lens): resolve PR feedback and add changeset

* fix(community/lingo-lens): resolve PR feedback and add changeset

* fix(community/lingo-lens): resolve PR feedback and add changeset

* fix(community/lingo-lens): address reviewer feedback on README and upload logic

* fix(community/lingo-lens): address reviewer feedback on README and upload logic

* fix(community/lingo-lens): address reviewer feedback on README

* fix: 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 to be empty as requested by maintainers

---------

Co-authored-by: Sumit Saurabh <62152915+sumitsaurabh927@users.noreply.github.com>

Author: trivedikavya

.changeset/busy-bars-leave.md

@@ -0,0 +1,2 @@
+---
+---

community/Lingo-lens/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

community/Lingo-lens/README.md

@@ -0,0 +1,79 @@
+# LingoLens 📸
+
+**LingoLens** is a powerful **AI Visual Translator** built for the **Lingo.dev Community Sprint**. 
+
+It upgrades standard OCR with **Intelligent Script Detection** and **Lingo.dev's AI Language Inference**. Wrapped in a stunning **Glassmorphism UI**, it allows users to upload images of text (receipts, signs, documents) and automatically detects the language script and translation context in real-time.
+
+## 🎥 Demo & Testing
+We have provided resources to help you test the application quickly:
+
+### 1. Watch the Demo
+> **[Click here to watch the Demo Video on YouTube 📺](https://youtu.be/ZJFpRb-49eE)**
+
+### 2. Test with Sample Data
+I have included a sample receipt image in this repository for you to test with:
+* **File:** [`test.png`](./test.png)
+* **Usage:** Drag and drop this image into the app to see the Auto-Detection and Translation in action immediately.
+
+## 🚀 Lingo.dev Features Highlighted
+This project demonstrates key capabilities of the Lingo.dev ecosystem:
+1.  **AI Language Inference:** Uses the `sourceLocale: null` feature of the **Lingo.dev SDK** to automatically identify the source language from the text context.
+2.  **Smart Script Detection:** Implements **Tesseract OSD** (Orientation & Script Detection) to dynamically load the correct OCR alphabet (e.g., Japanese vs. Latin) before reading.
+3.  **Real-time Localization:** Uses `lingo.localizeText` to provide accurate, context-aware translations for dynamic user content.
+4.  **Secure Backend Proxy:** Implements a robust Node.js/Express bridge (`server.js`) to handle API authentication securely.
+
+## 🛠️ Setup Instructions
+
+### Prerequisites
+* Node.js (v18 or higher)
+* A Lingo.dev API Key
+
+### 1. Installation
+Navigate to the project directory and install dependencies:
+```bash
+cd community/Lingo-lens
+npm install
+```
+
+### 2. Configuration
+Create a .env file in the root of the Lingo-lens directory and add your API key:
+```bash
+LINGO_API_KEY=link_your_actual_api_key_here
+```
+
+### 3. Running the App
+
+This application requires **both the backend server** (to communicate with Lingo.dev) and the **frontend client** (React) to run simultaneously.
+
+---
+
+### Terminal 1 — Backend Server
+
+```bash
+node server.js
+```
+
+You should see: `✅ Proxy Server running on http://localhost:3001`
+
+
+### Terminal 2 — Frontend Client
+
+```bash
+npm run dev
+```
+
+Open the URL shown in the terminal: `(usually: http://localhost:5173)`
+
+## 📖 How It Works
+
+1. **Upload & Detect** User uploads an image. The app first runs **Tesseract OSD** to detect the script (e.g., "Han" for Chinese, "Latin" for English).
+
+2. **Extract (OCR)** Based on the script, the app loads the optimized OCR model (e.g., `chi_sim` or `eng`) and extracts the raw text from the image.
+
+3. **Inference** The frontend sends the text to the server with `sourceLang: 'auto'`.
+
+4. **Translate** The **Lingo.dev SDK** analyzes the text content, infers the source language, and generates a context-aware translation.
+
+5. **Result** The original text and the translation appear instantly on the animated Glassmorphism interface.
+
+

community/Lingo-lens/demo.mp4

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

community/Lingo-lens/eslint.config.js

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lingo-lens</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>