📸 Text Capture Web App

A beautiful, modern web application that uses your device's camera to capture text from images using OCR (Optical Character Recognition) technology. Built with vanilla JavaScript and styled with modern CSS gradients and animations.

✨ Features

• 📱 Mobile-First Design: Fully responsive and optimized for all devices
• 🎨 Beautiful UI: Modern gradient backgrounds, glassmorphism effects, and smooth animations
• 📷 Camera Integration: Uses device camera with fallback support for different camera types
• 🔄 Real-time OCR: Powered by Tesseract.js for accurate text recognition
• 📋 One-Click Copy: Easily copy extracted text to clipboard
• ⚡ Fast & Lightweight: No external dependencies except Tesseract.js CDN
• 🌈 Modern Styling: Gradient backgrounds, hover effects, and micro-interactions

🚀 Quick Start

1. Clone or download the project files
2. Open index.html in your web browser
3. Allow camera permissions when prompted
4. Start capturing text from images, documents, or any text-containing surface!

📋 How to Use

1. Grant Camera Access: Click "Allow" when your browser asks for camera permissions
2. Position Text: Point your camera at any text you want to capture
3. Capture: Click the "📷 Capture Text" button
4. Wait for Processing: The app will scan and extract text using OCR
5. Copy Text: Click "📋 Copy Text" to copy the extracted text to your clipboard

🛠️ Technologies Used

• HTML5: Semantic markup with modern standards
• CSS3: Advanced styling with gradients, animations, and responsive design
• Vanilla JavaScript: No frameworks, pure ES6+ JavaScript
• Tesseract.js: OCR library for text recognition
• MediaDevices API: Camera access and control

📱 Browser Support

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 11+
• ✅ Edge 79+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🎨 Design Features

• Responsive Layout: Works perfectly on desktop, tablet, and mobile
• Glassmorphism: Modern frosted glass effect on the main container
• Gradient Backgrounds: Beautiful purple-blue gradient with overlay effects
• Smooth Animations: Slide-up entrance animation and hover effects
• Touch-Friendly: Optimized button sizes and spacing for mobile devices
• Modern Typography: Clean, readable fonts with proper hierarchy

🔧 Development

Project Structure

/
├── index.html          # Main HTML file
├── style.css           # All styling and responsive design
├── main.js             # Application logic and camera handling
├── .gitignore          # Git ignore rules
└── README.md           # This file

Key Components

• Camera Management: Intelligent camera selection and fallback handling
• OCR Processing: Real-time text recognition with progress indication
• Responsive Design: Mobile-first approach with breakpoints at 768px, 480px, and 320px
• Modern CSS: CSS Grid, Flexbox, gradients, and animations

🚀 Deployment

Local Development

Simply open index.html in any modern web browser. No build process required!

Production Deployment

1. Upload all files to your web server
2. Ensure HTTPS is enabled (required for camera access)
3. Access via your domain

GitHub Pages

This project can be easily deployed to GitHub Pages:

1. Push to a GitHub repository
2. Enable Pages in repository settings
3. Access via https://yourusername.github.io/repository-name

🔒 Security & Privacy

• Camera Permissions: Only requests access when needed
• Local Processing: All OCR processing happens in your browser
• No Data Storage: No images or text are stored on external servers
• HTTPS Required: Camera access requires secure connection

🐛 Troubleshooting

Camera Not Working

• Ensure HTTPS is enabled (required for camera access)
• Check browser permissions in settings
• Try refreshing the page and re-granting permissions

Text Not Recognized

• Ensure good lighting conditions
• Hold camera steady when capturing
• Make sure text is clearly visible and in focus
• Try different angles or distances

Mobile Issues

• Grant camera permissions in browser settings
• Ensure you're using a recent version of your mobile browser
• Try different browsers if issues persist

📝 License

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

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs or issues
• Suggest new features
• Improve the styling or user experience
• Enhance mobile responsiveness

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Ensure your browser supports the required features
3. Try with a different device or browser

---

Made with ❤️ using modern web technologies