Changed contours from cv.Mat to cv.MatVector to match OpenCV.js API
requirements. The findContours method expects a MatVector for contour
storage, not a single Mat object. This fixes a potential runtime error
when using OpenCV-based panel detection.
Implement intelligent panel detection for manga/comics using a three-tier
fallback system that automatically selects the best detection method:
- Tier 1: OpenCV edge detection (fast, accurate for clear panel borders)
- Tier 2: COCO-SSD ML detection (handles irregular layouts)
- Tier 3: Grid-based detection (lightweight, always works)
The system automatically falls back through tiers if higher tiers fail
or if CSP blocks 'unsafe-eval' required by ML libraries.
Changes:
- panel-detection/detector.js: Modified to use dynamic script loading
* Calls loadMLLibraries() on first use for lazy loading
* Checks if ML libraries loaded successfully before using them
* Falls back to grid detection if CSP blocks eval or libraries fail
* Uses globalThis.cv/tf/cocoSsd for UMD/global library access
- panel-detection/load-scripts.js: Created dynamic script loader
* Dynamically injects <script> tags when panel detection enabled
* Checks CSP compatibility with canUseEval() function
* Loads libraries in correct order: TensorFlow → OpenCV → COCO-SSD
* Falls back to grid if ML libraries fail to load
* Uses Promise-based API for clean async loading
This library-native approach keeps all functionality within foliate-js
without requiring changes to reader.html or consumer applications.
Update PanelDetector to load OpenCV, TensorFlow.js, and COCO-SSD
from local vendor directory instead of importing npm packages.
This ensures the libraries are available after build and avoids
runtime dependency resolution issues.
- Change imports to use ../vendor paths instead of npm packages
- Add caching to prevent reloading libraries
- Add error handling for failed library loads with console warnings
- Update OpenCV loading to handle both default and named exports
Implement a comprehensive panel detection system for manga and comics
with automatic fallback chain for maximum compatibility.
Core detector (detector.js):
- PanelDetector class with in-memory caching
- Lazy-loading of OpenCV and TensorFlow.js
- Validation logic to filter poor detections
- Cache management to avoid re-detection
OpenCV edge detection (opencv.js):
- Canny edge detection for panel boundaries
- Contour finding with bounding box extraction
- Size and aspect ratio filtering
- Reading order sorting (top-to-bottom, left-to-right)
ML-based detection (coco-ssd.js):
- COCO-SSD pre-trained model integration
- Object detection for irregular panel layouts
- Rectangular filtering for panel-like regions
- Handles edge cases where edge detection fails
Grid-based fallback (grid.js):
- Lightweight 3x3 grid detection
- Empty cell detection via alpha channel analysis
- Adjacent panel merging algorithm
- Always works as final fallback
The detection pipeline tries OpenCV first (fast, accurate),
falls back to ML detection if validation fails,
and uses grid detection as ultimate baseline.
john-okeefe