-
-
- )}
-
- {/* Application ID Selection */}
- Loading...
-
-
-
- {/* Subject ID Input */}
-
-
-
-
-
- {applicationError && {applicationError}}
-
-
- - Remaining Quota -
-
- {selectedQuota}
- (times)
-
-
-
-
- {/* Upload Section */}
-
- fetchSubjectIds(applicationId)}
- maxLength={15}
- />
- {subjectError && {subjectError}}
- {subjectAvailabilityMessage && (
-
- {subjectAvailabilityMessage}
-
- )}
-
-
-
-
- {/* Display uploaded image name */}
- {selectedImageName && (
-
-
- Upload Face Photo
-
- {
- if (files && files[0]) {
- handleImageUpload(files[0]);
- } else {
- console.error('No valid files dropped');
- }
- }}
- children={(
-
-
-
-
- )}
- />
- handleImageUpload(e.target.files[0])}
- />
- {imageError && {imageError}}
- Drag and Drop Here
-Or
- fileInputRef.current.click()}>Browse -Recommended size: 300x300 (Max File Size: 2MB)
-Supported file types: JPG, JPEG
-
-
- )}
-
- {/* Submit Button */}
-
-
-
-
- Uploaded File:
-{selectedImageName}
- {file && ( -- Size: {formatFileSize(file.size)} -
- )} -
-
-
-
-
-
-
- {/* Result Section */}
- {showResult && (
-
-
Results
-
- {/* Table Styling: responsive */}
-
-
-
-
- {/* Image and Details Container */}
-
);
+
}
export default Enroll;
diff --git a/src/screens/Biometric/FaceRecognition/Section/Search.jsx b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
index d0e8a3a..e952e42 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Search.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Search.jsx
@@ -121,25 +121,25 @@ const Search = () => {
};
const handleImageUpload = (file) => {
- // Ensure file exists before accessing its properties
- if (!file) {
- console.error('File is undefined');
- setImageError('Please upload a valid image file.');
- return;
- }
-
- const fileExtension = file.name.split('.').pop().toUpperCase();
- if (fileTypes.includes(fileExtension)) {
- setSelectedImageName(file.name);
- setFile(file);
- setImageError(''); // Clear any previous errors
+ // Ensure the file is not undefined or null before accessing its properties
+ if (file && file.name) {
+ const fileExtension = file.name.split('.').pop().toUpperCase();
+ if (fileTypes.includes(fileExtension)) {
+ setSelectedImageName(file.name);
+ setFile(file);
+ setUploadedFile(file); // Set uploadedFile to the selected file
+ setImageError(''); // Clear any previous errors
+ } else {
+ alert('Image format is not supported');
+ setImageError('Image format is not supported');
+ setFile(null);
+ setUploadedFile(null); // Clear uploadedFile if the file is unsupported
+ }
} else {
- // Show an alert if the file type is not supported
- alert('Image format is not supported');
- setImageError('Image format is not supported'); // Optionally set error message to display on the UI
- setFile(null); // Optionally clear the selected file
+ console.error('No file selected or invalid file object.');
}
- };
+ };
+
const handleImageCancel = () => {
@@ -156,87 +156,86 @@ const Search = () => {
setLimitIdError('');
setImageError('');
setErrorMessage('');
-
+
// Initialize validation flags
let hasError = false;
-
+
// Validate Application ID
if (!applicationId) {
- setApplicationIdError('Please select an Application ID before searching.');
- hasError = true; // Set error flag
+ setApplicationIdError('Please select an Application ID before searching.');
+ hasError = true;
}
-
+
// Validate Limit ID
if (!limitId) {
- setLimitIdError('Please select a Limit before searching.');
- hasError = true; // Set error flag
+ setLimitIdError('Please select a Limit before searching.');
+ hasError = true;
}
-
+
// Validate Image Upload
if (!selectedImageName) {
- setImageError('Please upload an image file.');
- hasError = true; // Set error flag
+ setImageError('Please upload an image file.');
+ hasError = true;
}
-
+
// Check if the file is uploaded
if (!uploadedFile) {
- setErrorMessage('Please upload an image file.');
- hasError = true; // Set error flag
+ setErrorMessage('Please upload an image file.');
+ hasError = true;
}
-
+
// If any errors were found, do not proceed
if (hasError) {
- return;
+ return;
}
-
+
const parsedLimitId = parseInt(limitId, 10);
-
+
const formData = new FormData();
formData.append('application_id', applicationId);
formData.append('threshold', 1);
formData.append('limit', parsedLimitId);
formData.append('file', uploadedFile, uploadedFile.name); // Use the uploaded file
-
+
setIsLoading(true);
-
+
try {
- const response = await fetch(`${BASE_URL}/face_recognition/search`, {
- method: 'POST',
- headers: {
- 'accept': 'application/json',
- 'x-api-key': `${API_KEY}`,
- },
- body: formData,
- });
-
- const data = await response.json();
-
- console.log('Response Data:', data); // Log the response
-
- if (response.ok) {
- const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
- const processedResults = resultsArray.map(item => ({
- identity: item.identity,
- similarity: item.similarity,
- imageUrl: item.image_url,
- distance: item.distance,
- }));
-
- // Fetch images using their URLs
- await Promise.all(processedResults.map(async result => {
- const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
- await fetchImage(imageFileName); // Fetch image
- console.log('multiple image data: ', result.imageUrl); // Log the URL
- }));
-
- setResults(processedResults);
- setShowResult(true);
-
- } else {
- console.error('Error response:', JSON.stringify(data, null, 2));
- const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
- setErrorMessage(errorMessage);
- }
+ const response = await fetch(`${BASE_URL}/face_recognition/search`, {
+ method: 'POST',
+ headers: {
+ 'accept': 'application/json',
+ 'x-api-key': `${API_KEY}`,
+ },
+ body: formData,
+ });
+
+ const data = await response.json();
+
+ console.log('Response Data:', data);
+
+ if (response.ok) {
+ const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
+ const processedResults = resultsArray.map(item => ({
+ identity: item.identity,
+ similarity: item.similarity,
+ imageUrl: item.image_url,
+ distance: item.distance,
+ }));
+
+ // Fetch images using their URLs
+ await Promise.all(processedResults.map(async result => {
+ const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
+ await fetchImage(imageFileName); // Fetch image
+ console.log('multiple image data: ', result.imageUrl);
+ }));
+
+ setResults(processedResults);
+ setShowResult(true);
+ } else {
+ console.error('Error response:', JSON.stringify(data, null, 2));
+ const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
+ setErrorMessage(errorMessage);
+ }
} catch (error) {
console.error('Error:', error);
setErrorMessage('An error occurred while making the request.');
@@ -245,6 +244,7 @@ const Search = () => {
}
};
+
const fetchImage = async (imageFileName) => {
setIsLoading(true);
try {
@@ -322,7 +322,7 @@ const Search = () => {
},
uploadArea: {
backgroundColor: '#e6f2ff',
- height: '50svh',
+ height: '40svh',
cursor: 'pointer',
marginTop: '1rem',
padding: '1rem',
@@ -438,18 +438,18 @@ const Search = () => {
backgroundColor: '#f7f7f7',
borderRadius: '8px',
margin: '1rem',
- width: isMobile ? '100%' : '50%',
+ width: '100%', // Full width for large screens
},
resultContainer: {
display: 'flex',
- flexDirection: isMobile ? 'column' : 'row',
+ flexDirection: 'row',
flexWrap: 'wrap',
gap: '1rem',
- justifyContent: 'center',
+ justifyContent: 'center',
},
resultItem: {
display: 'flex',
- flexDirection: isMobile ? 'row' : 'column',
+ flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
padding: '0.5rem',
@@ -457,10 +457,10 @@ const Search = () => {
border: '1px solid #ddd',
borderRadius: '8px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
- width: isMobile ? '100%' : '150px',
+ width: '150px', // Default width for larger screens
},
resultTextContainer: {
- marginBottom: isMobile ? '0' : '0.5rem',
+ marginBottom: '0.5rem',
},
resultText: {
fontSize: '0.9rem',
@@ -471,9 +471,21 @@ const Search = () => {
width: '80px',
height: '80px',
borderRadius: '50%',
- marginTop: isMobile ? '0' : '0.5rem',
+ marginTop: '0.5rem',
+ },
+
+ // Media query for mobile responsiveness
+ '@media screen and (max-width: 768px)': {
+ containerResultStyle: {
+ width: '100%', // Full width on mobile
+ },
+ resultContainer: {
+ flexDirection: 'column', // Stack results vertically on small screens
+ },
+ resultItem: {
+ width: '100%', // Make result items take full width on mobile
+ },
},
-
};
return (
@@ -599,34 +611,21 @@ const Search = () => {
| Similarity | -True | -
- 
+
+
+ {isLoading && (
+
+
+
+
+
+ )}
+
+ Loading...
+
+
- )}
-
+
+
+
+
+ {applicationError && {applicationError}}
+
+
+ Remaining Quota +
+
+ {selectedQuota}
+ (times)
+
+
+
+ fetchSubjectIds(applicationId)}
+ maxLength={15}
+ />
+ {subjectError && {subjectError}}
+ {subjectAvailabilityMessage && (
+
+ {subjectAvailabilityMessage}
+
+ )}
+
+
+
+
+ {selectedImageName && (
+
+
+ Upload Face Photo
+
+ {
+ if (files && files[0]) {
+ handleImageUpload(files[0]);
+ }
+ }}
+ children={
+
+
+
+
+ }
+ />
+ handleImageUpload(e.target.files[0])}
+ />
+ {imageError && {imageError}}
+ Drag and Drop Here
+Or
+ fileInputRef.current.click()}>Browse +Recommended size: 300x300 (Max File Size: 2MB)
+Supported file types: JPG, JPEG
+
+
+ )}
+ {errorMessage && {errorMessage}}
+
+ File: {selectedImageName}
+ {file && ( ++ Size: {formatFileSize(file.size)} +
+ )} + +
+
+
+
+ {showResult && (
+
+
+ )}
+ Results
+
+
+
+
+
+ | Similarity | +True | +
+
+
+ + {selectedImageName} +
+