🌌 AI Manga Reader

🚨 PROJECT PAUSED: Legal & DMCA Concerns with MangaDex 🚨

⚠️ Important Notice: Due to potential legal risks tied to MangaDex's operation in a legal gray area—aggregating fan-translated content that could attract DMCA takedowns or regulatory scrutiny—further development of AI Manga Reader has been paused indefinitely. While the project doesn't host content, relying on MangaDex's API and scraping exposes it (and its creator) to risks, especially with personal identity publicly linked via GitHub. Platforms like LibGen face similar issues for enabling access without hosting, and individuals can become easy targets.

The project remains open-source for educational purposes only. We strongly recommend using official publishers (e.g., Viz Media, Yen Press) or licensed platforms (e.g., Crunchyroll, BookWalker) to support creators ethically. No new features will be added, and existing deployments may be discontinued. Consult a legal expert for advice on similar projects. For more context, see our Legal Disclaimer below.

Original tagline preserved for archival: "Unleash the Manga Multiverse—Where AI Meets Epic Storytelling!" But please prioritize legal reading options.

🔥Unleash the Manga Multiverse—Where AI Meets Epic Storytelling! (Archived Description)

🚀 AI Manga Reader isn't your average reader—it's a Next.js juggernaut that catapults you into endless realms of manga, manhwa, and manhua, all powered by the MangaDex API. Flip through vertical scrolls, horizontal epics, single panels, or dual-view spreads that adapt to your vibe. ⚠️ Note: Development paused due to MangaDex's gray-area status (see Wikipedia for context: MangaDex). This could expose users/creators to legal risks like DMCA takedowns, as it eases access to fan-translated content without hosting it.

But wait— the real thrill? AI OCR for the ultimate lazy mode: Extract text from raw panels so you can listen without lifting a finger. Or go pro with OCR + Instant Translate + Smart Overlay for those bleeding-edge, untranslated chapters dropping in Japanese or Korean. Boom—seamless English overlays right on the art, no apps, no hassle. Our custom ONNX engine runs it all in-browser, blazing fast and zero privacy leaks. 🚨 Legal Caution: Features like real-time translation of unofficial scans may violate copyright laws in some jurisdictions. Use at your own risk—prefer official sources.

Craving community heat? Scraped MangaDex forums bring live discussions to your feed. And with 20+ AI voices via TTS, your mangas speak—custom speeds, languages, pure immersion. Your library? A brainy vault tracking history, bookmarks, and faves with filters that slice like a katana. ⚠️ Paused Project: No updates; potential for service shutdown due to regulatory issues. Ready to level up your reads? Dive in—your next obsession awaits... ethically, via licensed platforms.

---

🎯 What Makes Us Different? (Archived)

💥 The Problem (With Added Context)

• Latest manga chapters drop in Japanese/Korean/Chinese
• Official translations take months
• You miss out on reading your favorite series
  ⚠️ Added Risk: Fan sites like MangaDex operate in a legal gray area, aggregating unofficial translations. Tools that enhance accessibility (e.g., via AI) can draw scrutiny, as seen with LibGen's bans—despite not hosting content, they enable easier access and face takedowns. Personal association with such projects heightens liability.

⚡ Our Solution (Paused Development)

Two Powerful Modes: (For educational viewing only—use official alternatives)

🗣️ Listen Mode - For casual reading

• AI voices read manga panels aloud (20+ voices)
• Perfect for multitasking while commuting, cooking, or exercising
• Adjustable speed and auto-advance to next page
  🚨 Disclaimer: Relies on MangaDex-sourced content; potential DMCA exposure if misused.

🌍 Translation Mode - For latest untranslated chapters

• Instant OCR detects all text in manga panels
• Real-time translation to 100+ languages
• Perfect overlay shows translated text right on the original image
• Read the latest chapter the day it drops, in YOUR language!
  ⚠️ Legal Pause Reason: This mode directly facilitates access to untranslated (often pirated) scans, mirroring LibGen's issues. Development halted to avoid personal legal trouble.

