ilia/punimtag
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Auto-start auto-match on component mount and tolerance change

Browse Source 
This commit enhances the AutoMatch component by implementing an auto-start feature for the auto-match process when the component mounts or when the tolerance value changes. Additionally, it improves the user interface by allowing users to click on face images to open the full photo in a new tab, enhancing the overall user experience. Documentation has been updated to reflect these changes.
This commit is contained in:
tanyar09 2025-11-04 14:11:29 -05:00
parent 0e69677d54
commit 0dcfe327cd
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/AutoMatch.tsx
View File

@ -26,6 +26,12 @@ export default function AutoMatch() {
return currentPerson?.matches || []
}, [currentPerson])
// Auto-start auto-match when component mounts or tolerance changes
useEffect(() => {
startAutoMatch()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tolerance])
// Apply search filter
useEffect(() => {
if (!searchQuery.trim()) {
@ -268,11 +274,20 @@ export default function AutoMatch() {
{/* Person face image */}
<div className="mb-4 flex justify-center">
<img
src={`/api/v1/faces/${currentPerson.reference_face_id}/crop`}
alt="Reference face"
className="max-w-[300px] max-h-[300px] rounded border border-gray-300"
/>
<div
className="cursor-pointer hover:opacity-90 transition-opacity"
onClick={() => {
const photoUrl = `${apiClient.defaults.baseURL}/api/v1/photos/${currentPerson.reference_photo_id}/image`
window.open(photoUrl, '_blank')
}}
title="Click to open full photo"
>
<img
src={`/api/v1/faces/${currentPerson.reference_face_id}/crop`}
alt="Reference face"
className="max-w-[300px] max-h-[300px] rounded border border-gray-300"
/>
</div>
</div>
{/* Save button */}
@ -326,11 +341,20 @@ export default function AutoMatch() {
onChange={() => handleFaceToggle(match.id)}
className="w-4 h-4"
/>
<img
src={`/api/v1/faces/${match.id}/crop`}
alt="Match face"
className="w-20 h-20 object-cover rounded border border-gray-300"
/>
<div
className="cursor-pointer hover:opacity-90 transition-opacity"
onClick={() => {
const photoUrl = `${apiClient.defaults.baseURL}/api/v1/photos/${match.photo_id}/image`
window.open(photoUrl, '_blank')
}}
title="Click to open full photo"
>
<img
src={`/api/v1/faces/${match.id}/crop`}
alt="Match face"
className="w-20 h-20 object-cover rounded border border-gray-300"
/>
</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span