OCR Web Application

Application Preview

Overview

The OCR Web Application is a tool that allows users to extract text from images using Optical Character Recognition (OCR). It is built with:

• Frontend: Next.js (hosted on Netlify)
• Backend: Flask + PaddleOCR (hosted on Render)

This project is designed to provide a simple and efficient way to convert images containing text into editable digital text.

Features

• Image Upload: Upload images (JPEG, PNG, etc.) containing text.
• Text Extraction: Extract text from images using PaddleOCR.
• Responsive Design: Works seamlessly on desktop and mobile devices.
• CORS Support: Backend configured with CORS for cross-origin requests.
• Environment Variables: Dynamic backend URL configuration using environment variables.
• Error Handling: Basic error handling for invalid file types and server errors.

Installation

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/your-username/your-repo-name.git
   cd your-repo-name

2. Set Up the Backend

   1. Navigate to the backend folder:

   cd backend

   2. Create a virtual environment and install dependencies:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   pip install -r requirements.txt

   3. Start the Flask server:

   python app.py

3. Set Up the Frontend

   1. Navigate to the frontend folder:

   cd ../frontend

   2. Install dependencies:

   npm install

   3. Start the Next.js development server:

   npm run dev

   4. Access the Application

   Open your browser and go to http://localhost:3000.
   

Deployment

Backend

1. Deploy the Flask backend to Render or another hosting platform.
2. Set the NEXT_PUBLIC_BACKEND_URL environment variable to the deployed backend URL.

Frontend

1. Deploy the Next.js frontend to Netlify.
2. Set the NEXT_PUBLIC_BACKEND_URL environment variable in Netlify.

Usage

1. Open the application in your browser.
2. Upload an image containing text.
3. Click Extract Text to process the image.
4. View the extracted text displayed on the screen.

Technologies Used

• Frontend:

  • Next.js
  • React
  • Tailwind CSS (optional, if used)

• Backend:

  • Flask
  • PaddleOCR

• Hosting:

  • Netlify (Frontend)
  • Render (Backend)

Folder Structure

your-repo-name/
├── frontend/              # Next.js frontend code
│   ├── pages/
│   ├── public/
│   ├── styles/
│   └── package.json
├── backend/               # Python backend code
│   ├── app.py
│   ├── requirements.txt
│   └── uploads/
└── README.md

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• PaddleOCR for the OCR functionality.
• Next.js and Flask for the frontend and backend frameworks.
• Netlify and Render for hosting.

Changelog

• v1.0.0: Initial release with image upload, text extraction, and basic error handling.