---

🔥 Key Features (Educational/Archived—Development Paused)

• 🤖 Custom AI OCR Engine - Built with onnxruntime-web and PaddleOCR models, runs entirely in your browser ⚠️ (Paused: Legal risks with unofficial content processing)
• 🌐 100+ Languages - Translate from Japanese, Korean, Chinese to any language instantly 🚨 (Caution: May infringe copyrights on fan translations)
• 🗣️ 20+ AI Voices - Listen to manga with customizable voices, speed, and pitch ⚠️ (Uses MangaDex data—gray area)
• 💬 Live Community Feed - See what fans are discussing via scraped MangaDex forums 🚨 (Scraping may violate terms; paused)
• 📚 Smart Library - Track reading history, bookmarks, and favorite chapters
• 🎨 Dark & Light Themes - Beautiful, eye-friendly designs for any time
• 📱 Fully Responsive - Perfect experience on desktop, tablet, and mobile
• ⚡ Lightning Fast - Server-side rendering with TanStack Query for instant loads
• 🔒 Privacy First - All OCR processing happens locally in your browser
• 💯 100% Free - No API keys, no subscriptions, completely open source ⚠️ (But paused due to DMCA/MangaDex legal concerns)

---

📊 Website Performance Overview

🚀 Google Analytics User Statistics	⚡ Lighthouse Performance Scores
Description: This section showcases key user engagement metrics from Google Analytics, highlighting traffic sources, active users, session duration, and conversion rates to demonstrate the site's overall user growth and retention performance.	Description: Lighthouse audits provide core web vitals and performance insights, scoring the site on loading speed, accessibility, SEO, and best practices to ensure a smooth, optimized user experience across devices.

📸 Screenshots

Mobile Preview

        

        

        

    

---

🌙 Dark Theme

Landing Page	Manga Discovery

Latest Activity Feed	Trending Manga

Chapter Details	Chapter List

Forum Comments	Cover Gallery

Reading Interface	OCR Translation

TTS Controls	Reading Settings

Advanced Search	Filter Options

Search Results	Library Overview

Reading History	Bookmarks & Favorites

Custom 404 Page	Profile Menu

Preferences Panel

---

☀️ Light Theme

Manga Discovery	Activity Feed

Featured Content	Chapter View

Chapter List	Discussion

Cover Art	Reader Interface

Translation Overlay	Audio Controls

Customization	Search

Filter Panel	Search Results

Library	History

Collections	404 Page

User Menu	Settings

---

🏗️ App Modules

🏠 Home / Landing Page

Your gateway to manga discovery with trending searches and quick access.

Components:

• LandingContent.jsx - Hero section with trending searches and about info

APIs:

• /api/manga/UsersTop - Fetches top searched manga titles

---

📚 Manga List

Browse latest updates, community activity, and discover new series.

Components:

• MangaCard.jsx - Individual manga card with cover and details
• MangaCardPagination.jsx - Pagination controls
• LatestActivityComments.jsx - Real-time forum activity feed
• MangaReadHistory.jsx - Reading progress tracker
• AsideComponent.jsx - Sidebar with top manga lists
• SliderComponent.jsx - Random manga recommendations

APIs:

• /api/manga/latest - Latest manga updates
• /api/comments/latestActivity - Forum discussions (web scraped)
• /api/manga/random - Random recommendations
• /api/manga/UsersTop - Top-rated manga

Features:

• Latest manga updates with chapter info
• Live community discussions from MangaDex forums
• Top 10 lists (rated, followed, latest)
• Personal reading progress with percentages
• Random discovery carousel

---

📄 Manga Chapters

Comprehensive manga details, chapter lists, and community engagement.

Components:

