📷 OCR Text Reader - Vue 3 Application

A modern, responsive Vue 3 application that uses Tesseract.js to extract text from images with OCR (Optical Character Recognition) technology.

✨ Features

• 📁 File Upload: Upload images from your device
• 📸 Camera Capture: Take photos directly from your device's camera
• 🔍 Text Extraction: Advanced OCR processing using Tesseract.js
• 📋 Copy Text: One-click copy extracted text to clipboard
• 💾 Download Text: Save extracted text as a .txt file
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• ⚡ Real-time Progress: Visual progress indicators during OCR processing
• 🎨 Modern UI: Beautiful, intuitive user interface with animations

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone or download this project

2. Navigate to the project directory:

   cd vue-ocr-app

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173

📋 How to Use

Method 1: Upload an Image

1. Click the "Choose Image" button
2. Select an image file from your device
3. Click "Extract Text" to process the image
4. View the extracted text in the results section

Method 2: Take a Photo

1. Click the "Take Photo" button
2. Allow camera access when prompted
3. Position your camera over the text you want to extract
4. Click "Capture Photo"
5. Click "Extract Text" to process the captured image

Managing Results

• Copy: Click the copy button to copy text to your clipboard
• Download: Click the download button to save text as a .txt file
• Clear: Click clear to remove results and start over

🛠️ Technical Details

Technologies Used

• Vue 3: Latest version with Composition API
• TypeScript: Type-safe development
• Tesseract.js: Client-side OCR engine
• Vite: Fast build tool and development server
• Modern CSS: Responsive design with flexbox and grid

Browser Compatibility

• Chrome/Edge: Full support including camera features
• Firefox: Full support including camera features
• Safari: Full support including camera features
• Mobile browsers: Full support with responsive design

Performance

• Client-side processing: All OCR processing happens in your browser
• No data upload: Your images never leave your device
• Progressive loading: Tesseract.js loads incrementally for better performance

📱 Mobile Support

The application is fully responsive and optimized for mobile devices:

• Touch-friendly interface
• Camera access on mobile devices
• Responsive layouts for different screen sizes
• Optimized performance for mobile browsers

🔧 Development

Project Structure

src/
├── components/
│   └── OCRReader.vue    # Main OCR component
├── App.vue              # Root application component
└── main.ts              # Application entry point

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Customization

You can customize the application by:

• Modifying colors and styles in the CSS sections
• Adding support for additional languages in Tesseract.js
• Adding new features like text editing or formatting
• Integrating with cloud storage or APIs

🌍 Language Support

The OCR engine currently supports English text recognition. You can add support for additional languages by modifying the Tesseract.js configuration:

// In OCRReader.vue, change 'eng' to other language codes
const result = await Tesseract.recognize(selectedImage.value, 'eng+fra', {
  // 'eng+fra' would support both English and French
})

Supported languages include: eng, fra, deu, spa, ita, por, and many more.

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Tesseract.js for the amazing OCR capabilities
• Vue.js for the excellent framework
• The open-source community for making this possible