Capstone: Pokemon Card Border Detection
Automated Pokemon Card Border Detection using Computer Vision
Real-World Problem Statement
Pokemon card collectors, grading services, and digital archiving platforms face a common challenge: accurately detecting card boundaries in images taken under varying conditions. Cards may be photographed at angles, in protective sleeves/holders, with different backgrounds, or under inconsistent lighting.
Manual identification of card borders is:
- Time-consuming for large collections
- Error-prone and inconsistent
- Not scalable for commercial grading services
This project builds an automated Pokemon card border detection system that:
- Locates the outer border (physical card edges)
- Identifies the inner border (where artwork/content begins)
- Performs perspective correction to flatten angled cards
- Returns precise corner coordinates for downstream applications (centering analysis, grading automation, digital archiving)
Target Users
- Card grading companies automating quality assessment
- Collectors digitizing and cataloging their collections
- Marketplaces needing standardized card images
- Researchers studying card condition/authenticity
Project Scope
In Scope (What You Will Build)
- Image preprocessing pipeline for card images
- Card localization within an image
- Outer border (physical edge) detection
- Inner border (artwork boundary) detection
- Perspective correction for angled cards
- Coordinate transformation tracking
- Web UI for uploading images and viewing detection results (main interface)
Out of Scope (Not Required)
- Training custom ML models (use pre-trained models)
- Card grading score calculation
- Multi-card detection in single image
- Video processing / real-time detection
- Cloud deployment (local Docker is sufficient)
- Database integration for results storage
Expected Time to Complete
Total Duration: 10-14 days (~1.5-2 weeks)
| Phase | Duration | Activities |
|---|---|---|
| Phase 1: Research & Setup | 2-3 days | Environment setup, research approaches, understand the problem |
| Phase 2: Card Localization | 3-4 days | Implement card detection and isolation from background |
| Phase 3: Border Detection | 3-4 days | Detect outer and inner borders, calculate corners |
| Phase 4: UI & Integration | 2-3 days | Build web UI, testing, documentation |
| Total | 10-14 days | ~1.5-2 weeks |
Prerequisites
Required Knowledge
- Python programming (intermediate level)
- Familiarity with NumPy arrays
- Basic linear algebra (matrices, transformations)
- OpenCV experience
- Deep learning concepts
- Docker basics
- Web UI basics (HTML, CSS, or Python web frameworks like Streamlit/Gradio)
- Git version control basics
Hardware Requirements
- GPU Recommended: NVIDIA GPU with 8GB+ VRAM
- CPU Fallback: Possible but significantly slower
- RAM: 16GB minimum
- Storage: ~5GB for models
Deliverables
Important: Your code must be tracked on GitHub throughout the project. Commit frequently with meaningful messages from day one. Your commit history will be reviewed as part of the evaluation - it demonstrates your development process and professional practices.
1. Working Codebase
A well-organized Python project that:
- Accepts Pokemon card images as input
- Detects outer and inner border corners
- Returns perspective-corrected card image
- Web UI for image upload and result visualization (main interface)
- Runs in Docker container
- Hosted on GitHub with clear commit history
2. README Documentation
Must include:
- Project overview and problem statement
- Installation instructions (local + Docker)
- API usage examples with curl/Python
- Configuration options explained
- Architecture diagram showing your approach
- Sample input/output images
3. Short Write-Up (1-2 pages)
Document your learning journey:
- Technical Decisions: Why you chose specific approaches
- Challenges Faced: Problems encountered and how you solved them
- Key Learnings: New concepts/techniques you mastered
- Future Improvements: What you would add with more time
4. Demo Materials
- 10+ test images with detection results
Evaluation Rubric
Sufficient (Pass)
| Criteria | Requirements |
|---|---|
| Functionality | Detects outer borders on clean, front-facing card images |
| Web UI | Upload image and view detected corners |
| Code Quality | Code runs without errors, basic organization |
| Documentation | README with installation and basic usage |
| Testing | Works on 3+ provided test images |
Good (Competent)
| Criteria | Requirements |
|---|---|
| Functionality | Detects both outer AND inner borders; handles slight angles |
| Web UI | Clear visualization of borders, displays perspective-corrected image |
| Code Quality | Modular design, configuration via environment variables |
| Documentation | Comprehensive README with architecture explanation |
| Testing | Works on 5+ images including some challenging cases |
| Extras | Clean REST API exposing detection functionality |
Excellent (Exceptional)
| Criteria | Requirements |
|---|---|
| Functionality | Robust detection across varied conditions (angles, holders, lighting) |
| Web UI | Polished interface with error handling and loading states |
| Code Quality | Clean architecture, type hints, error handling, logging |
| Documentation | Full docs with diagrams, usage examples, troubleshooting guide |
| Testing | Comprehensive test suite; works on 10+ diverse images |
| Extras | Docker deployment, REST API with health checks, performance metrics |
| Innovation | Novel improvements or additional features beyond requirements |
Checkpoint Milestones
Use these checkpoints to track your progress:
Checkpoint 1 (Day 3)
- Development environment set up
- Research complete - chosen approach documented
- Can load and display images programmatically
- Basic card detection prototype working
Checkpoint 2 (Day 6)
- Card can be isolated from background
- Edge detection producing usable results
- Initial border lines detected
Checkpoint 3 (Day 10)
- Outer corners calculated accurately
- Perspective correction working
- Inner border detection implemented
- Coordinates map back to original image
Checkpoint 4 (Day 14)
- Web UI allows image upload and displays results
- Detection results visualized clearly in browser
- Docker container builds and runs
- README and write-up complete
- Demo materials prepared
Research Starting Points
You'll need to research and decide on approaches for:
-
Card Localization: How to find the card in an image?
- Consider: object detection models, color-based segmentation, edge detection
-
Border Detection: How to find precise border lines?
- Consider: classical CV techniques, line detection algorithms, contour analysis
-
Perspective Correction: How to flatten an angled card?
- Consider: geometric transformations, homography
-
Coordinate Systems: How to track points through transformations?
- Consider: transformation matrices, inverse mappings
-
Web UI: How to build an interface for image upload and result display?
- Consider: Python web frameworks, file upload handling, image rendering
Useful Resources
- OpenCV documentation and tutorials
- Research papers on document/card detection
- Pre-trained object detection and segmentation models
- Python web framework documentation (Flask, Streamlit, Gradio, etc.)
Tips for Success
-
Start Simple: Get basic detection working on clean images first, then handle edge cases
-
Visualize Everything: Draw detected features on images to debug your pipeline
-
Track Coordinates Carefully: Mapping coordinates through transformations is challenging - document each step
-
Test Incrementally: Verify each stage works before moving to the next
-
Handle Failures Gracefully: Not every image will work - return meaningful error messages
-
Keep Configuration Flexible: Use environment variables so you can tune parameters without code changes
Test Image Scenarios
Your system should handle:
- Clean front-facing card on solid background
- Card at slight angle (< 15 degrees)
- Card in clear plastic sleeve
- Card with busy/textured background
- Cards with different border colors (yellow, silver, gold, etc.)
Extension Ideas (Optional)
If you finish early or want extra challenge:
- Batch Processing: Handle multiple images in one request
- Centering Score: Calculate how centered the artwork is within borders
- Confidence Scores: Return detection confidence metrics
- Visualization API: Return annotated image with borders drawn
- Performance Optimization: Implement async processing for faster response
Good luck! This project combines computer vision techniques with practical web development - skills highly valued in the industry.