• TabsAndSections.jsx - Tab navigation for sections
• ChapterList.jsx - Filterable chapter list
• CommentsOnManga.jsx - Forum discussions
• CoverArts.jsx - Cover art gallery with filters

APIs:

• /api/manga/[mangaId] - Manga metadata
• /api/manga/getAuthor/[authorId] - Author information
• /api/manga/[mangaId]/chapters - Chapter list
• /api/manga/[mangaId]/coverArts - Cover art collection
• /api/manga/rating - Rating statistics
• Forum threads scraped for comments

Features:

• Rich manga metadata (title, author, genres, synopsis)
• Filter chapters by number, language, and date
• Sort newest/oldest
• Forum discussions from MangaDex
• Cover art gallery with language filters
• Reading history for this manga

---

📺 Read Chapter ⭐

The crown jewel - Revolutionary reading experience with AI-powered features.

Components:

• MiddleImageAndOptions.jsx - Main image viewer
• SideBar.jsx - Info sidebar
• ChaptersQuickSelect.jsx - Chapter navigation
• CollapsedSideBarStrip.jsx - Minimized sidebar
• TopRightOptions.jsx - Reader controls
• ChapterQuickSelect.jsx - Quick chapter switcher
• ShowSettingsPopUp.jsx - Settings panel
• BottomPagesNavigation.jsx - Page controls
• OCROverlay.jsx - OCR translation overlay
• ScanningOverlay.jsx - OCR processing animation
• TextToSpeech.jsx - AI voice narration
• GOTONextChapterPopUpAtLastPage.jsx - Chapter completion prompt

APIs:

• /api/manga/chapter/[chapterId]/pages - Chapter images
• /api/readTextAndReplace - OCR text detection
• /api/translate - Text translation
• Google Translate API for backup

OCR Engine: Our custom-built OCR system using onnxruntime-web with PaddleOCR ONNX models:

Detection Model:

• ch_PP-OCRv4_det_infer.onnx (4.7 MB) - Detects text regions

Recognition Models:

• japan_PP-OCRv3_rec_infer.onnx (10.0 MB) + japan_dict.txt (21,729 chars) - Japanese
• ch_PP-OCRv4_rec_infer.onnx (10.8 MB) + ch_dict.txt (32,871 chars) - Chinese
• en_PP-OCRv4_rec_infer.onnx (7.6 MB) + en_dict.txt (283 chars) - English
• latin_PP-OCRv3_rec_infer.onnx (8.9 MB) + latin_dict.txt (651 chars) - Latin scripts
• korean_dict.txt (18,166 chars) - Korean

Features:

🤖 OCR Translation System:

• Instant text detection in manga panels
• Real-time translation to 100+ languages
• Perfect overlay positioning on original images
• Dialogue flow panel showing continuous text
• Per-page caching for instant revisits
• 92-98% accuracy across languages

🗣️ Text-to-Speech:

• 20+ AI voices with multiple languages
• Adjustable speed (0.5x-2.0x), pitch, and volume
• Read original or translated text
• Auto-advance to next panel
• Text highlighting synced with audio

📖 Reading Modes:

• Vertical scroll (webtoon style)
• Horizontal pages (traditional manga)
• Single or double page spreads
• Adjustable image quality

⚙️ Customization:

• Zoom and pan controls
• Page preloading for instant access
• Bookmark current page
• Favorite chapter toggle
• All settings persist per page

---

🔍 Search

Advanced search with powerful filtering and sorting options.

Components:

• SearchMangaCard.jsx - Card view for results
• SearchMangaList.jsx - List view for results
• FilterCustomDropDown.jsx - Multi-select filters
• ThemeGenreTags.jsx - Tag filtering
• SearchAndTotalFilterOptions.jsx - Search bar and filters
• BottomPagination.jsx - Pagination controls

APIs:

• /api/manga/titles - Search with filters

Features:

