- Add metadata-extractor.js for extracting panel coordinates from Kodansha and Amazon comics
- Add manga109-tflite-detector.js for YOLO26-nano model inference
- Supports inline CSS linkhotspots and Amazon magnification regions
Added comprehensive logging throughout the panel detection system to aid in debugging and understanding detection flow:
- detector.js: Log caching status, detection start, and attempts for each method (OpenCV, ML, Grid)
- opencv.js: Log number of potential panels detected
- coco-ssd.js: Log number of predictions from ML model
- grid.js: Log final merged panel count
These logs help track which detection method is being used and how many panels are found at each step, making it easier to diagnose detection issues.
- Add #model private field to cache loaded model instance
- Properly await model.load() before using the model
- Pass cached model to detection function instead of global reference
- Add model cleanup in clear() method to release resources
This prevents redundant model loading and ensures the model is fully
initialized before use, improving performance and reliability of ML-based
panel detection.
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