Skip to content

README.md

Latest commit

 

History

History
219 lines (172 loc) · 7.58 KB

README.md

File metadata and controls

219 lines (172 loc) · 7.58 KB

📸 Project-Textract - OCR Web Application Netlify Status

🖼️ Application Preview

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

🔄 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!