• Real-time search with autocomplete
• 100+ filter tags (genres, themes, formats)
• Filter by rating, status, demographic, type, year
• Sort by relevance, rating, follows, date, title
• Grid/List view toggle
• Active filter badges
• Clear all filters option

---

📚 Library

Your personal manga collection manager.

Components:

• ReadingHistory.jsx - Reading log with filters
• ReadingHistoryCard.jsx - Individual history entries
• SearchHistory.jsx - Past search queries
• BookMarkedSection.jsx - Bookmarked manga
• BookmarkCard.jsx - Bookmark display
• FavoriteChaptersCard.jsx - Favorite chapters
• SelectedMangaCard.jsx - Manga selector
• FilterPanel.jsx - Filter controls
• ConfirmationDialog.jsx - Delete confirmations

Features:

• Reading history with timestamps and progress
• Search history log
• Bookmarked manga collection
• Favorite chapters from any manga
• Filter by date, genre, status
• Sort by recent, alphabetical, progress
• Export library data

---

🧭 Top Navigation Bar

Persistent navigation across the entire app.

Components:

• TopNavbar.jsx - Main navigation bar
• ProfilePop.jsx - User profile dropdown
• PreferencesPopUp.jsx - Settings modal
• ComingSoonPopup.jsx - Feature previews

Features:

• Logo → Home
• Manga List quick access
• Search with keyboard shortcut (Ctrl+K)
• Library access
• Theme toggle
• Profile menu
• Responsive mobile menu

---

⚡ Performance & Tech Stack

Frontend:

• Next.js 14+ with App Router
• React 18+ (Server & Client Components)
• TanStack Query v5 for data fetching
• Tailwind CSS for styling
• TypeScript for type safety

AI/ML:

• onnxruntime-web for browser-based ML
• PaddleOCR v3/v4 ONNX models
• Custom OCR engine (no external APIs)

Data:

• MangaDex API (no key required)
• Google Translate API
• Web scraping for forum data
• Compressed localStorage
• Server-side rendering with hydration

Optimizations:

• Lazy loading images and components
• React.memo, useMemo, useCallback
• Image optimization with Next.js
• Debounced search queries
• Aggressive caching strategies

---

🎨 Themes

Dark Mode - Optimized for nighttime reading

• Rich dark backgrounds
• Purple and yellow accents
• Reduced eye strain
• OLED-friendly true blacks

Light Mode - Clean and bright

• Crisp white backgrounds
• Blue accents for actions
• High contrast for visibility
• Accessible color scheme

---

🚀 Quick Start

Prerequisites:

• Node.js 18.17+
• npm 9.0+

Installation:

# Clone repository
git clone https://github.com/VrajVyas11/AI_Manga_Reader.git

# Navigate to directory
cd AI_Manga_Reader

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser. That's it!

No API keys needed - MangaDex API is completely open.

---

💡 How to Use

For Casual Reading (Listen Mode)

1. Find any manga and open a chapter
2. Click the 🗣️ "Listen" button
3. Choose your preferred AI voice
4. Adjust speed to your liking
5. Sit back and listen while the manga is read to you
6. Perfect for commuting, cooking, or exercising!

For Latest Untranslated Chapters (Translation Mode)

1. Find the latest chapter (even in Japanese/Korean/Chinese)
2. Open it in the reader
3. Click the 🤖 "Translate" button
4. Select source and target languages
5. Watch AI detect text and overlay translations
6. Read the latest chapter in YOUR language instantly!

General Tips

• Press Ctrl+K or Cmd+K for quick search
• Bookmark manga with the heart icon
• All reading progress is saved automatically
• Toggle themes in the top navigation
• Customize reading mode and quality in settings

---

🛣️ Roadmap

✅ Completed:

• Custom OCR engine with onnxruntime-web
• Multi-language translation overlay
• 20+ AI voices for TTS
• Forum activity feed
• Reading progress tracking
• Dark/Light themes
• Advanced search
• Library management
• Server-side rendering

