A Next.js application that processes Quran page images and provides interactive text highlighting capabilities using Google Cloud Vision API for OCR and text detection.

• Image Upload & Processing: Accept Quran page images (JPEG, PNG formats) with OCR text extraction
• Text Matching & Validation: Match OCR results against authoritative Quran text from quran.txt
• Interactive Highlighting: Two modes - Ayah-by-ayah and Word-by-word highlighting
• Smart Text Recognition: Handles Arabic text variations and diacritical marks intelligently
• Real-time Interaction: Click/tap to highlight specific ayahs or words
• Position Tracking: Display current surah and ayah information
• Responsive Design: Modern, accessible UI suitable for reading and studying Quranic text

• Node.js 18+ and npm
• Google Cloud Vision API key

1. Clone the repository

2. Install dependencies:

   npm install

3. Create a .env.local file in the root directory:

   GOOGLE_CLOUD_VISION_API_KEY=your_api_key_here
   

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser

1. Upload a Quran page image using the drag-and-drop interface
2. Wait for the OCR processing to complete
3. Select highlighting mode (Ayah or Word)
4. Click on the image to highlight specific text
5. View extracted text with surah:ayah references in the sidebar

• Framework: Next.js 14+ with App Router
• Language: TypeScript
• OCR: Google Cloud Vision API
• Styling: Tailwind CSS
• Text Data: Authoritative Quran text in /public/quran.txt

mukalimah/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   │   └── vision/        # Vision API endpoint
│   ├── page.tsx           # Main page
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── QuranHighlighter.tsx
│   ├── ImageUpload.tsx
│   ├── HighlightOverlay.tsx
│   ├── Controls.tsx
│   └── TextDisplay.tsx
├── lib/                   # Utility libraries
│   ├── quranParser.ts     # Quran text parser
│   ├── textMatcher.ts     # Text matching algorithms
│   └── visionClient.ts    # Google Vision API client
├── types/                 # TypeScript type definitions
└── public/
    └── quran.txt         # Quran text database

The quran.txt file uses pipe-separated format:

surah_number|ayah_number|arabic_text

Example:

1|1|بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ
1|2|الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ

This project is for educational and religious study purposes.