ocr-translator

This website is an API based Image-to-Text Converter and Translator Website. Extract Text from Images and Translate it into any Language of your Convenience. Designed and Developed by Aayush Mishra.
Explore the Repository »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

📸 Text Extraction from Images Upload any image from your device's gallery or file system and extract the embedded text using powerful Optical Character Recognition (OCR) technology. This is especially useful for scanned documents, printed materials, signs, or handwritten notes.

🌐 Multilingual Translation Support Translate the extracted text into multiple Indian languages such as:

1. Kannada
2. Tamil
3. Marathi
4. Telugu
5. Hindi

and many more! this feature helps bridge language barriers and ensures content is accessible to diverse users.

✂️ Crop and 🖱️ Drag & Drop Support

1. Crop Tool: Easily select the exact portion of the image from which you want to extract text, reducing noise and improving accuracy.
2. Drag & Drop: A smooth, intuitive drag-and-drop interface allows for quick and hassle-free image uploads—no need to browse through folders.

(back to top)

Built With

Frontend :-

• 
• 
• 
• 

Backend :-

• 
• 

(back to top)

Getting Started

Follow these steps to set up and run the project locally on your machine.

Prerequisites

Ensure you have Node.js and npm installed on your system.

• npm

  npm install npm@latest -g

Installation

1. Clone and Install

``` bash git clone cd ocr-translator npm install ```

2. Google Cloud Setup

1. Create a Google Cloud Project

   • Go to Google Cloud Console
   • Create a new project or select an existing one

2. Enable Required APIs

   • Enable Cloud Vision API
   • Enable Cloud Translation API

3. Create API Key

   • Go to APIs & Services → Credentials
   • Click Create Credentials → API Key
   • Important: Restrict the API key to only Vision and Translation APIs for security

4. Set Up Environment Variables

   i. Copy the template file cp .env.local.template .env.local

   ii. Edit .env.local and add your API key GOOGLE_CLOUD_API_KEY='your-actual-api-key-here'

3. Run the Application

i. Development mode npm run dev

ii. Production build npm run build npm start

Visit http://localhost:3000 to use the application.

Environment Variables

Variable	Description	Required
GOOGLE_CLOUD_API_KEY	Google Cloud API key with Vision and Translation API access	Yes

Security Notes

• ⚠️ Never commit your .env.local file to version control
• 🔒 Restrict your API key to only the required APIs and domains
• 🔄 Rotate your API keys regularly
• 📊 Monitor API usage in Google Cloud Console

(back to top)

Usage

This website can be used for:

1. Upload Image: Drag and drop or click to select an image containing text
2. Crop (Optional): Use the crop tool to focus on specific text areas
3. Select Language: Choose your target translation language
4. Extract Text: Click "Extract Text" to run OCR
5. Translate: Click "Translate" to get the translation

(back to top)

Roadmap

• Multi-Image Upload Support : Allow users to upload and process multiple images in a single session.
• Handwritten Text Recognition : Improve OCR to support handwritten notes and cursive writing with higher accuracy.
• Real-time Camera Capture : Enable direct image capture from webcam/mobile camera for faster text extraction.
• History & Recent Activity Log : Maintain a local log of previously extracted and translated texts for quick reference.
  • Download & Copy Options : Add buttons to download extracted/translated text or copy it to clipboard with one click.

see the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/FeatureBranch)
3. Commit your Changes (git commit -m 'Add Changes')
4. Push to the Branch (git push origin feature/PushtoBranch)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Aayush Mishra - X - [email protected]

Project Link: https://github.com/aayushmishramechatronics/ocr-translator

(back to top)

Acknowledgments

• Google Cloud Vision API - for powerful OCR capabilities
• Google Cloud Translation API v2 - for accurate multilingual text translation
• Tailwind CSS - for utility-first modern styling
• React Icons - for easily adding icons in React
• Image Shields - for creating README badges

(back to top)