🚫 Paused/In Progress: (All Halted Due to MangaDex/DMCA Concerns)

• Improved OCR accuracy for stylized fonts
• Offline reading mode
• Enhanced TTS with emotional tones
• Social sharing features

📅 Planned: (Cancelled—Prioritize Official Support)

• User accounts and cloud sync
• AI-powered recommendations
• MyAnimeList integration
• Mobile apps (iOS & Android)
• Premium features (ad-free, priority processing)

💭 Vision:

• AI art enhancement
• VR/AR reading modes
• Voice-controlled navigation

---

📁 Project Structure

ai-manga-reader/
│
├── 📁 app/                                    # Next.js App Router
│   │
│   ├── 📁 (core)/                             # Core routes group
│   │   ├── 📁 library/                        # 📚 Library Module
│   │   │   └── 📄 page.jsx                    # Library main page
│   │   │
│   │   ├── 📁 manga/                          
│   │   │   └── 📁 [mangaId]/                  
│   │   │       ├── 📁 chapters/               # 📄 Manga Chapters Module
│   │   │       │   └── 📄 page.jsx            # Chapter list & details
│   │   │       │
│   │   │       └── 📁 chapter/
│   │   │           └── 📁 [chapterId]/
│   │   │               └── 📁 read/           # 📺 Read Chapter Module
│   │   │                   └── 📄 page.jsx    # ⭐ OCR + TTS Reading UI
│   │   │
│   │   ├── 📁 manga-list/                     # 📚 Manga List Module
│   │   │   ├── 📄 page.jsx                    # SSR page with prefetch
│   │   │   └── 📄 MangaListClient.jsx         # Client component
│   │   │
│   │   └── 📁 search/                         # 🔍 Search Module
│   │       └── 📄 page.jsx                    # Advanced search page
│   │
│   ├── 📁 api/                                # API Routes (Backend)
│   │   │
│   │   ├── 📁 manga/
│   │   │   ├── 📁 [mangaId]/
│   │   │   │   ├── 📄 chapters/route.ts       # GET chapters for manga
│   │   │   │   └── 📄 coverArts/route.ts      # GET cover arts
│   │   │   │
│   │   │   ├── 📁 chapter/
│   │   │   │   └── 📁 [chapterId]/
│   │   │   │       └── 📄 pages/route.ts      # GET chapter images
│   │   │   │
│   │   │   ├── 📄 latest/route.ts             # GET latest manga updates
│   │   │   ├── 📄 latestArrivals/route.ts     # GET new arrivals
│   │   │   ├── 📄 random/route.ts             # GET random manga
│   │   │   ├── 📄 titles/route.ts             # GET search results
│   │   │   ├── 📄 UsersTop/route.ts           # GET top-rated manga
│   │   │   ├── 📄 favourite/route.ts          # POST favorite manga
│   │   │   ├── 📄 rating/route.ts             # GET manga ratings
│   │   │   └── 📁 getAuthor/
│   │   │       └── 📁 [authorId]/route.ts     # GET author info
│   │   │
│   │   ├── 📁 comments/
│   │   │   └── 📄 latestActivity/route.ts     # 🕷️ Scrape forum activity
│   │   │
│   │   ├── 📁 readTextAndReplace/             # 🤖 OCR Engine API
│   │   │   ├── 📄 route.ts                    # POST image for OCR
│   │   │   ├── 📄 apiVersion.ts               # API versioning
│   │   │   └── 📄 extra.ts                    # Extra OCR utilities
│   │   │
│   │   ├── 📁 translate/
│   │   │   └── 📄 route.ts                    # POST text for translation
│   │   │
│   │   └── 📁 proxy/
│   │       └── 📄 avatar/route.ts             # Proxy user avatars
│   │
│   ├── 📁 Components/                         # React Components
│   │   │
│   │   ├── 📄 TopNavbar.jsx                   # 🧭 Main navigation
│   │   ├── 📁 TopNavbarComponents/
│   │   │   ├── 📄 ProfilePop.jsx              # User menu dropdown
│   │   │   ├── 📄 PreferencesPopUp.jsx        # Settings modal
│   │   │   └── 📄 ComingSoonPopup.jsx         # Feature preview
│   │   │
│   │   ├── 📁 HomeComponents/
│   │   │   └── 📄 LandingContent.jsx          # 🏠 Landing page content
│   │   │
│   │   ├── 📁 MangaListComponents/            # 📚 Manga List Module
│   │   │   ├── 📄 MangaCard.jsx               # Manga card display
│   │   │   ├── 📄 MangaCardPagination.jsx     # Pagination UI
│   │   │   ├── 📄 LatestActivityComments.jsx  # 💬 Forum activity feed
│   │   │   ├── 📄 MangaReadHistory.jsx        # Reading progress
│   │   │   ├── 📄 AsideComponent.jsx          # Sidebar (top lists)
│   │   │   └── 📄 SliderComponent.jsx         # Random recommendations
│   │   │
│   │   ├── 📁 MangaChaptersComponents/        # 📄 Manga Chapters Module
│   │   │   ├── 📄 TabsAndSections.jsx         # Tab navigation
│   │   │   ├── 📄 ChapterList.jsx             # Filterable chapter list
│   │   │   ├── 📄 CommentsOnManga.jsx         # 💬 Forum discussions
│   │   │   └── 📄 CoverArts.jsx               # 🖼️ Cover gallery
│   │   │
│   │   ├── 📁 ReadChapterComponents/          # 📺 Read Chapter Module (⭐ MAIN)
│   │   │   ├── 📄 MiddleImageAndOptions.jsx   # Main image viewer
│   │   │   ├── 📄 SideBar.jsx                 # Info sidebar
│   │   │   ├── 📁 SideBarModules/
│   │   │   │   ├── 📄 ChaptersQuickSelect.jsx # Chapter dropdown
│   │   │   │   └── 📄 CollapsedSideBarStrip.jsx # Minimized view
│   │   │   ├── 📄 TopRightOptions.jsx         # Reader controls
│   │   │   ├── 📁 TopRightOptionsModules/
│   │   │   │   ├── 📄 ChapterQuickSelect.jsx  # Quick switcher
│   │   │   │   └── 📄 ShowSettingsPopUp.jsx   # Settings panel
│   │   │   ├── 📄 BottomPagesNavigation.jsx   # Page controls
│   │   │   ├── 📄 OCROverlay.jsx              # 🤖 OCR translation overlay
│   │   │   ├── 📄 ScanningOverlay.jsx         # OCR processing UI
│   │   │   ├── 📄 TextToSpeech.jsx            # 🗣️ TTS controls
│   │   │   ├── 📄 Audiotest.jsx               # Audio testing
│   │   │   ├── 📄 Placeholder.jsx             # Loading placeholder
│   │   │   └── 📄 GOTONextChapterPopUpAtLastPage.jsx # Chapter end prompt
│   │   │
│   │   ├── 📁 SearchPageComponents/           # 🔍 Search Module
│   │   │   ├── 📄 SearchAndTotalFilterOptions.jsx # Search bar + filters
│   │   │   ├── 📄 SearchMangaCardWith2ViewMode.jsx # Grid/List toggle
│   │   │   ├── 📁 SearchMangaCardWith2ViewModeModules/
│   │   │   │   ├── 📄 SearchMangaCard.jsx     # Card view
│   │   │   │   └── 📄 SearchMangaList.jsx     # List view
│   │   │   ├── 📁 SearchTotalAndFilterOptionsModules/
│   │   │   │   ├── 📄 FilterCustomDropDown.jsx # Filter dropdowns
│   │   │   │   └── 📄 ThemeGenreTags.jsx      # Tag filters
│   │   │   └── 📄 BottomPagination.jsx        # Pagination
│   │   │
│   │   ├── 📁 LibraryComponents/              # 📚 Library Module
│   │   │   ├── 📄 ReadingHistory.jsx          # History main view
│   │   │   ├── 📄 ReadingHistoryCard.jsx      # History card
│   │   │   ├── 📄 BookMarkedSection.jsx       # Bookmarks view
│   │   │   ├── 📄 BookmarkCard.jsx            # Bookmark card
│   │   │   ├── 📄 FavoriteChaptersCard.jsx    # Favorites list
│   │   │   ├── 📄 SearchHistory.jsx           # Search history
│   │   │   ├── 📄 SelectedMangaCard.jsx       # Manga selector
│   │   │   ├── 📄 FilterPanel.jsx             # Filter controls
│   │   │   ├── 📄 ConfirmationDialog.jsx      # Delete confirmations
│   │   │   └── 📄 LibraryLoading.jsx          # Loading state
│   │   │
│   │   ├── 📁 Skeletons/                      # Loading Skeletons
│   │   │   ├── 📁 MangaList/
│   │   │   ├── 📁 MangaChapters/
│   │   │   ├── 📁 ReadChapter/
│   │   │   └── 📁 SearchPage/
│   │   │
│   │   ├── 📄 LoadingSpinner.jsx              # Generic spinner
│   │   ├── 📄 StableFlag.jsx                  # Feature flags
│   │   ├── 📄 Toasts.tsx                      # Toast notifications
│   │   └── 📄 AnalyticsClient.tsx             # Google Analytics
│   │
│   ├── 📁 hooks/                              # Custom React Hooks
│   │   ├── 📄 useMangaFetch.js                # Fetch manga details
│   │   ├── 📄 useChaptersFetch.js             # Fetch chapters
│   │   ├── 📄 useChapterPagesFetch.js         # Fetch chapter images
│   │   ├── 📄 useMangaFilters.js              # Search filters logic
│   │   ├── 📄 useMangaTitle.js                # Get manga title
│   │   └── 📄 useInView.js                    # Intersection Observer
│   │
│   ├── 📁 providers/                          # Context Providers
│   │   ├── 📄 TanstackProvider.tsx            # TanStack Query setup
│   │   ├── 📄 ThemeContext.tsx                # Theme state
│   │   ├── 📄 ThemeProviderClient.tsx         # Client theme provider
│   │   ├── 📄 MangaContext.tsx                # Global manga state
│   │   └── 📄 PreferencesContext.tsx          # User preferences
│   │
│   ├── 📁 util/                               # Utilities
│   │   ├── 📄 imageOptimization.js            # Image optimization
│   │   ├── 📁 MangaList/
│   │   │   └── 📄 cache.js                    # Caching utilities
│   │   └── 📁 ReadChapterUtils/
│   │       ├── 📄 handleTranslate.js          # Translation logic
│   │       └── 📄 sortAndjoinOCR.js           # OCR text sorting
│   │
│   ├── 📁 constants/                          # App Constants
│   │   ├── 📄 filterOptions.js                # Search filter options
│   │   ├── 📄 Flags.js                        # Feature flags
│   │   └── 📄 TopFavouriteMangas.js           # Top manga list
│   │
│   ├── 📁 lib/
│   │   └── 📄 gtag.ts                         # Google Analytics setup
│   │
│   ├── 📄 page.jsx                            # 🏠 Landing page (root)
│   ├── 📄 not-found.jsx                       # Custom 404 page
│   ├── 📄 layout.jsx                          # Root layout
│   ├── 📄 globals.css                         # Global styles
│   ├── 📄 manifest.ts                         # PWA manifest
│   ├── 📄 robots.ts                           # SEO robots.txt
│   ├── 📄 sitemap.ts                          # SEO sitemap
│   └── 📄 favicon.ico                         # App icon
│
├── 📁 scripts/                                # 🤖 OCR Engine
│   ├── 📁 models/                             # ONNX Models & Dictionaries
│   │   │
│   │   ├── 📄 ch_PP-OCRv4_det_infer.onnx      # Detection model (4.7 MB)
│   │   │   # Used for detecting text regions in images
│   │   │
│   │   ├── 📄 ch_PP-OCRv4_rec_infer.onnx      # Chinese recognition (10.8 MB)
│   │   ├── 📄 ch_dict.txt                     # Chinese chars (32,871)
│   │   │
│   │   ├── 📄 japan_PP-OCRv3_rec_infer.onnx   # Japanese recognition (10.0 MB)
│   │   ├── 📄 japan_dict.txt                  # Japanese chars (21,729)
│   │   │
│   │   ├── 📄 korean_dict.txt                 # Korean chars (18,166)
│   │   │   # Uses shared recognition model
│   │   │
│   │   ├── 📄 en_PP-OCRv4_rec_infer.onnx      # English recognition (7.6 MB)
│   │   ├── 📄 en_dict.txt                     # English chars (283)
│   │   │
│   │   ├── 📄 latin_PP-OCRv3_rec_infer.onnx   # Latin recognition (8.9 MB)
│   │   └── 📄 latin_dict.txt                  # Latin chars (651)
│   │
│   ├── 📄 index.js                            # OCR engine initialization
│   └── 📄 main.js                             # OCR processing logic
│
├── 📁 public/                                 # Static Assets
│   ├── 📄 logo.svg                            # App logo
│   ├── 📄 placeholder.jpg                     # Image placeholder
│   └── 📄 site.webmanifest                    # PWA manifest
│
├── 📁 livedemoimages/                         # README screenshots
│
├── 📄 package.json                            # Dependencies
├── 📄 package-lock.json                       # Locked dependencies
├── 📄 next.config.ts                          # Next.js config
├── 📄 tsconfig.json                           # TypeScript config
├── 📄 tailwind.config.ts                      # Tailwind config
├── 📄 postcss.config.mjs                      # PostCSS config
├── 📄 .eslintrc.json                          # ESLint config
├── 📄 .eslintignore                           # ESLint ignore
├── 📄 Dockerfile                              # Docker config
├── 📄 global.d.ts                             # Global TypeScript types
├── 📄 next-env.d.ts                           # Next.js types
└── 📄 README.md                               # This file!

