876 lines
26 KiB
JavaScript
876 lines
26 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faChevronDown, faTimes } from '@fortawesome/free-solid-svg-icons';
|
|
import Select from 'react-select'
|
|
import { ServerDownAnimation } from '../../../../assets/images';
|
|
import { FileUploader } from 'react-drag-drop-files';
|
|
|
|
const Verify = () => {
|
|
const BASE_URL = process.env.REACT_APP_BASE_URL;
|
|
const API_KEY = process.env.REACT_APP_API_KEY;
|
|
|
|
const fileTypes = ["JPG", "JPEG"];
|
|
const [file, setFile] = useState(null);
|
|
|
|
const [errorMessage, setErrorMessage] = useState('');
|
|
const [uploadError, setUploadError] = useState('');
|
|
const [applicationError, setApplicationError] = useState('');
|
|
const [subjectError, setSubjectError] = useState('');
|
|
const [thresholdError, setThresholdError] = useState('');
|
|
const [selectedImageName, setSelectedImageName] = useState('');
|
|
const [resultImageLabel, setResultImageLabel] = useState('');
|
|
const inputRef = useRef(null);
|
|
const [showResult, setShowResult] = useState(false);
|
|
const [applicationId, setApplicationId] = useState('');
|
|
const [thresholdId, setThresholdId] = useState('');
|
|
const [selectedQuota, setSelectedQuota] = useState(0);
|
|
const [subjectId, setSubjectId] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [verified, setVerified] = useState(null);
|
|
const [imageUrl, setImageUrl] = useState('');
|
|
const [applicationIds, setApplicationIds] = useState([]);
|
|
const [subjectIds, setSubjectIds] = useState([]);
|
|
const [subjectAvailabilityMessage, setSubjectAvailabilityMessage] = useState(''); // Message for subject availability
|
|
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
|
|
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
|
|
const [isServer, setIsServer] = useState(true);
|
|
const [imageError, setImageError] = useState('');
|
|
|
|
const thresholdIds = [
|
|
{ id: 1, name: 'cosine', displayName: 'Basic' },
|
|
{ id: 2, name: 'euclidean', displayName: 'Medium' },
|
|
{ id: 3, name: 'euclidean_l2', displayName: 'High' },
|
|
];
|
|
|
|
const [inputValue, setInputValue] = useState('');
|
|
|
|
const options = subjectIds.map(id => ({
|
|
value: id,
|
|
label: id
|
|
}));
|
|
|
|
const applicationOptions = applicationIds.map(app => ({
|
|
value: app.id,
|
|
label: app.name
|
|
}));
|
|
|
|
const fetchApplicationIds = async () => {
|
|
try {
|
|
const url = `${BASE_URL}/application/list`;
|
|
const response = await fetch(url, {
|
|
method: 'GET',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'x-api-key': `${API_KEY}`,
|
|
},
|
|
});
|
|
const data = await response.json();
|
|
setIsServer(true)
|
|
return data.details.data; // assuming the API returns an array of applications
|
|
} catch (error) {
|
|
console.error('Error fetching application IDs:', error);
|
|
setIsServer(false)
|
|
return [];
|
|
}
|
|
};
|
|
|
|
// Sample function to fetch Subject IDs based on applicationId
|
|
const fetchSubjectIds = async (appId) => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&limit=99`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'x-api-key': `${API_KEY}`,
|
|
},
|
|
});
|
|
const data = await response.json();
|
|
return data.details.data; // assuming the API returns an array of subjects
|
|
} catch (error) {
|
|
console.error('Error fetching subject IDs:', error);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setIsLoading(true);
|
|
const data = await fetchApplicationIds();
|
|
setApplicationIds(data);
|
|
setIsLoading(false);
|
|
};
|
|
|
|
fetchData();
|
|
|
|
const handleResize = () => setIsMobile(window.innerWidth <= 768);
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []); // Empty dependency array, so this runs only once when the component mounts
|
|
|
|
// Fetch Subject IDs when applicationId changes
|
|
useEffect(() => {
|
|
const fetchSubjects = async () => {
|
|
if (applicationId) {
|
|
setIsLoading(true);
|
|
const subjects = await fetchSubjectIds(applicationId);
|
|
setSubjectIds(subjects);
|
|
setIsLoading(false);
|
|
} else {
|
|
setSubjectIds([]); // Clear subjects if no applicationId is selected
|
|
}
|
|
};
|
|
|
|
fetchSubjects();
|
|
}, [applicationId]); // Runs whenever applicationId changes
|
|
|
|
// Handler for changing applicationId
|
|
const handleApplicationChange = (selectedOption) => {
|
|
const selectedId = selectedOption.value;
|
|
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
|
|
|
|
if (selectedApp) {
|
|
setSelectedQuota(selectedApp.quota);
|
|
}
|
|
|
|
setApplicationId(selectedOption.value); // Update applicationId when user selects a new option
|
|
};
|
|
|
|
|
|
const handleImageUpload = (file) => {
|
|
if (!file) {
|
|
setImageError('Please select a file');
|
|
return;
|
|
}
|
|
|
|
// Check file size (2MB = 2 * 1024 * 1024 bytes)
|
|
const maxSize = 2 * 1024 * 1024;
|
|
if (file.size > maxSize) {
|
|
setImageError('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)) {
|
|
setImageError('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) {
|
|
setImageError('Image dimensions must not exceed 300x300 pixels');
|
|
setFile(null);
|
|
setSelectedImageName('');
|
|
return;
|
|
}
|
|
|
|
// All validations passed
|
|
setSelectedImageName(file.name);
|
|
setFile(file);
|
|
setImageError('');
|
|
};
|
|
|
|
img.onerror = () => {
|
|
URL.revokeObjectURL(objectUrl);
|
|
setImageError('Invalid image file');
|
|
setFile(null);
|
|
setSelectedImageName('');
|
|
};
|
|
|
|
img.src = objectUrl;
|
|
};
|
|
|
|
|
|
const handleImageCancel = () => {
|
|
setSelectedImageName('');
|
|
setFile(null);
|
|
if (inputRef.current) {
|
|
inputRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
const handleCheckClick = async () => {
|
|
// Reset previous error messages
|
|
setErrorMessage('');
|
|
setApplicationError('');
|
|
setSubjectError('');
|
|
setThresholdError('');
|
|
setUploadError('');
|
|
|
|
let hasError = false; // Track if any errors occur
|
|
|
|
// Validate the applicationId
|
|
if (!applicationId) {
|
|
setApplicationError('Please select an Application ID before enrolling.');
|
|
hasError = true; // Mark that an error occurred
|
|
}
|
|
|
|
// Validate the subjectId
|
|
if (!subjectId) {
|
|
setSubjectError('Please enter a Subject ID before enrolling.');
|
|
hasError = true; // Mark that an error occurred
|
|
}
|
|
|
|
// Validate thresholdId
|
|
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
|
|
if (!selectedThreshold) {
|
|
setThresholdError('Invalid threshold selected.');
|
|
hasError = true; // Mark that an error occurred
|
|
}
|
|
|
|
// Validate image upload
|
|
if (!selectedImageName) {
|
|
setUploadError('Please upload a face photo before verifying.');
|
|
hasError = true; // Mark that an error occurred
|
|
}
|
|
|
|
// If there are any errors, stop the function
|
|
if (hasError) {
|
|
return;
|
|
}
|
|
|
|
// Log the input values for debugging
|
|
console.log('Selected Image Name:', selectedImageName);
|
|
console.log('Application ID:', applicationId);
|
|
console.log('Subject ID:', subjectId);
|
|
console.log('Selected Threshold:', selectedThreshold);
|
|
|
|
// Prepare FormData for the API request
|
|
const formData = new FormData();
|
|
formData.append('application_id', applicationId);
|
|
formData.append('threshold', selectedThreshold);
|
|
formData.append('subject_id', subjectId);
|
|
|
|
if (file) {
|
|
formData.append('file', file, file.name);
|
|
} else {
|
|
setUploadError('Please upload an image file.');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/face_recognition/verifiy`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'x-api-key': API_KEY,
|
|
},
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
// Log the response data for debugging
|
|
console.log('API Response Data:', data);
|
|
|
|
if (response.ok) {
|
|
if (data.details && data.details.data && data.details.data.result) {
|
|
const result = data.details.data.result;
|
|
|
|
// Update selectedQuota with the quota received from API
|
|
setSelectedQuota(result.quota);
|
|
|
|
if (result.image_url) {
|
|
const imageFileName = result.image_url.split('/').pop();
|
|
await fetchImage(imageFileName);
|
|
}
|
|
|
|
setShowResult(true);
|
|
setVerified(result.verified);
|
|
setResultImageLabel(selectedImageName);
|
|
}
|
|
} else {
|
|
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.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
const fetchImage = async (imageFileName) => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'accept': 'application/json',
|
|
'x-api-key': API_KEY,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
setErrorMessage('Failed to fetch image, please try again.');
|
|
return;
|
|
}
|
|
|
|
const imageBlob = await response.blob();
|
|
const imageData = URL.createObjectURL(imageBlob);
|
|
setImageUrl(imageData);
|
|
} catch (error) {
|
|
console.error('Error fetching image:', error);
|
|
setErrorMessage(error.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const CustomLabel = ({ overRide, children, ...props }) => {
|
|
// We intentionally don't pass `overRide` to the label
|
|
return (
|
|
<label {...props}>
|
|
{children}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
const handleInputChangeApplication = (newInputValue) => {
|
|
// Limit input to 15 characters for Application ID
|
|
if (newInputValue.length <= 15) {
|
|
setInputValueApplication(newInputValue);
|
|
}
|
|
};
|
|
|
|
if (!isServer) {
|
|
return (
|
|
<div style={{ textAlign: 'center', marginTop: '50px' }}>
|
|
<img
|
|
src={ServerDownAnimation}
|
|
alt="Server Down Animation"
|
|
style={{ width: '18rem', height: '18rem', marginBottom: '20px' }}
|
|
/>
|
|
<h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
|
|
<p>Silakan periksa koneksi internet Anda atau coba lagi nanti.</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
style={{
|
|
padding: '10px 20px',
|
|
backgroundColor: '#0542cc',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '5px',
|
|
cursor: 'pointer'
|
|
}}>
|
|
Coba Lagi
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
formGroup: {
|
|
marginTop: '-45px',
|
|
},
|
|
selectWrapper: {
|
|
position: 'relative',
|
|
marginTop: '0',
|
|
},
|
|
select: {
|
|
width: '100%',
|
|
paddingRight: '30px',
|
|
},
|
|
chevronIcon: {
|
|
position: 'absolute',
|
|
right: '10px',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
pointerEvents: 'none',
|
|
},
|
|
remainingQuota: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: '4px',
|
|
},
|
|
quotaText: {
|
|
fontSize: '40px',
|
|
color: '#0542cc',
|
|
fontWeight: '600',
|
|
},
|
|
timesText: {
|
|
marginLeft: '8px',
|
|
verticalAlign: 'super',
|
|
fontSize: '20px',
|
|
},
|
|
uploadArea: {
|
|
backgroundColor: '#e6f2ff',
|
|
height: '250px',
|
|
cursor: 'pointer',
|
|
marginTop: '1rem',
|
|
paddingTop: '22px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
border: '1px solid #ced4da',
|
|
borderRadius: '0.25rem',
|
|
},
|
|
uploadAreaMobile: {
|
|
backgroundColor: '#e6f2ff',
|
|
height: '50svh', // Use viewport height for a more responsive size
|
|
cursor: 'pointer',
|
|
marginTop: '1rem',
|
|
paddingTop: '18px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
border: '1px solid #ced4da',
|
|
borderRadius: '0.25rem',
|
|
padding: '20px',
|
|
},
|
|
uploadIcon: {
|
|
fontSize: '40px',
|
|
color: '#0542cc',
|
|
marginBottom: '7px',
|
|
},
|
|
uploadText: {
|
|
color: '#1f2d3d',
|
|
fontWeight: '400',
|
|
fontSize: '16px',
|
|
lineHeight: '13px',
|
|
},
|
|
wrapper: {
|
|
border: '1px solid #ddd',
|
|
borderRadius: '6px',
|
|
padding: '18px 10px 0 8px',
|
|
height: '13svh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: '#f9f9f9',
|
|
overflow: 'hidden',
|
|
},
|
|
fileWrapper: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flex: '1',
|
|
},
|
|
textContainer: {
|
|
flex: '1',
|
|
fontSize: '16px',
|
|
marginLeft: '6px',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
marginTop: '1rem',
|
|
},
|
|
fileSize: {
|
|
fontSize: '12px',
|
|
color: '#555',
|
|
marginBottom: '2rem',
|
|
},
|
|
closeButtonContainer: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginLeft: 'auto',
|
|
},
|
|
closeButton: {
|
|
background: 'transparent',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
padding: '0',
|
|
},
|
|
imageIcon: {
|
|
color: '#0542cc',
|
|
fontSize: '18px',
|
|
marginRight: '6px',
|
|
},
|
|
closeIcon: {
|
|
color: 'red',
|
|
fontSize: '18px',
|
|
},
|
|
submitButton: {
|
|
marginLeft: 'auto',
|
|
marginTop: '4rem',
|
|
textAlign: 'start',
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
},
|
|
uploadError: {
|
|
color: 'red',
|
|
fontSize: '12px',
|
|
marginTop: '5px',
|
|
},
|
|
containerResultStyle: {
|
|
padding: '20px',
|
|
border: '1px solid #0053b3',
|
|
borderRadius: '5px',
|
|
width: '100%',
|
|
margin: '20px auto',
|
|
},
|
|
resultContainer: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
flexWrap: 'wrap', // Allow wrapping on smaller screens
|
|
},
|
|
resultsTable: {
|
|
width: '60%',
|
|
borderCollapse: 'collapse',
|
|
},
|
|
resultsTableMobile: {
|
|
width: '100%',
|
|
borderCollapse: 'collapse',
|
|
},
|
|
resultsCell: {
|
|
padding: '8px',
|
|
width: '30%',
|
|
fontSize: '16px',
|
|
},
|
|
resultsValueCell: {
|
|
padding: '8px',
|
|
width: '70%',
|
|
fontSize: '16px',
|
|
color: 'red',
|
|
},
|
|
resultsTrueValue: {
|
|
color: 'inherit',
|
|
},
|
|
imageContainer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
width: '100%',
|
|
marginTop: '20px',
|
|
},
|
|
imageStyle: {
|
|
width: isMobile ? '200px' : '320px', // 200px for mobile, 320px for larger screens
|
|
height: isMobile ? '200px' : '320px',
|
|
borderRadius: '5px',
|
|
objectFit: 'cover', // Ensures the image fits within the specified dimensions
|
|
},
|
|
imageStyleMobile: {
|
|
width: '100%',
|
|
height: 'auto',
|
|
borderRadius: '5px',
|
|
},
|
|
imageDetails: {
|
|
marginTop: '10px',
|
|
fontSize: '16px',
|
|
color: '#1f2d3d',
|
|
},
|
|
loadingOverlay: {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 1000,
|
|
},
|
|
spinner: {
|
|
border: '4px solid rgba(0, 0, 0, 0.1)',
|
|
borderLeftColor: '#0542cc',
|
|
borderRadius: '50%',
|
|
width: '90px',
|
|
height: '90px',
|
|
animation: 'spin 1s ease-in-out infinite',
|
|
},
|
|
loadingText: {
|
|
marginTop: '10px',
|
|
fontSize: '1.2rem',
|
|
color: '#fff',
|
|
textAlign: 'center',
|
|
},
|
|
uploadedFileWrapper: {
|
|
backgroundColor: '#fff',
|
|
border: '0.2px solid gray',
|
|
padding: '15px 0 0 17px',
|
|
borderRadius: '5px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
justifyContent: 'space-between',
|
|
},
|
|
uploadedFileInfo: {
|
|
marginRight: '18rem',
|
|
marginTop: '0.2rem',
|
|
},
|
|
uploadedFileText: {
|
|
fontSize: '16px',
|
|
color: '#1f2d3d',
|
|
},
|
|
customLabel: {
|
|
fontWeight: 600,
|
|
fontSize: '14px',
|
|
color: '#212529',
|
|
},
|
|
responsiveImageStyle: {
|
|
width: '100%',
|
|
maxHeight: '250px',
|
|
objectFit: 'cover',
|
|
marginTop: '20px',
|
|
},
|
|
responsiveResultContainer: {
|
|
padding: '1rem',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '8px',
|
|
marginTop: '20px',
|
|
},
|
|
responsiveImageContainer: {
|
|
marginTop: '20px',
|
|
textAlign: 'center',
|
|
},
|
|
responsiveSubmitButton: {
|
|
marginTop: '1rem',
|
|
},
|
|
responsiveLoadingOverlay: {
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0',
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: '10',
|
|
},
|
|
responsiveSpinner: {
|
|
border: '4px solid #f3f3f3',
|
|
borderTop: '4px solid #3498db',
|
|
borderRadius: '50%',
|
|
width: '50px',
|
|
height: '50px',
|
|
animation: 'spin 2s linear infinite',
|
|
},
|
|
responsiveLoadingText: {
|
|
color: 'white',
|
|
marginTop: '10px',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<style>
|
|
{`
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
{isLoading && (
|
|
<div style={styles.loadingOverlay}>
|
|
<div style={styles.spinner}></div>
|
|
<p style={styles.loadingText}>Loading...</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Application ID Selection */}
|
|
<div className="form-group row align-items-center">
|
|
<div className="col-md-6">
|
|
<Select
|
|
id="applicationId"
|
|
value={applicationOptions.find(option => option.value === applicationId)}
|
|
onChange={handleApplicationChange}
|
|
options={applicationOptions}
|
|
placeholder="Select Application ID"
|
|
isSearchable
|
|
menuPortalTarget={document.body}
|
|
menuPlacement="auto"
|
|
inputValue={inputValueApplication}
|
|
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
|
/>
|
|
</div>
|
|
{applicationError && <small style={{color: 'red'}}>{applicationError}</small>}
|
|
<div className="col-md-6">
|
|
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
|
Remaining Quota
|
|
</p>
|
|
<div style={styles.remainingQuota}>
|
|
<span style={styles.quotaText}>{selectedQuota}</span> {/* Display selected quota */}
|
|
<span style={styles.timesText}>(times)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subject ID Input */}
|
|
<div className="form-group row align-items-center">
|
|
<div className="col-md-6">
|
|
<Select
|
|
id="subjectId"
|
|
value={options.find(option => option.value === subjectId)}
|
|
onChange={(selectedOption) => setSubjectId(selectedOption ? selectedOption.value : '')}
|
|
options={options}
|
|
inputValue={inputValue}
|
|
onInputChange={(newInputValue) => {
|
|
if (newInputValue.length <= 15) { // Limit the input length
|
|
setInputValue(newInputValue);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
|
|
{subjectAvailabilityMessage && (
|
|
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
|
|
{subjectAvailabilityMessage}
|
|
</small>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-md-6">
|
|
<div style={styles.selectWrapper}>
|
|
<select
|
|
id="thresholdId"
|
|
className="form-control"
|
|
style={styles.select}
|
|
value={thresholdId}
|
|
onChange={(e) => {
|
|
setThresholdId(e.target.value);
|
|
setThresholdError(''); // Clear error if valid
|
|
}}
|
|
>
|
|
<option value="">Select Threshold</option>
|
|
{thresholdIds.map((app) => (
|
|
<option key={app.id} value={app.name}>
|
|
{app.displayName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<FontAwesomeIcon
|
|
icon={faChevronDown}
|
|
style={styles.chevronIcon}
|
|
/>
|
|
{thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload Section */}
|
|
<div className='col-md-6'>
|
|
<div className="row form-group mt-4">
|
|
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
|
Upload Face Photo
|
|
</CustomLabel>
|
|
<FileUploader
|
|
handleChange={handleImageUpload}
|
|
name="file"
|
|
types={fileTypes}
|
|
multiple={false}
|
|
onTypeError={(err) => {
|
|
setImageError('Only JPG/JPEG files are allowed');
|
|
setFile(null);
|
|
setSelectedImageName('');
|
|
}}
|
|
onDrop={(files) => {
|
|
if (files && files[0]) {
|
|
handleImageUpload(files[0]);
|
|
}
|
|
}}
|
|
children={
|
|
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
|
|
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
|
<p style={styles.uploadText}>Drag and Drop Here</p>
|
|
<p>Or</p>
|
|
<span
|
|
style={{
|
|
color: '#0542cc',
|
|
textDecoration: 'underline',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
Browse
|
|
</span>
|
|
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
|
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
|
</div>
|
|
}
|
|
/>
|
|
{imageError && (
|
|
<small className="text-danger mt-2" style={{ fontSize: '12px' }}>
|
|
{imageError}
|
|
</small>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Display uploaded image name */}
|
|
{selectedImageName && (
|
|
<div className="mt-3">
|
|
<p><strong>File:</strong> {selectedImageName}</p>
|
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
|
</button>
|
|
</div>
|
|
)}
|
|
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
|
|
|
|
{/* Submit Button */}
|
|
<div style={styles.submitButton}>
|
|
<button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
|
<p className="text-white mb-0">Check Now</p>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
{/* Results Section */}
|
|
{showResult && (
|
|
<div style={styles.containerResultStyle}>
|
|
<h1 style={{ color: '#0542cc', fontSize: '2rem' }}>Results</h1>
|
|
<div style={styles.resultContainer}>
|
|
<table style={styles.resultsTableMobile}>
|
|
<tbody>
|
|
<tr>
|
|
<td style={styles.resultsCell}>Similarity</td>
|
|
<td style={{ ...styles.resultsValueCell, color: verified ? 'green' : 'red' }}>
|
|
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style={styles.imageContainer}>
|
|
<img
|
|
src={imageUrl || "path-to-your-image"}
|
|
alt="Example Image"
|
|
style={{
|
|
maxWidth: '100%',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
objectFit: 'contain',
|
|
borderRadius: '5px'
|
|
}}
|
|
/>
|
|
<p style={{ marginTop: '10px' }}>
|
|
File Name: {resultImageLabel}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
export default Verify;
|