rizqikaibnu/rekan_veri_fe_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Solve - Compare

Browse Source
This commit is contained in:
Rizqika 2024-12-09 10:51:56 +07:00
parent 1abf8cc4ac
commit 1717aedcb1
2 changed files with 114 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
src/screens/Biometric/FaceRecognition/Section/Compare.jsx
View File

@ -114,116 +114,68 @@ const Compare = () => {
const handleImageUpload = (file) => { const handleImageUpload = (file) => {
if (!file) { if (!file) {
setUploadError('Please select a file'); setUploadError('Please select a file');
return; return;
} }
// Check file size (2MB = 2 * 1024 * 1024 bytes) // Check file size (2MB = 2 * 1024 * 1024 bytes)
const maxSize = 2 * 1024 * 1024; const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) { if (file.size > maxSize) {
setUploadError('File size exceeds 2MB limit'); setUploadError('File size exceeds 2MB limit');
setFile(null); setFile(null);
setSelectedImageName(''); setSelectedImageName('');
return; return;
} }
// Check file type using both extension and MIME type // Check file type
const fileExtension = file.name.split('.').pop().toLowerCase(); const fileExtension = file.name.split('.').pop().toLowerCase();
const validExtensions = ['jpg', 'jpeg']; const validExtensions = ['jpg', 'jpeg'];
const validMimeTypes = ['image/jpeg', 'image/jpg']; const validMimeTypes = ['image/jpeg', 'image/jpg'];
if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) { if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
setUploadError('Only JPG/JPEG files are allowed'); 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');
setFile(null); setFile(null);
setSelectedImageName(''); setSelectedImageName('');
return; return;
} }
// All validations passed // Set file and filename if validation passes
setSelectedImageName(file.name); setFile(file);
setFile(file); setSelectedImageName(file.name); // Add this line
setUploadError(''); setUploadError(''); // Clear any previous errors
};
img.onerror = () => {
URL.revokeObjectURL(objectUrl);
setUploadError('Invalid image file');
setFile(null);
setSelectedImageName('');
};
img.src = objectUrl;
}; };
const handleCompareImageUpload = (file) => { const handleCompareImageUpload = (file) => {
if (!file) { if (!file) {
setCompareUploadError('Please select a file'); setCompareUploadError('Please select a file');
return; return;
} }
// Check file size (2MB = 2 * 1024 * 1024 bytes) // Check file size (2MB = 2 * 1024 * 1024 bytes)
const maxSize = 2 * 1024 * 1024; const maxSize = 2 * 1024 * 1024;
if (file.size > maxSize) { if (file.size > maxSize) {
setCompareUploadError('File size exceeds 2MB limit'); setCompareUploadError('File size exceeds 2MB limit');
setCompareFile(null); setCompareFile(null);
setSelectedCompareImageName(''); setSelectedCompareImageName('');
return; return;
} }
// Check file type using both extension and MIME type // Check file type
const fileExtension = file.name.split('.').pop().toLowerCase(); const fileExtension = file.name.split('.').pop().toLowerCase();
const validExtensions = ['jpg', 'jpeg']; const validExtensions = ['jpg', 'jpeg'];
const validMimeTypes = ['image/jpeg', 'image/jpg']; const validMimeTypes = ['image/jpeg', 'image/jpg'];
if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) { if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
setCompareUploadError('Only JPG/JPEG files are allowed'); setCompareUploadError('Only JPG/JPEG files are allowed');
setCompareFile(null);
setSelectedCompareImageName('');
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');
setCompareFile(null); setCompareFile(null);
setSelectedCompareImageName(''); setSelectedCompareImageName('');
return; return;
} }
// All validations passed // Set file and filename if validation passes
setSelectedCompareImageName(file.name); setCompareFile(file);
setCompareFile(file); setSelectedCompareImageName(file.name); // Add this line
setCompareUploadError(''); setCompareUploadError(''); // Clear any previous errors
};
img.onerror = () => {
URL.revokeObjectURL(objectUrl);
setCompareUploadError('Invalid image file');
setCompareFile(null);
setSelectedCompareImageName('');
};
img.src = objectUrl;
}; };
@ -239,102 +191,114 @@ const Compare = () => {
if (fileCompareInputRef.current) fileCompareInputRef.current.value = ''; if (fileCompareInputRef.current) fileCompareInputRef.current.value = '';
}; };
const handleCheckClick = async () => { const validateForm = () => {
// Reset error messages // Reset all error states
setApplicationError(''); setApplicationError('');
setThresholdError(''); setThresholdError('');
setUploadError(''); setUploadError('');
setCompareUploadError(''); setCompareUploadError('');
setErrorMessage(''); setErrorMessage('');
// Initialize a flag to check for errors let isValid = true;
let hasError = false;
// Validate Application ID // Validate Application ID
if (!applicationId) { if (!applicationId) {
setApplicationError('Please select an Application ID before compare.'); 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; const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
if (!selectedThreshold) { if (!selectedThreshold) {
setThresholdError('Invalid threshold selected.'); setThresholdError('Invalid threshold selected.');
hasError = true; isValid = false;
} }
// Validate Image Uploads // Validate Images
if (!selectedImageName) { if (!selectedImageName) {
setUploadError('Please upload a face photo before compare.'); setUploadError('Please upload a face photo before compare.');
hasError = true; isValid = false;
} }
if (!selectedCompareImageName) { if (!selectedCompareImageName) {
setCompareUploadError('Please upload a compare face photo before compare.'); setCompareUploadError('Please upload a compare face photo before compare.');
hasError = true; isValid = false;
} }
// If there are any errors, return early return isValid;
if (hasError) { };
const handleCheckClick = () => {
if (!validateForm()) {
return; return;
} }
// Prepare FormData and log inputs setIsLoading(true);
setErrorMessage('');
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
const formData = new FormData(); const formData = new FormData();
formData.append('application_id', applicationId); formData.append('application_id', applicationId);
formData.append('file1', file); // Use the state variable directly formData.append('file1', file);
formData.append('file2', compareFile); // Use the state variable directly formData.append('file2', compareFile);
formData.append('threshold', selectedThreshold); formData.append('threshold', selectedThreshold);
// Log the inputs // Log request data
console.log('Inputs:', { console.log('📝 Request Data:', {
applicationId, applicationId,
threshold: selectedThreshold, threshold: selectedThreshold,
file1: selectedImageName, file1: selectedImageName,
file2: selectedCompareImageName, file2: selectedCompareImageName,
}); });
setIsLoading(true); fetch(`${BASE_URL}/face_recognition/compare`, {
setErrorMessage(''); method: 'POST',
headers: {
try { 'accept': 'application/json',
const response = await fetch(`${BASE_URL}/face_recognition/compare`, { 'x-api-key': API_KEY,
method: 'POST', },
headers: { body: formData,
'accept': 'application/json', })
'x-api-key': `${API_KEY}`, .then(response => {
}, if (!response.ok) {
body: formData, return response.json().then(errorData => {
}); throw new Error(errorData.detail || 'Comparison failed, please try again');
});
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);
} }
} catch (error) { return response.json();
console.error('Error:', error); })
setErrorMessage('An error occurred while making the request.'); .then(result => {
} finally { 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); setIsLoading(false);
} });
}; };
const fetchImage = async (imageUrl, setImageUrl) => { const fetchImage = async (imageUrl, setImageUrl) => {
setIsLoading(true); setIsLoading(true);
try { try {
@ -555,7 +519,7 @@ const Compare = () => {
<p style={styles.uploadText}>Drag and Drop Here</p> <p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p> <p>Or</p>
<a href="#">Browse</a> <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> <p className="text-muted">Supported file types: JPG, JPEG</p>
</div> </div>
} }
@ -604,7 +568,7 @@ const Compare = () => {
<p style={styles.uploadText}>Drag and Drop Here</p> <p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p> <p>Or</p>
<a href="#">Browse</a> <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> <p className="text-muted">Supported file types: JPG, JPEG</p>
</div> </div>
} }

1
src/screens/Biometric/FaceRecognition/Section/Enroll.jsx
View File

@ -280,7 +280,6 @@ const Enroll = () => {
}); });
}; };
// Fetch image preview // Fetch image preview
const fetchImage = async (imageFileName) => { const fetchImage = async (imageFileName) => {
setIsLoading(true); setIsLoading(true);