---

🤝 Contributing

We welcome contributions! Here's how:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m "Add amazing feature"
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

Please run npm run lint before submitting.

⚠️ Pause Note: Contributions limited to non-MangaDex enhancements only—consult legal before forking.

---

📜 License

Licensed under the MIT License - see LICENSE for details.

Copyright © 2025 AI Manga Reader

---

🙏 Acknowledgments

• MangaDex - For the open API and amazing community
• PaddleOCR - For powerful OCR models
• onnxruntime-web - For browser-based ML capabilities
• Google Translate - For translation services
• Next.js - For the incredible framework
• All Contributors - Thank you for your support!

---

⚖️ Legal Disclaimer

🚨 Critical Warning: This project was built with good intentions (accessibility for global readers) but relies heavily on MangaDex, a fan-translation aggregator in a legal gray area (see Wikipedia). It doesn't host content but uses its API/scraping for discovery, metadata, forums, and images—which could be viewed as enabling access, drawing DMCA or infringement claims (e.g., US fair use limited; EU stricter).

Project archived for education; no endorsement of MangaDex use.

---

Made with ❤️ by the AI Manga Reader Team (Now on Hiatus)

"Breaking language barriers, one manga panel at a time" 🌏📚✨ —Ethically, without gray-zone risks.

🚀 Explore Official Manga • ⭐ Star on GitHub (Archival) (https://github.com/VrajVyas11/AI_Manga_Reader/blob/main/CONTRIBUTING.md)**