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

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

@ -127,7 +127,7 @@ const Compare = () => {
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'];
@ -139,34 +139,10 @@ const Compare = () => {
return; return;
} }
// Check image dimensions // Set file and filename if validation passes
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);
setSelectedImageName('');
return;
}
// All validations passed
setSelectedImageName(file.name);
setFile(file); setFile(file);
setUploadError(''); setSelectedImageName(file.name); // Add this line
}; 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) => {
@ -184,7 +160,7 @@ const Compare = () => {
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'];
@ -196,34 +172,10 @@ const Compare = () => {
return; return;
} }
// Check image dimensions // Set file and filename if validation passes
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);
setSelectedCompareImageName('');
return;
}
// All validations passed
setSelectedCompareImageName(file.name);
setCompareFile(file); setCompareFile(file);
setCompareUploadError(''); setSelectedCompareImageName(file.name); // Add this line
}; 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('');
try {
const response = await fetch(`${BASE_URL}/face_recognition/compare`, {
method: 'POST', method: 'POST',
headers: { headers: {
'accept': 'application/json', 'accept': 'application/json',
'x-api-key': `${API_KEY}`, 'x-api-key': API_KEY,
}, },
body: formData, body: formData,
})
.then(response => {
if (!response.ok) {
return response.json().then(errorData => {
throw new Error(errorData.detail || 'Comparison failed, please try again');
}); });
}
return response.json();
})
.then(result => {
console.log('📡 API Response:', result);
const data = await response.json(); const { result: compareResult } = result.details.data;
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); // Process image URLs
await fetchImage(imageUrl2, setImageCompareUrl); if (compareResult.image_url1) {
fetchImage(compareResult.image_url1, setImageUrl);
}
if (compareResult.image_url2) {
fetchImage(compareResult.image_url2, setImageCompareUrl);
}
setVerified(data.details.data.result.verified); // Update states
setResultImageLabel(selectedImageName) setVerified(compareResult.verified);
setResultCompareImageLabel(selectedCompareImageName) setResultImageLabel(selectedImageName);
setSelectedQuota(data.details.data.result.quota) setResultCompareImageLabel(selectedCompareImageName);
setSelectedQuota(compareResult.quota);
setShowResult(true); setShowResult(true);
console.log('Comparison successful:', data); })
} else { .catch(error => {
console.error('Error response:', data); console.error('🔥 Request Failed:', error);
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.'; setErrorMessage(error.message);
setErrorMessage(errorMessage); setShowResult(false);
} })
} catch (error) { .finally(() => {
console.error('Error:', error);
setErrorMessage('An error occurred while making the request.');
} 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);