📸 Project-Textract - OCR Web Application

🖼️ Application Preview

📋 Overview

Project-Textract is an advanced OCR (Optical Character Recognition) web application that allows users to extract text from images using cutting-edge AI technology. Built with Next.js frontend and Flask/PaddleOCR backend, this project provides a simple and efficient way to convert images containing text into editable digital text.

🎯 20-Word Description

Project-Textract is an OCR web application that extracts text from images using Next.js frontend and Flask/PaddleOCR backend with modern UI.

✨ Key Features

🖼️ Image Processing

• Drag & Drop Upload: Intuitive file upload with drag-and-drop functionality
• Multiple Formats: Supports PNG, JPG, JPEG, BMP, TIFF, and TIF formats
• Real-time Processing: Instant text extraction with loading indicators
• File Validation: Comprehensive file type and size validation

📝 Text Extraction

• AI-Powered OCR: Advanced PaddleOCR engine for accurate text recognition
• Multi-language Support: English language processing with expandable capabilities
• Smart Detection: Automatic text orientation and layout detection
• High Accuracy: PaddleOCR's deep learning models for precise results

💾 Output Management

• Copy Functionality: One-click copying of extracted text to clipboard
• Download Options: Export extracted text as .txt files
• Formatted Display: Clean, readable text presentation
• Error Handling: Graceful error management and user feedback

📱 User Experience

• Responsive Design: Mobile-first approach with cross-device compatibility
• Modern UI: Clean, intuitive interface with Tailwind CSS styling
• Interactive Feedback: Visual indicators for processing states
• Accessibility: Keyboard navigation and screen reader support

💻 Tech Stack

🌐 Frontend Technologies

• Next.js 15 – Full-stack React framework with server-side rendering
• React 19 – Modern component-based architecture
• Tailwind CSS – Utility-first styling framework
• React-Dropzone – Advanced drag-and-drop file handling
• React Icons – Comprehensive icon library

🔧 Backend Technologies

• Flask – Lightweight Python web framework
• PaddleOCR – Industry-leading OCR engine with deep learning
• PaddlePaddle – Baidu's deep learning framework
• Flask-CORS – Cross-origin resource sharing middleware
• Werkzeug – WSGI utility library
• Pillow – Python imaging library

☁️ Deployment & Hosting

• Netlify – Frontend hosting with continuous deployment
• Render – Backend hosting with automatic scaling
• Environment Variables – Dynamic configuration management

⚙️ Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• Python (v3.8 or higher)
• Git

🚀 Quick Start

Backend Setup

1. Navigate to backend directory:

   cd ocr-backend

2. Create virtual environment:

   python -m venv venv

3. Activate virtual environment:

   # Windows
   venv\Scripts\activate
   # macOS/Linux
   source venv/bin/activate

4. Install dependencies:

   pip install -r requirements.txt

5. Start the Flask server:

   python app.py

Frontend Setup

1. Navigate to frontend directory:

   cd ocr-frontend

2. Install dependencies:

   npm install

3. Create environment file:

   echo "NEXT_PUBLIC_BACKEND_URL=http://localhost:5000" > .env.local

4. Start development server:

   npm run dev

5. Access the application: Open your browser and navigate to http://localhost:3000

🌐 Production Deployment

🏗️ Backend Deployment (Render)

1. Push your backend code to a Git repository
2. Connect Render to your repository
3. Configure build command: pip install -r requirements.txt
4. Set start command: python app.py
5. Configure environment variables as needed

🚀 Frontend Deployment (Netlify)

1. Push your frontend code to a Git repository
2. Connect Netlify to your repository
3. Set build command: npm run build
4. Set publish directory: out
5. Add environment variable: NEXT_PUBLIC_BACKEND_URL

🛠️ Usage Guide

1. Upload Image: Drag and drop or click to select an image file
2. Process: Click "Extract Text" to send image to OCR engine
3. Review: View extracted text in the output panel
4. Export: Copy to clipboard or download as text file
5. Repeat: Process additional images as needed

🏗️ Project Structure

Project-Textract/
├── ocr-frontend/              # Next.js frontend application
│   ├── app/                   # Next.js 13+ app directory
│   │   ├── components/        # Reusable React components
│   │   │   ├── Header.jsx     # Application header
│   │   │   ├── UploadComponent.jsx # Image upload interface
│   │   │   └── OutputComponent.jsx # Text display and export
│   │   ├── globals.css        # Global styles
│   │   ├── layout.js          # Root layout
│   │   └── page.js           # Main page component
│   ├── public/               # Static assets
│   ├── package.json          # Frontend dependencies
│   └── next.config.mjs       # Next.js configuration
├── ocr-backend/              # Flask backend API
│   ├── app.py               # Main Flask application
│   ├── requirements.txt     # Python dependencies
│   ├── uploads/            # Temporary file storage
│   └── wsgi.py            # WSGI entry point
└── README.md               # Project documentation

🔧 API Endpoints

POST /ocr

• Description: Extract text from uploaded image
• Request: Multipart form data with image file
• Response: JSON with extracted text
• Example:

  {
    "text": "Extracted text from image"
  }

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow existing code style and conventions
• Write meaningful commit messages
• Test changes thoroughly
• Update documentation as needed

📄 License

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

🙏 Acknowledgments

• PaddleOCR for the powerful OCR engine
• Next.js for the excellent React framework
• Flask for the lightweight Python framework
• Netlify and Render for hosting solutions

🔄 Changelog

• v1.0.0: Initial release with image upload, text extraction, and copy/download functionality
• v1.1.0: Added drag-and-drop support, improved UI/UX, enhanced error handling
• v1.2.0: Implemented responsive design, added multiple export options, optimized performance

---

⭐ Star this repository if you found it useful!
📸 Transform your images into text with Textract!