feat: Add LingoLens App for Community Sprint #1922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

sumitsaurabh927 merged 23 commits into lingodotdev:main from trivedikavya:lingolens

Jan 30, 2026

.changeset/busy-bars-leave.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		---
		---

community/Lingo-lens/.gitignore

-Original file line number
+Diff line change
@@ -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

-Original file line number
+Diff line change
@@ -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:
+.  **AI Language Inference:** Uses the `sourceLocale: null` feature of the **Lingo.dev SDK** to automatically identify the source language from the text context.
+.  **Smart Script Detection:** Implements **Tesseract OSD** (Orientation & Script Detection) to dynamically load the correct OCR alphabet (e.g., Japanese vs. Latin) before reading.
+.  **Real-time Localization:** Uses `lingo.localizeText` to provide accurate, context-aware translations for dynamic user content.
+.  **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
+. **Upload & Detect** User uploads an image. The app first runs **Tesseract OSD** to detect the script (e.g., "Han" for Chinese, "Latin" for English).
+. **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.
+. **Inference** The frontend sends the text to the server with `sourceLang: 'auto'`.
+. **Translate** The **Lingo.dev SDK** analyzes the text content, infers the source language, and generates a context-aware translation.
+. **Result** The original text and the translation appear instantly on the animated Glassmorphism interface.

community/Lingo-lens/demo.mp4

Binary file not shown.

community/Lingo-lens/eslint.config.js

-Original file line number
+Diff line change
@@ -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/index.html

-Original file line number
+Diff line change
@@ -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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add LingoLens App for Community Sprint #1922

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!