Transform your handwritten notes into digital flashcards with AI-powered OCR technology. Notebook Vision uses EasyOCR to extract text from images of handwritten notes and automatically generates flashcards from Q/A patterns.
- π± Drag & Drop Upload: Easy image upload interface
- π€ AI-Powered OCR: Uses EasyOCR for accurate handwriting recognition
- π― Smart Flashcard Generation: Automatically detects Q/A patterns and creates flashcards
- π Text Extraction: Extract all text from handwritten notes
- π» Modern UI: Clean, responsive React interface
- β‘ Fast Processing: Optimized for quick OCR processing
- π§ Multiple Formats: Supports JPEG, PNG, BMP, TIFF image formats
notebook-vision/
βββ backend/ # FastAPI Python backend
β βββ main.py # FastAPI application
β βββ ocr_utils.py # OCR processing utilities
β βββ requirements.txt # Python dependencies
βββ frontend/ # React frontend
β βββ src/
β β βββ App.jsx # Main application component
β β βββ App.css # Global styles
β β βββ main.jsx # React entry point
β β βββ components/
β β βββ UploadForm.jsx # File upload component
β β βββ UploadForm.css # Upload form styles
β βββ index.html # HTML template
β βββ package.json # Node.js dependencies
β βββ vite.config.js # Vite configuration
βββ README.md # This file
- Python 3.9+ (backend)
- Node.js 16+ (for frontend)
- Git (for cloning)
git clone <repository-url>
cd notebook-vision# Navigate to backend directory
cd backend
# Create virtual environment (recommended)
python -m venv venv
# Activate virtual environment
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate
# Install dependencies
pip install -r requirements.txt# Navigate to frontend directory (from project root)
cd frontend
# Install dependencies
npm installcd backend
# Make sure virtual environment is activated
python main.pyThe backend will start on: http://localhost:8000
You can verify it's running by visiting: http://localhost:8000 (should show API status)
cd frontend
npm run devThe frontend will start on: http://localhost:3000
- Open the Application: Navigate to http://localhost:3000 in your browser
- Upload an Image:
- Drag and drop an image of handwritten notes, or
- Click the upload area to browse and select a file
- Wait for Processing: The OCR will extract text from your image
- View Results:
- See the extracted text in the "Extracted Text" section
- View auto-generated flashcards in the "Generated Flashcards" section
For best flashcard generation results, format your handwritten notes with clear Q/A patterns:
Q: What is the capital of France?
A: Paris
Question: When did World War II end?
Answer: 1945
Q1: What is photosynthesis?
A1: The process by which plants convert sunlight into energy
Supported question/answer patterns:
The backend can be configured by modifying backend/main.py:
The frontend configuration is in frontend/vite.config.js:
cd backend
# Run with auto-reload
python main.py
# Run tests (if implemented)
pytest
# Type checking
mypy main.py ocr_utils.pycd frontend
# Development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint# Health check
curl http://localhost:8000/health
# Upload image
curl -X POST \
-F "file=@your-image.jpg" \
http://localhost:8000/api/upload/- Test Different Image Formats: Try uploading JPEG, PNG, BMP, and TIFF files
- Test Handwriting Styles: Upload images with different handwriting styles
- Test Q/A Patterns: Try different question/answer formats
- Test Error Handling: Upload invalid files or very large files
- Test Mobile Responsiveness: Use the application on mobile devices
Create handwritten notes with these patterns to test:
Q: What is machine learning?
A: A subset of AI that enables computers to learn without explicit programming
Question: Name three programming languages
Answer: Python, JavaScript, Java
1. What year was the internet invented?
1969 (ARPANET)
2. Who invented the World Wide Web?
Tim Berners-Lee
# Check Python version
python --version # Should be 3.9+
# Check if virtual environment is activated
which python # Should point to venv
# Reinstall dependencies
pip install -r requirements.txt --force-reinstall# Check Node version
node --version # Should be 16+
# Clear npm cache
npm cache clean --force
# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install- GPU Issues: If you have GPU problems, the app will automatically fall back to CPU
- Memory Issues: Large images may cause memory issues. Try resizing images to < 2MB
- Dependencies: Ensure all Python packages are installed correctly
If you see CORS errors in the browser console:
- Check that the backend is running on port 8000
- Ensure the frontend is connecting to the correct backend URL
- Verify CORS settings in
main.py
- Image Quality: Use high-resolution, well-lit images
- Handwriting: Ensure clear, legible handwriting
- Format: Keep text horizontal and avoid skewed images
- Language: Ensure correct language settings in OCRProcessor
- Check Logs: Look at console output for both backend and frontend
- Browser Console: Check browser developer tools for frontend errors
- API Testing: Test API endpoints directly with curl or Postman
- Dependencies: Verify all dependencies are correctly installed
# Install production dependencies
pip install gunicorn
# Run with gunicorn
gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker
# Or with uvicorn
uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4# Build for production
npm run build
# Serve static files
npx serve -s distCreate Dockerfile for backend:
FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 8000
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
Made with β€οΈ using React, FastAPI, and EasyOCR