Solve - Compare
This commit is contained in:
parent
1abf8cc4ac
commit
1717aedcb1
@ -114,118 +114,70 @@ const Compare = () => {
|
||||
|
||||
const handleImageUpload = (file) => {
|
||||
if (!file) {
|
||||
setUploadError('Please select a file');
|
||||
return;
|
||||
setUploadError('Please select a file');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Check file size (2MB = 2 * 1024 * 1024 bytes)
|
||||
const maxSize = 2 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
setUploadError('File size exceeds 2MB limit');
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file type using both extension and MIME type
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const validExtensions = ['jpg', 'jpeg'];
|
||||
const validMimeTypes = ['image/jpeg', 'image/jpg'];
|
||||
|
||||
if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
|
||||
setUploadError('Only JPG/JPEG files are allowed');
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check image dimensions
|
||||
const img = new Image();
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
|
||||
if (img.width > 300 || img.height > 300) {
|
||||
setUploadError('Image dimensions must not exceed 300x300 pixels');
|
||||
setUploadError('File size exceeds 2MB limit');
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// All validations passed
|
||||
setSelectedImageName(file.name);
|
||||
setFile(file);
|
||||
setUploadError('');
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
setUploadError('Invalid image file');
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
};
|
||||
|
||||
img.src = objectUrl;
|
||||
};
|
||||
|
||||
const handleCompareImageUpload = (file) => {
|
||||
if (!file) {
|
||||
setCompareUploadError('Please select a file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file size (2MB = 2 * 1024 * 1024 bytes)
|
||||
const maxSize = 2 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
setCompareUploadError('File size exceeds 2MB limit');
|
||||
setCompareFile(null);
|
||||
setSelectedCompareImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file type using both extension and MIME type
|
||||
|
||||
// Check file type
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const validExtensions = ['jpg', 'jpeg'];
|
||||
const validMimeTypes = ['image/jpeg', 'image/jpg'];
|
||||
|
||||
if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
|
||||
setCompareUploadError('Only JPG/JPEG files are allowed');
|
||||
setCompareFile(null);
|
||||
setSelectedCompareImageName('');
|
||||
return;
|
||||
setUploadError('Only JPG/JPEG files are allowed');
|
||||
setFile(null);
|
||||
setSelectedImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check image dimensions
|
||||
const img = new Image();
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
|
||||
if (img.width > 300 || img.height > 300) {
|
||||
setCompareUploadError('Image dimensions must not exceed 300x300 pixels');
|
||||
|
||||
// Set file and filename if validation passes
|
||||
setFile(file);
|
||||
setSelectedImageName(file.name); // Add this line
|
||||
setUploadError(''); // Clear any previous errors
|
||||
};
|
||||
|
||||
const handleCompareImageUpload = (file) => {
|
||||
if (!file) {
|
||||
setCompareUploadError('Please select a file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file size (2MB = 2 * 1024 * 1024 bytes)
|
||||
const maxSize = 2 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
setCompareUploadError('File size exceeds 2MB limit');
|
||||
setCompareFile(null);
|
||||
setSelectedCompareImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// All validations passed
|
||||
setSelectedCompareImageName(file.name);
|
||||
setCompareFile(file);
|
||||
setCompareUploadError('');
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
setCompareUploadError('Invalid image file');
|
||||
setCompareFile(null);
|
||||
setSelectedCompareImageName('');
|
||||
};
|
||||
|
||||
img.src = objectUrl;
|
||||
};
|
||||
}
|
||||
|
||||
// Check file type
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const validExtensions = ['jpg', 'jpeg'];
|
||||
const validMimeTypes = ['image/jpeg', 'image/jpg'];
|
||||
|
||||
if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
|
||||
setCompareUploadError('Only JPG/JPEG files are allowed');
|
||||
setCompareFile(null);
|
||||
setSelectedCompareImageName('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set file and filename if validation passes
|
||||
setCompareFile(file);
|
||||
setSelectedCompareImageName(file.name); // Add this line
|
||||
setCompareUploadError(''); // Clear any previous errors
|
||||
};
|
||||
|
||||
|
||||
const handleImageCancel = () => {
|
||||
setSelectedImageName('');
|
||||
@ -239,102 +191,114 @@ const Compare = () => {
|
||||
if (fileCompareInputRef.current) fileCompareInputRef.current.value = '';
|
||||
};
|
||||
|
||||
const handleCheckClick = async () => {
|
||||
// Reset error messages
|
||||
const validateForm = () => {
|
||||
// Reset all error states
|
||||
setApplicationError('');
|
||||
setThresholdError('');
|
||||
setUploadError('');
|
||||
setCompareUploadError('');
|
||||
setErrorMessage('');
|
||||
|
||||
// Initialize a flag to check for errors
|
||||
let hasError = false;
|
||||
let isValid = true;
|
||||
|
||||
// Validate Application ID
|
||||
if (!applicationId) {
|
||||
setApplicationError('Please select an Application ID before compare.');
|
||||
hasError = true;
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate Threshold ID
|
||||
// Validate Threshold
|
||||
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
|
||||
if (!selectedThreshold) {
|
||||
setThresholdError('Invalid threshold selected.');
|
||||
hasError = true;
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate Image Uploads
|
||||
// Validate Images
|
||||
if (!selectedImageName) {
|
||||
setUploadError('Please upload a face photo before compare.');
|
||||
hasError = true;
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!selectedCompareImageName) {
|
||||
setCompareUploadError('Please upload a compare face photo before compare.');
|
||||
hasError = true;
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// If there are any errors, return early
|
||||
if (hasError) {
|
||||
return isValid;
|
||||
};
|
||||
|
||||
|
||||
const handleCheckClick = () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare FormData and log inputs
|
||||
setIsLoading(true);
|
||||
setErrorMessage('');
|
||||
|
||||
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
|
||||
const formData = new FormData();
|
||||
formData.append('application_id', applicationId);
|
||||
formData.append('file1', file); // Use the state variable directly
|
||||
formData.append('file2', compareFile); // Use the state variable directly
|
||||
formData.append('file1', file);
|
||||
formData.append('file2', compareFile);
|
||||
formData.append('threshold', selectedThreshold);
|
||||
|
||||
// Log the inputs
|
||||
console.log('Inputs:', {
|
||||
// Log request data
|
||||
console.log('📝 Request Data:', {
|
||||
applicationId,
|
||||
threshold: selectedThreshold,
|
||||
file1: selectedImageName,
|
||||
file2: selectedCompareImageName,
|
||||
});
|
||||
|
||||
setIsLoading(true);
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/face_recognition/compare`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': `${API_KEY}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
// Fetch image URLs from response
|
||||
const imageUrl1 = data.details.data.result.image_url1;
|
||||
const imageUrl2 = data.details.data.result.image_url2;
|
||||
|
||||
await fetchImage(imageUrl1, setImageUrl);
|
||||
await fetchImage(imageUrl2, setImageCompareUrl);
|
||||
|
||||
setVerified(data.details.data.result.verified);
|
||||
setResultImageLabel(selectedImageName)
|
||||
setResultCompareImageLabel(selectedCompareImageName)
|
||||
setSelectedQuota(data.details.data.result.quota)
|
||||
setShowResult(true);
|
||||
console.log('Comparison successful:', data);
|
||||
} else {
|
||||
console.error('Error response:', data);
|
||||
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
|
||||
setErrorMessage(errorMessage);
|
||||
fetch(`${BASE_URL}/face_recognition/compare`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(errorData => {
|
||||
throw new Error(errorData.detail || 'Comparison failed, please try again');
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setErrorMessage('An error occurred while making the request.');
|
||||
} finally {
|
||||
return response.json();
|
||||
})
|
||||
.then(result => {
|
||||
console.log('📡 API Response:', result);
|
||||
|
||||
const { result: compareResult } = result.details.data;
|
||||
|
||||
// Process image URLs
|
||||
if (compareResult.image_url1) {
|
||||
fetchImage(compareResult.image_url1, setImageUrl);
|
||||
}
|
||||
if (compareResult.image_url2) {
|
||||
fetchImage(compareResult.image_url2, setImageCompareUrl);
|
||||
}
|
||||
|
||||
// Update states
|
||||
setVerified(compareResult.verified);
|
||||
setResultImageLabel(selectedImageName);
|
||||
setResultCompareImageLabel(selectedCompareImageName);
|
||||
setSelectedQuota(compareResult.quota);
|
||||
setShowResult(true);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('🔥 Request Failed:', error);
|
||||
setErrorMessage(error.message);
|
||||
setShowResult(false);
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const fetchImage = async (imageUrl, setImageUrl) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
@ -555,7 +519,7 @@ const Compare = () => {
|
||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||
<p>Or</p>
|
||||
<a href="#">Browse</a>
|
||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||
</div>
|
||||
}
|
||||
@ -604,7 +568,7 @@ const Compare = () => {
|
||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||
<p>Or</p>
|
||||
<a href="#">Browse</a>
|
||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
|
||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -280,7 +280,6 @@ const Enroll = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Fetch image preview
|
||||
const fetchImage = async (imageFileName) => {
|
||||
setIsLoading(true);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user