feat: implement automatic edge overlap detection - #2
Conversation
- Updated `detectOverlap` algorithm to use Mean Absolute Difference (MAD) synchronously. - Automatically calculate overlaps between adjacent image items upon upload in `App.tsx`. - Added an "Auto Align" (智能自动对齐) button in `ControlPanel.tsx` to manually trigger alignment of all images. - Implemented fallback to 0 overlap when matching confidence is low. Co-authored-by: sunalan2025 <255776802+sunalan2025@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
This PR adds “smart” overlap detection and auto-alignment to the stitching workflow by updating the overlap algorithm and triggering overlap estimation automatically on upload/reorder flows, plus adding a manual UI trigger for blanket auto-alignment.
Changes:
- Reworked
detectOverlapto use MAD-based scanline comparison and return0when matches exceed a threshold. - Updated
App.tsximage-change handling to auto-detect overlaps for adjacent images during uploads. - Added an “✨ 智能自动对齐 (Auto Align)” trigger button in the Control Panel UI.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/utils/stitching.ts | Updates overlap detection algorithm (MAD) and threshold fallback behavior. |
| src/App.tsx | Auto-detects and assigns overlaps when images change (e.g., upload). |
| src/components/ControlPanel.tsx | Adds a manual “Auto Align” trigger button to the Stitch tab UI. |
| package-lock.json | Lockfile updates reflecting dependency graph changes. |
Suppressed comments (1)
src/App.tsx:149
- If loadImage/detectOverlap fails for an index that already exists in newOverlaps, the catch block currently leaves the previous value intact (only pushes when the array is shorter). That can keep a stale overlap for a changed image pair; explicitly set the existing entry to 0 on error.
} catch (e) {
console.error("Error pre-calculating overlap", e);
if (newOverlaps.length <= i) newOverlaps.push(0);
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Automatically detect overlap for new additions | ||
| const oldLen = images.length; | ||
| const newLen = newImgs.length; | ||
|
|
||
| for (let i = oldLen > 1 ? oldLen - 1 : 0; i < newLen - 1; i++) { |
| const sampleWidth = 120; // Width of the sample strip in center | ||
| const maxOverlap = Math.min(imgA.naturalHeight, imgB.naturalHeight, 600); | ||
|
|
||
| const getWidth = (img: any) => img.naturalWidth || img.videoWidth || img.width; | ||
| const getHeight = (img: any) => img.naturalHeight || img.videoHeight || img.height; | ||
|
|
| // If the match difference is too high, it's likely they don't overlap | ||
| // 350 is a reasonable empirical threshold for average squared difference per color channel | ||
| if (minDifference > 500) { | ||
| // 40 is a reasonable empirical threshold for average absolute difference for 3 color channels | ||
| if (minDifference > 40) { | ||
| return 0; | ||
| } |
detectOverlapto evaluate image scanlines synchronously using Mean Absolute Difference (MAD).App.tsx(handleImagesChange) to automatically detect and assign overlap properties to sequentially adjacent images right upon upload.PR created automatically by Jules for task 480113580496954260 started by @sunalan2025