Scan Review Layout
Side-by-side layout for reviewing scan results with original image and detected cards
Overview
The ScanReviewLayout component provides an optimized user experience for reviewing card scan results. It displays the original scan image alongside detected cards with their cropped regions, making it easy to compare and verify identifications.
Features
- Side-by-side layout: Original scan on the left, detected cards on the right
- Inline crops: Each detected card shows its cropped region from the original scan
- Card details: Displays identified card information (name, set, number, confidence)
- Interactive: Hover and click handlers for enhanced user experience
- Responsive: Adapts to mobile and desktop screen sizes
Basic Usage
Detected Cards
3 cards found0 of 3 selected
High Confidence3
Medium Confidence0
Low Confidence0
→
Cynthia
sma #SV82
89%
→
Garchomp ex
sv4 #245
91%
→
Cynthia's Ambition
swsh12pt5gg #GG60
85%
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| summaryImageUrl | string | Yes | URL of the original scan image |
| detections | Detection[] | Yes | Array of detected cards with their details |
| onDetectionClick | (detection: Detection) => void | No | Callback when a detection is clicked |
| onDetectionHover | (detection: Detection) => void | No | Callback when a detection is hovered |
Detection Interface
The Detection interface defines the structure for detected cards:
- id: Unique identifier for the detection
- card_name: Name of the detected card
- similarity_score: Confidence score (0-1)
- bbox: Bounding box coordinates [x, y, width, height]
- crop_url: URL to the cropped image from the original scan
- identified_card: Optional identified card details
Usage Example
Import and use the ScanReviewLayout component with your detection data:
- Pass the original scan image URL via
summaryImageUrl - Provide detected cards array via
detections - Optionally handle click and hover events
- The component handles responsive layout automatically
Design Considerations
UX Benefits
- Reduced cognitive load: Users can see the original scan and detected cards simultaneously
- Immediate context: Inline crops show exactly where each card was detected
- Easy comparison: Side-by-side layout eliminates scrolling between original and results
- Visual verification: Users can quickly spot misidentifications or missing cards
Responsive Behavior
- Desktop: Two-column layout with original image on left, detections on right
- Mobile: Single-column layout with detections below the original image
- Image sizing: Original image maintains aspect ratio with max-height constraints