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

init commit

Browse Source
This commit is contained in:
Rizqika
2024-11-11 10:03:20 +07:00
parent d72887445e
commit bd3a3d42ce
53 changed files with 18089 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

720
src/screens/Biometric/FaceRecognition/Section/Compare.jsx Normal file
View File

@@ -0,0 +1,720 @@
import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
import { FileUploader } from 'react-drag-drop-files';
import Select from 'react-select'
import { height } from '@fortawesome/free-solid-svg-icons/fa0';
const Compare = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL
const API_KEY = process.env.REACT_APP_API_KEY
const [isSelectOpen, setIsSelectOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState('');
const [selectedCompareImageName, setSelectedCompareImageName] = useState('');
const fileInputRef = useRef(null);
const fileCompareInputRef = useRef(null);
const [showResult, setShowResult] = useState(false);
const [applicationId, setApplicationId] = useState('');
const [selectedQuota, setSelectedQuota] = useState(0);
const [thresholdId, setTresholdId] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [imageUrl, setImageUrl] = useState('');
const [imageCompareUrl, setImageCompareUrl] = useState('');
const [verified, setVerified] = useState(null);
const fileTypes = ["JPG", "JPEG", "PNG"];
const [file, setFile] = useState(null); // For the first image
const [compareFile, setCompareFile] = useState(null); // For the second imag
const [applicationIds, setApplicationIds] = useState([]);
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
const thresholdIds = [
{ id: 1, name: 'cosine', displayName: 'Basic' },
{ id: 2, name: 'euclidean', displayName: 'Medium' },
{ id: 3, name: 'euclidean_l2', displayName: 'High' },
];
const [applicationError, setApplicationError] = useState('');
const [thresholdError, setThresholdError] = useState('');
const [uploadError, setUploadError] = useState('');
const [compareUploadError, setCompareUploadError] = useState('');
useEffect(() => {
const fetchApplicationIds = async () => {
try {
setIsLoading(true)
const url = `${BASE_URL}/application/list`;
console.log('Fetching URL:', url); // Log the URL
const response = await fetch(url, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': `${API_KEY}`,
},
});
const data = await response.json();
if (data.status_code === 200) {
const ids = data.details.data.map(app => app.id);
console.log('Application Id: ' + ids); // Log the IDs
setApplicationIds(data.details.data); // Update state with the fetched data
} else {
console.error('Failed to fetch data:', data.details.message);
}
} catch (error) {
console.error('Error fetching application IDs:', error);
} finally {
setIsLoading(false)
}
};
fetchApplicationIds();
}, []);
const handleApplicationChange = (selectedOption) => {
if (selectedOption) {
const selectedId = selectedOption.value;
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
if (selectedApp) {
setApplicationId(selectedId);
setSelectedQuota(selectedApp.quota); // Set the selected quota
}
}
};
const handleInputChangeApplication = (newInputValue) => {
// Limit input to 15 characters for Application ID
if (newInputValue.length <= 15) {
setInputValueApplication(newInputValue);
}
};
const handleFocus = () => {
setIsSelectOpen(true);
};
const handleBlur = () => {
setIsSelectOpen(false);
};
const handleImageUpload = (file) => {
if (file && fileTypes.includes(file.name.split('.').pop().toUpperCase())) {
setSelectedImageName(file.name);
setFile(file); // Store the file directly in state
setUploadError(''); // Clear error if valid
}
};
const handleCompareImageUpload = (file) => {
if (file && fileTypes.includes(file.name.split('.').pop().toUpperCase())) {
setSelectedCompareImageName(file.name);
setCompareFile(file); // Store the compare file directly in state
setCompareUploadError(''); // Clear error if valid
}
};
const handleImageCancel = () => {
setSelectedImageName('');
setImageUrl('');
if (fileInputRef.current) fileInputRef.current.value = '';
};
const handleCompareImageCancel = () => {
setSelectedCompareImageName('');
setImageCompareUrl('');
if (fileCompareInputRef.current) fileCompareInputRef.current.value = '';
};
const handleCheckClick = async () => {
// Reset error messages
setApplicationError('');
setThresholdError('');
setUploadError('');
setCompareUploadError('');
setErrorMessage('');
// Initialize a flag to check for errors
let hasError = false;
// Validate Application ID
if (!applicationId) {
setApplicationError('Please select an Application ID before compare.');
hasError = true;
}
// Validate Threshold ID
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
if (!selectedThreshold) {
setThresholdError('Invalid threshold selected.');
hasError = true;
}
// Validate Image Uploads
if (!selectedImageName) {
setUploadError('Please upload a face photo before compare.');
hasError = true;
}
if (!selectedCompareImageName) {
setCompareUploadError('Please upload a compare face photo before compare.');
hasError = true;
}
// If there are any errors, return early
if (hasError) {
return;
}
// Prepare FormData and log inputs
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('threshold', selectedThreshold);
// Log the inputs
console.log('Inputs:', {
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);
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) {
console.error('Error:', error);
setErrorMessage('An error occurred while making the request.');
} finally {
setIsLoading(false);
}
};
const fetchImage = async (imageUrl, setImageUrl) => {
setIsLoading(true);
try {
const response = await fetch(imageUrl, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': `${API_KEY}`, // Ensure this is valid
}
});
if (!response.ok) {
const errorDetails = await response.json();
console.error('Image fetch error details:', errorDetails);
setErrorMessage('Failed to fetch image, please try again.');
return;
}
const imageBlob = await response.blob();
const imageData = URL.createObjectURL(imageBlob);
console.log('Fetched image URL:', imageData);
setImageUrl(imageData); // Set the state with the blob URL
} catch (error) {
console.error('Error fetching image:', error);
setErrorMessage(error.message);
} finally {
setIsLoading(false);
}
};
const applicationOptions = applicationIds.map(app => ({
value: app.id,
label: app.name
}));
const ResultsSection = ({ showResult, verified, imageUrl, selectedImageName, imageCompareUrl, selectedCompareImageName }) => (
showResult && (
<div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', fontSize: '1.5rem', textAlign: 'center' }}>Results</h1>
<div style={styles.resultContainer}>
<table style={styles.tableStyle}>
<tbody>
<tr>
<td style={{ border: '0.1px solid gray', padding: '8px', width: '30%' }}>Similarity</td>
<td style={styles.similarityText(verified)}>
{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}
</td>
</tr>
</tbody>
</table>
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '20px' }}>
<div style={styles.imageContainer}>
<img
src={imageUrl || "path-to-your-image"}
alt="Original Foto"
style={styles.imageStyle}
/>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedImageName}</p>
</div>
<div style={styles.imageCompareContainer}>
<img
src={imageCompareUrl || "path-to-your-image"}
alt="Compare Foto"
style={styles.imageStyle}
/>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedCompareImageName}</p>
</div>
</div>
</div>
</div>
)
);
const formatFileSize = (sizeInBytes) => {
if (sizeInBytes < 1024) {
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
} else if (sizeInBytes < 1048576) {
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
} else {
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
}
};
return (
<div>
{/* Inject keyframes for the spinner */}
<style>
{`
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
},
@media (max-width: 768px) {
.resultContainer {
flex-direction: column;
align-items: center;
}
}
`}
</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">
<div className="select-wrapper">
<Select
id="applicationId"
value={applicationOptions.find(option => option.value === applicationId)}
onChange={handleApplicationChange} // Pass selected option directly
options={applicationOptions}
placeholder="Select Application ID"
isSearchable
menuPortalTarget={document.body}
menuPlacement="auto"
inputValue={inputValueApplication}
onInputChange={handleInputChangeApplication}
/>
</div>
{applicationError && <small style={styles.uploadError}>{applicationError}</small>}
</div>
<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 and Threshold Selection */}
<div className="form-group row align-items-center">
<div className="col-md-6">
<div style={styles.selectWrapper}>
<select
id="thresholdId"
className="form-control"
style={styles.select}
value={thresholdId}
onChange={(e) => setTresholdId(e.target.value)}
onFocus={handleFocus}
onBlur={handleBlur}
>
<option value="">Select Threshold</option>
{thresholdIds.map((app) => (
<option key={app.id} value={app.name}>
{app.displayName}
</option>
))}
</select>
<FontAwesomeIcon
icon={isSelectOpen ? faChevronDown : faChevronLeft}
style={styles.chevronIcon}
/>
{thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
</div>
</div>
</div>
<div className="row">
{/* Upload Image #1 */}
<div className="col-md-6">
<div className="row form-group mt-4">
<label style={{ fontWeight: 600, fontSize: '14px', color: '#212529' }}>Upload Face Photo</label>
<FileUploader
handleChange={handleImageUpload}
name="file"
types={fileTypes}
multiple={false}
children={
<div style={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>
<a href="#">Browse</a>
<p className="text-muted">Recommended size: 250x250 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
</div>
{/* Display uploaded image name */}
{selectedImageName && (
<div className="mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
</div>
{/* Upload Image #2 */}
<div className="col-md-6">
<div className="row form-group mt-4">
<label style={{ fontWeight: 600, fontSize: '14px', color: '#212529' }}>Upload Compare Photo</label>
<FileUploader
handleChange={handleCompareImageUpload}
name="file"
types={fileTypes}
multiple={false}
children={
<div style={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>
<a href="#">Browse</a>
<p className="text-muted">Recommended size: 250x250 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
{compareUploadError && <small style={styles.uploadError}>{compareUploadError}</small>}
</div>
{/* Display uploaded image name */}
{selectedCompareImageName && (
<div className="mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedCompareImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
</div>
</div>
{/* 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 && (
<ResultsSection/>
)}
</div>
)
}
export default Compare
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: '40svh',
cursor: 'pointer',
marginTop: '1rem',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
padding: '25px 10px 10px 10px'
},
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', // Padding lebih seragam
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f9f9f9',
overflow: 'hidden',
},
fileWrapper: {
display: 'flex',
alignItems: 'center',
flex: '1',
},
textContainer: {
flex: '1',
fontSize: '16px', // Ukuran font lebih kecil
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', // Ukuran ikon sedikit lebih kecil
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: {
margin: '20px 0',
padding: '10px',
border: '1px solid #e0e0e0',
borderRadius: '8px',
backgroundColor: '#f9f9f9',
},
resultContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
tableStyle: {
width: '100%',
borderCollapse: 'collapse',
marginBottom: '20px',
},
imageContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flex: 1,
padding: '10px',
},
imageCompareContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flex: 1,
padding: '10px',
},
imageStyle: {
width: '100%',
height: 'auto',
maxWidth: '150px', // Limit image width
borderRadius: '8px',
},
similarityText: (verified) => ({
border: '0.1px solid gray',
padding: '8px',
color: verified ? 'green' : 'red',
fontWeight: 'bold',
}),
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',
},
};

841
src/screens/Biometric/FaceRecognition/Section/Enroll.jsx Normal file
View File

@@ -0,0 +1,841 @@
import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
import { FileUploader } from 'react-drag-drop-files';
import Select from 'react-select'
const Enroll = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL
const API_KEY = process.env.REACT_APP_API_KEY
const fileTypes = ["JPG", "JPEG", "PNG"];
const [file, setFile] = useState(null);
const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState('');
const fileInputRef = useRef(null);
const [showResult, setShowResult] = useState(false);
const [applicationId, setApplicationId] = useState('');
const [applicationIds, setApplicationIds] = useState([]);
const [selectedQuota, setSelectedQuota] = useState(0);
const [subjectId, setSubjectId] = useState('');
const [subjectIds, setSubjectIds] = useState([]);
const [imageUrl, setImageUrl] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [applicationError, setApplicationError] = useState('');
const [subjectError, setSubjectError] = useState('');
const [imageError, setImageError] = useState('');
const [subjectAvailabilityMessage, setSubjectAvailabilityMessage] = useState(''); // Message for subject availability
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
const [options, setOptions] = useState([]);
const [isMobile, setIsMobile] = useState(false);
const styles = {
// Existing 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', // Default height for non-mobile devices
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '22px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
},
// Mobile responsive styles for upload area
uploadAreaMobile: {
backgroundColor: '#e6f2ff',
height: '50svh', // Reduced height for mobile
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '18px', // Adjusted padding for mobile
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', // Padding lebih seragam
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f9f9f9',
overflow: 'hidden',
},
fileWrapper: {
display: 'flex',
alignItems: 'center',
flex: '1',
},
textContainer: {
flex: '1',
fontSize: '16px', // Ukuran font lebih kecil
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', // Ukuran ikon sedikit lebih kecil
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',
},
// New styles added and merged
containerResultStyle: {
padding: '20px',
border: '1px solid #0053b3',
borderRadius: '5px',
width: '100%',
margin: '20px auto',
},
resultContainer: {
display: 'flex',
justifyContent: 'space-between', // Horizontal alignment
alignItems: 'flex-start', // Align items at the top
flexDirection: isMobile ? 'column' : 'row', // Stack vertically on mobile
width: '100%',
},
resultsTable: {
width: '60%',
borderCollapse: 'collapse',
},
resultsTableMobile: {
width: '100%',
borderCollapse: 'collapse',
},
resultsCell: {
padding: '8px',
width: '30%',
fontSize: isMobile ? '14px' : '16px',
},
resultsValueCell: {
padding: '8px',
width: '70%',
fontSize: isMobile ? '14px' : '16px',
color: 'red',
},
resultsTrueValue: {
color: 'inherit',
},
imageContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile
width: '100%',
marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile
},
imageStyle: {
width: '300px',
height: '300px',
borderRadius: '5px',
},
imageStyleMobile: {
width: '100%', // Make image responsive on mobile
height: 'auto',
borderRadius: '5px',
},
imageDetails: {
marginTop: '10px',
fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile
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',
},
resultsTable: {
width: '60%',
borderCollapse: 'collapse',
},
resultsRow: {
border: '0.1px solid gray',
padding: '8px',
},
resultsCell: {
padding: '8px',
width: '30%',
},
resultsValueCell: {
padding: '8px',
width: '70%',
color: 'red',
},
resultsTrueValue: {
color: 'inherit',
},
customLabel: {
fontWeight: 600, fontSize: '14px', color: '#212529'
},
// Mobile responsiveness adjustments (if necessary)
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',
},
}
useEffect(() => {
const fetchApplicationIds = async () => {
setIsLoading(true);
const url = `${BASE_URL}/application/list`;
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': API_KEY,
},
});
const data = await response.json();
if (data.status_code === 200) {
setApplicationIds(data.details.data);
} else {
console.error('Failed to fetch data:', data.details.message);
}
} catch (error) {
console.error('Error fetching application IDs:', error);
} finally {
setIsLoading(false);
}
};
fetchApplicationIds();
setOptions(subjectIds.map(id => ({ value: id, label: id })));
const handleResize = () => {
setIsMobile(window.innerWidth <= 768); // Deteksi apakah layar kecil (mobile)
};
window.addEventListener('resize', handleResize);
handleResize(); // Initial check
return () => window.removeEventListener('resize', handleResize);
}, [subjectIds]);
const handleApplicationChange = async (selectedOption) => {
const selectedId = selectedOption.value;
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
if (!selectedOption) {
console.error("Selected option is undefined");
return;
}
if (selectedApp) {
setSelectedQuota(selectedApp.quota);
}
setApplicationId(selectedId);
// Fetch subjects related to the application
await fetchSubjectIds(selectedId);
};
const handleInputChangeApplication = (newInputValue) => {
// Limit input to 15 characters for Application ID
if (newInputValue.length <= 15) {
setInputValueApplication(newInputValue);
}
};
const fetchSubjectIds = async (appId) => {
setIsLoading(true);
try {
const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&search=${subjectId}&limit=10`, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': API_KEY,
},
});
const data = await response.json();
console.log("Fetched Subject IDs:", data); // Log data fetched from API
if (data.status_code === 200) {
setSubjectIds(data.details.data);
} else {
console.error('Failed to fetch subject IDs:', data.details.message);
}
} catch (error) {
console.error('Error fetching subject IDs:', error);
} finally {
setIsLoading(false);
}
};
const handleImageUpload = (file) => {
// 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);
setImageError(''); // Clear any previous errors
} else {
alert('Image format is not supported');
setImageError('Image format is not supported');
setFile(null);
}
} else {
console.error('No file selected or invalid file object.');
}
};
const handleImageCancel = () => {
setSelectedImageName('');
setFile(null);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
const handleEnrollClick = async () => {
let hasError = false; // Track if there are any errors
// Validate inputs and set corresponding errors
const validationErrors = {
imageError: !selectedImageName ? 'Please upload a face photo before enrolling.' : '',
applicationError: !applicationId ? 'Please select an Application ID before enrolling.' : '',
subjectError: !subjectId ? 'Please enter a Subject ID before enrolling.' : '',
};
// Update state with errors
if (validationErrors.imageError) {
setImageError(validationErrors.imageError);
hasError = true;
} else {
setImageError(''); // Clear error if valid
}
if (validationErrors.applicationError) {
setApplicationError(validationErrors.applicationError);
hasError = true;
} else {
setApplicationError(''); // Clear error if valid
}
if (validationErrors.subjectError) {
setSubjectError(validationErrors.subjectError);
hasError = true;
} else {
setSubjectError(''); // Clear error if valid
}
// If there are errors, return early
if (hasError) return;
if (!file) {
setImageError('No file selected. Please upload a valid image file.');
return;
}
const formData = new FormData();
formData.append('application_id', String(applicationId));
formData.append('subject_id', subjectId);
formData.append('file', file);
console.log('Inputs:', {
applicationId,
subjectId,
file: file.name,
});
setIsLoading(true);
setErrorMessage(''); // Clear previous error message
try {
const response = await fetch(`${BASE_URL}/face_recognition/enroll`, {
method: 'POST',
body: formData,
headers: {
'accept': 'application/json',
'x-api-key': `${API_KEY}`,
}
});
if (!response.ok) {
const errorDetails = await response.json();
console.error('Response error details:', errorDetails);
// Periksa jika detail error terkait dengan Subject ID
if (errorDetails.detail && errorDetails.detail.includes('Subject ID')) {
setSubjectError(errorDetails.detail); // Tampilkan error di bawah input Subject ID
} else {
setErrorMessage(errorDetails.detail || 'Failed to enroll, please try again');
}
return;
}
const result = await response.json();
console.log('Enrollment response:', result);
if (result.details && result.details.data && result.details.data.image_url) {
const imageFileName = result.details.data.image_url.split('/').pop();
console.log('Image URL:', result.details.data.image_url);
await fetchImage(imageFileName);
} else {
console.error('Image URL not found in response:', result);
setErrorMessage('Image URL not found in response. Please try again.');
}
setShowResult(true);
console.log('Enrollment successful:', result);
} catch (error) {
console.error('Error during API call:', error);
setErrorMessage('An unexpected error occurred. Please try again.');
} 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) {
const errorDetails = await response.json();
console.error('Image fetch error details:', errorDetails);
setErrorMessage('Failed to fetch image, please try again.');
return;
}
const imageBlob = await response.blob();
const imageData = URL.createObjectURL(imageBlob);
console.log('Fetched image URL:', imageData);
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 applicationOptions = applicationIds.map(app => ({
value: app.id,
label: app.name
}));
const handleSubjectIdChange = async (e) => {
const id = e.target.value;
setSubjectId(id);
console.log("Current Subject ID Input:", id); // Debugging: Log input
if (id) {
const exists = subjectIds.includes(id);
console.log("Subject IDs:", subjectIds); // Debugging: Log existing Subject IDs
if (exists) {
setSubjectAvailabilityMessage('Subject already exists.'); // Error message
setSubjectError(''); // Clear any subject error
} else {
setSubjectAvailabilityMessage('This subject ID is available.'); // Success message
setSubjectError('');
}
} else {
setSubjectAvailabilityMessage(''); // Clear message if input is empty
}
};
// Fungsi untuk mengonversi ukuran file dari byte ke KB/MB
const formatFileSize = (sizeInBytes) => {
if (sizeInBytes < 1024) {
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
} else if (sizeInBytes < 1048576) {
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
} else {
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
}
};
return (
<div>
{/* Inject keyframes for the spinner */}
<style>
{`
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.select-wrapper {
max-height: 200px; /* Limit the height of the container */
overflow-y: auto; /* Enable vertical scroll if the content overflows */
}
`}
</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">
<div className="select-wrapper">
<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>
<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>
<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">
<input
type="text"
id="subjectId"
className="form-control"
placeholder="Enter Subject ID"
value={subjectId}
onChange={handleSubjectIdChange}
onFocus={() => fetchSubjectIds(applicationId)}
maxLength={15}
/>
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
{subjectAvailabilityMessage && (
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
{subjectAvailabilityMessage}
</small>
)}
</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}
onDrop={(files) => {
if (files && files[0]) {
handleImageUpload(files[0]);
} else {
console.error('No valid files dropped');
}
}}
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>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
)}
/>
<input
type="file"
id="fileUpload"
ref={fileInputRef}
style={{ display: 'none' }}
accept="image/jpeg, image/jpg"
onChange={e => handleImageUpload(e.target.files[0])}
/>
{imageError && <small style={{ color: 'red' }}>{imageError}</small>}
</div>
</div>
{/* Display uploaded image name */}
{selectedImageName && (
<div className="col-md-6 mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
{/* Submit Button */}
<div style={styles.submitButton}>
<button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
<p className="text-white mb-0">Enroll Now</p>
</button>
</div>
{/* Result Section */}
{showResult && (
<div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
<div style={styles.resultContainer}>
{/* Table Styling: responsive */}
<table style={isMobile ? styles.resultsTableMobile : styles.resultsTable}>
<tbody>
<tr>
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
<td style={{ ...styles.resultsValueCell, ...styles.resultsTrueValue }}>True</td>
</tr>
{/* More rows can go here */}
</tbody>
</table>
{/* Image and Details Container */}
<div style={styles.imageContainer}>
<img
src={imageUrl || "path-to-your-image"}
alt="Contoh Foto"
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
/>
<p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}>
{selectedImageName}
</p>
</div>
</div>
</div>
)}
</div>
);
}
export default Enroll;

11
src/screens/Biometric/FaceRecognition/Section/Liveness.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const Liveness = () => {
return (
<div>
<h1>Face Recognition - Liveness</h1>
</div>
)
}
export default Liveness

662
src/screens/Biometric/FaceRecognition/Section/Search.jsx Normal file
View File

@@ -0,0 +1,662 @@
import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
import { FileUploader } from 'react-drag-drop-files';
import Select from 'react-select'
const fileTypes = ["JPG", "JPEG", "PNG"]; // Allowed file types
const Search = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL
const API_KEY = process.env.REACT_APP_API_KEY
const [isSelectOpen, setIsSelectOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState('');
const fileInputRef = useRef(null);
const [showResult, setShowResult] = useState(false);
const [applicationId, setApplicationId] = useState('');
const [selectedQuota, setSelectedQuota] = useState(0);
const [limitId, setLimitId] = useState('');
const [imageUrls, setImageUrls] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [results, setResults] = useState([]);
const [file, setFile] = useState(null);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
const [applicationIds, setApplicationIds] = useState([]);
const [inputValueApplication, setInputValueApplication] = useState(''); // Controlled input value for Application ID
const [limitIds] = useState(
Array.from({ length: 10 }, (_, index) => ({
id: index + 1,
name: index + 1,
}))
);
const [applicationIdError, setApplicationIdError] = useState('');
const [limitIdError, setLimitIdError] = useState('');
const [imageError, setImageError] = useState('');
const [uploadedFile, setUploadedFile] = useState(null);
const formatFileSize = (sizeInBytes) => {
if (sizeInBytes < 1024) {
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
} else if (sizeInBytes < 1048576) {
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
} else {
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
}
};
useEffect(() => {
const fetchApplicationIds = async () => {
try {
setIsLoading(true)
const url = `${BASE_URL}/application/list`;
console.log('Fetching URL:', url); // Log the URL
const response = await fetch(url, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': `${API_KEY}`,
},
});
const data = await response.json();
if (data.status_code === 200) {
const ids = data.details.data.map(app => app.id);
console.log('Application Id: ' + ids); // Log the IDs
setApplicationIds(data.details.data); // Update state with the fetched data
} else {
console.error('Failed to fetch data:', data.details.message);
}
} catch (error) {
console.error('Error fetching application IDs:', error);
} finally {
setIsLoading(false)
}
};
fetchApplicationIds();
const handleResize = () => setIsMobile(window.innerWidth <= 768);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const applicationOptions = applicationIds.map(app => ({
value: app.id,
label: app.name
}));
const handleApplicationChange = (selectedOption) => {
if (selectedOption) {
const selectedId = selectedOption.value;
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
if (selectedApp) {
setSelectedQuota(selectedApp.quota); // Set the selected quota
setApplicationId(selectedId); // Set the selected application ID
}
}
};
const handleInputChangeApplication = (newInputValue) => {
// Limit input to 15 characters for Application ID
if (newInputValue.length <= 15) {
setInputValueApplication(newInputValue);
}
};
const handleFocus = () => {
setIsSelectOpen(true);
};
const handleBlur = () => {
setIsSelectOpen(false);
};
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
} 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
}
};
const handleImageCancel = () => {
setSelectedImageName('');
setFile(null);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
const handleCheckClick = async () => {
// Clear existing errors
setApplicationIdError('');
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
}
// Validate Limit ID
if (!limitId) {
setLimitIdError('Please select a Limit before searching.');
hasError = true; // Set error flag
}
// Validate Image Upload
if (!selectedImageName) {
setImageError('Please upload an image file.');
hasError = true; // Set error flag
}
// Check if the file is uploaded
if (!uploadedFile) {
setErrorMessage('Please upload an image file.');
hasError = true; // Set error flag
}
// If any errors were found, do not proceed
if (hasError) {
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);
}
} 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) {
const errorDetails = await response.json();
console.error('Image fetch error details:', errorDetails);
setErrorMessage('Failed to fetch image, please try again.');
return;
}
const imageBlob = await response.blob();
const imageData = URL.createObjectURL(imageBlob);
console.log('Fetched image URL:', imageData);
setImageUrls(prevUrls => [...prevUrls, imageData]); // Store the blob URL
} 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 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: '50svh',
cursor: 'pointer',
marginTop: '1rem',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
},
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', // Padding lebih seragam
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f9f9f9',
overflow: 'hidden',
},
fileWrapper: {
display: 'flex',
alignItems: 'center',
flex: '1',
},
textContainer: {
flex: '1',
fontSize: '16px', // Ukuran font lebih kecil
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', // Ukuran ikon sedikit lebih kecil
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',
},
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',
},
containerResultStyle: {
padding: '1rem',
backgroundColor: '#f7f7f7',
borderRadius: '8px',
margin: '1rem',
width: isMobile ? '100%' : '50%',
},
resultContainer: {
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
flexWrap: 'wrap',
gap: '1rem',
justifyContent: 'center',
},
resultItem: {
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
alignItems: 'center',
textAlign: 'center',
padding: '0.5rem',
backgroundColor: '#fff',
border: '1px solid #ddd',
borderRadius: '8px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
width: isMobile ? '100%' : '150px',
},
resultTextContainer: {
marginBottom: isMobile ? '0' : '0.5rem',
},
resultText: {
fontSize: '0.9rem',
color: '#333',
margin: '0.2rem 0',
},
resultImage: {
width: '80px',
height: '80px',
borderRadius: '50%',
marginTop: isMobile ? '0' : '0.5rem',
},
};
return (
<div>
{/* Inject keyframes for the spinner */}
<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">
<div className="select-wrapper">
<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}
/>
</div>
{applicationIdError && (
<small style={styles.uploadError}>{applicationIdError}</small>
)}
</div>
<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>
{/* limit ID Input and Threshold Selection */}
<div className="form-group row align-items-center">
<div className="col-md-6">
<div style={styles.selectWrapper}>
<select
id="limitId"
className="form-control"
style={styles.select}
value={limitId}
onChange={(e) => setLimitId(e.target.value)}
onFocus={handleFocus}
onBlur={handleBlur}
>
<option value="">Select Limit</option>
{limitIds.map((app) => (
<option key={app.id} value={app.id}>
{app.name}
</option>
))}
</select>
<FontAwesomeIcon
icon={isSelectOpen ? faChevronDown : faChevronLeft}
style={styles.chevronIcon}
/>
{limitIdError && (
<small style={styles.uploadError}>{limitIdError}</small>
)}
</div>
</div>
</div>
{/* Upload Section */}
{/* Drag and Drop File Uploader */}
<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}
onDrop={(files) => handleImageUpload(files[0])}
children={
<div style={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>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
<input
type="file"
id="fileUpload"
ref={fileInputRef}
style={{ display: 'none' }}
accept="image/jpeg, image/jpg"
onChange={e => handleImageUpload(e.target.files[0])}
/>
{(imageError || errorMessage) && (
<small style={{ color: 'red' }}>
{imageError || errorMessage}
</small>
)}
</div>
</div>
{selectedImageName && (
<div className="col-md-6 mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
{/* 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 && results.length > 0 && (
<div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
<div style={styles.resultContainer}>
{results.slice(0, limitId).map((result, index) => (
<div key={index} style={styles.resultItem}>
<div style={styles.resultTextContainer}>
<p style={styles.resultText}>Image Name: image_{index + 1}</p>
<p style={styles.resultText}>Similarity: {result.similarity}%</p>
<p style={styles.resultText}>Distance: {result.distance}</p>
</div>
<img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
</div>
))}
</div>
</div>
)}
</div>
);
}
export default Search

724
src/screens/Biometric/FaceRecognition/Section/Verify.jsx Normal file
View File

@@ -0,0 +1,724 @@
import React, { useState, useRef, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
import { FileUploader } from 'react-drag-drop-files';
import Select from 'react-select'
const Verify = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL;
const API_KEY = process.env.REACT_APP_API_KEY;
const fileTypes = ["JPG", "JPEG", "PNG"];
const [file, setFile] = useState(null);
const [isSelectOpen, setIsSelectOpen] = useState(false);
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 fileInputRef = 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 thresholdIds = [
{ id: 1, name: 'cosine', displayName: 'Basic' },
{ id: 2, name: 'euclidean', displayName: 'Medium' },
{ id: 3, name: 'euclidean_l2', displayName: 'High' },
];
const options = subjectIds.map(id => ({ value: id, label: id }));
const [inputValue, setInputValue] = useState('');
const applicationOptions = applicationIds.map(app => ({
value: app.id,
label: app.name
}));
useEffect(() => {
const fetchApplicationIds = async () => {
try {
setIsLoading(true);
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();
if (data.status_code === 200) {
setApplicationIds(data.details.data);
} else {
console.error('Failed to fetch data:', data.details.message);
}
} catch (error) {
console.error('Error fetching application IDs:', error);
} finally {
setIsLoading(false);
}
};
fetchApplicationIds();
const handleResize = () => setIsMobile(window.innerWidth <= 768);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
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',
padding: '22px 10px 0 20px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
},
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', // Padding lebih seragam
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#f9f9f9',
overflow: 'hidden',
},
fileWrapper: {
display: 'flex',
alignItems: 'center',
flex: '1',
},
textContainer: {
flex: '1',
fontSize: '16px', // Ukuran font lebih kecil
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', // Ukuran ikon sedikit lebih kecil
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%',
maxWidth: '600px',
margin: '20px auto',
},
resultContainer: {
display: 'flex',
alignItems: 'center',
width: '100%',
},
tableStyle: {
width: '60%',
borderCollapse: 'collapse',
},
resultsTableMobile: {
width: '100%',
borderCollapse: 'collapse',
fontSize: '14px',
},
resultsCell: {
border: '0.1px solid gray',
padding: '8px',
},
resultsValueCell: {
border: '0.1px solid gray',
padding: '8px',
width: '60%',
},
imageContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: isMobile ? '20px' : '0',
},
imageStyle: {
width: '300px',
height: '300px',
borderRadius: '5px',
objectFit: 'cover',
},
imageStyleMobile: {
width: '100%',
height: 'auto',
},
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',
},
};
const handleApplicationChange = async (selectedOption) => {
if (!selectedOption) {
console.error("Selected option is undefined");
return;
}
const selectedId = selectedOption.value;
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
if (selectedApp) {
setSelectedQuota(selectedApp.quota);
}
setApplicationId(selectedId);
if (selectedId) {
await fetchSubjectIds(selectedId);
} else {
setSubjectIds([]);
setSubjectAvailabilityMessage('');
}
};
const fetchSubjectIds = async (appId) => {
setIsLoading(true);
try {
const response = await fetch(`${BASE_URL}/trx_face/list/subject?application_id=${appId}&search=${subjectId}&limit=99`, {
method: 'GET',
headers: {
'accept': 'application/json',
'x-api-key': API_KEY,
},
});
const data = await response.json();
console.log("Fetched Subject IDs:", data); // Log data fetched from API
if (data.status_code === 200) {
setSubjectIds(data.details.data);
} else {
console.error('Failed to fetch subject IDs:', data.details.message);
}
} catch (error) {
console.error('Error fetching subject IDs:', error);
} finally {
setIsLoading(false);
}
};
const handleFocus = () => {
setIsSelectOpen(true);
};
const handleBlur = () => {
setIsSelectOpen(false);
};
const handleImageUpload = (file) => {
// Ensure file exists before accessing its properties
if (!file) {
console.error('File is undefined');
setUploadError('Please upload a valid image file.');
return;
}
const fileExtension = file.name.split('.').pop().toUpperCase();
if (fileTypes.includes(fileExtension)) {
setSelectedImageName(file.name);
setFile(file);
setUploadError(''); // Clear any previous errors
} else {
// Show an alert if the file type is not supported
alert('Image format is not supported');
setUploadError('Image format is not supported'); // Optionally set error message to display on the UI
setFile(null); // Optionally clear the selected file
}
};
const handleImageCancel = () => {
setSelectedImageName('');
setFile(null);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
const handleCheckClick = async () => {
// Reset previous error messages
setErrorMessage('');
setApplicationError('');
setSubjectError('');
setThresholdError('');
setUploadError('');
let hasError = false; // Track if any errors occur
if (!applicationId) {
setApplicationError('Please select an Application ID before enrolling.');
hasError = true; // Mark that an error occurred
}
if (!subjectId) {
setSubjectError('Please enter a Subject ID before enrolling.');
hasError = true; // Mark that an error occurred
}
const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
if (!selectedThreshold) {
setThresholdError('Invalid threshold selected.');
hasError = true; // Mark that an error occurred
}
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
console.log('Selected Image Name:', selectedImageName);
console.log('Application ID:', applicationId);
console.log('Subject ID:', subjectId);
console.log('Selected Threshold:', selectedThreshold);
const formData = new FormData();
formData.append('application_id', applicationId);
formData.append('threshold', selectedThreshold);
formData.append('subject_id', subjectId);
// const file = fileInputRef.current.files[0];
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();
if (response.ok) {
if (data.details && data.details.data && data.details.data.result && data.details.data.result.image_url) {
const imageFileName = data.details.data.result.image_url.split('/').pop();
await fetchImage(imageFileName);
}
setShowResult(true);
setVerified(data.details.data.result.verified);
} 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);
}
};
// Fungsi untuk mengonversi ukuran file dari byte ke KB/MB
const formatFileSize = (sizeInBytes) => {
if (sizeInBytes < 1024) {
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
} else if (sizeInBytes < 1048576) {
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
} else {
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
}
};
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">
<div className="select-wrapper">
<Select
id="applicationId"
value={applicationOptions.find(option => option.value === applicationId)}
onChange={handleApplicationChange}
options={applicationOptions}
placeholder="Select Application ID"
isSearchable
menuPortalTarget={document.body} // Use this for scroll behavior
menuPlacement="auto"
inputValue={inputValueApplication}
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
/>
</div>
{applicationError && <small style={styles.uploadError}>{applicationError}</small>}
</div>
<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"
options={options}
value={options.find(option => option.value === subjectId)}
onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
onInputChange={(value) => {
// Check if input value length is within the 15-character limit
if (value.length <= 15) {
setInputValue(value); // Set the input value if within limit
}
}}
onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
placeholder="Enter Subject ID"
isClearable
noOptionsMessage={() => (
<div style={{ color: 'red' }}>Subject ID not registered.</div>
)}
inputValue={inputValue} // Bind the inputValue state to control the input
/>
{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
}}
onFocus={handleFocus}
onBlur={handleBlur}
>
<option value="">Select Threshold</option>
{thresholdIds.map((app) => (
<option key={app.id} value={app.name}>
{app.displayName}
</option>
))}
</select>
<FontAwesomeIcon
icon={isSelectOpen ? faChevronDown : faChevronLeft}
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}
onDrop={(files) => handleImageUpload(files[0])}
children={
<div style={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>
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted">Supported file types: JPG, JPEG</p>
</div>
}
/>
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
</div>
</div>
{/* Display uploaded image name */}
{selectedImageName && (
<div className="col-md-6 mt-4" style={styles.wrapper}>
<div style={styles.fileWrapper}>
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
<div style={styles.textContainer}>
<h5>Uploaded File:</h5>
<p>{selectedImageName}</p>
{file && (
<p style={styles.fileSize}>
Size: {formatFileSize(file.size)}
</p>
)}
</div>
<div style={styles.closeButtonContainer}>
<button
style={styles.closeButton}
onClick={handleImageCancel}
aria-label="Remove uploaded image"
>
<FontAwesomeIcon
icon={faTimes}
style={styles.closeIcon}
/>
</button>
</div>
</div>
</div>
)}
{/* 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: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
<div style={{ ...styles.resultContainer, flexDirection: isMobile ? 'column' : 'row' }}>
<table style={isMobile ? styles.resultsTableMobile : styles.tableStyle}>
<tbody>
<tr>
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
<td
style={{
...styles.resultsValueCell,
color: verified ? 'green' : verified === false ? 'red' : 'black',
}}
>
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
</td>
</tr>
</tbody>
</table>
<div style={{ ...styles.imageContainer, width: isMobile ? '100%' : '30%' }}>
<img
src={imageUrl || "path-to-your-image"}
alt="Example Image"
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
/>
<p style={{ marginTop: '10px', fontSize: isMobile ? '12px' : '16px' }}>
File Name: {selectedImageName}
</p>
</div>
</div>
</div>
)}
</div>
);
}
export default Verify;

13
src/screens/Biometric/FaceRecognition/Section/index.js Normal file
View File

@@ -0,0 +1,13 @@
import Enroll from "./Enroll";
import VerifySection from "./Verify";
import Compare from "./Compare"
import Liveness from "./Liveness"
import Search from "./Search"
export {
Enroll,
VerifySection,
Compare,
Liveness,
Search
}

11
src/screens/Biometric/FaceRecognition/Summary.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const Summary = () => {
return (
<div>
<h1>Summary</h1>
</div>
)
}
export default Summary

11
src/screens/Biometric/FaceRecognition/Transaction.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const Transaction = () => {
return (
<div>
<h1>Transaction</h1>
</div>
)
}
export default Transaction

123
src/screens/Biometric/FaceRecognition/Verify.jsx Normal file
View File

@@ -0,0 +1,123 @@
import React, { useEffect, useState } from 'react';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import {
Enroll,
Compare,
Liveness,
Search,
VerifySection
} from './Section';
const Verify = () => {
const verifyTabs = [
{ name: 'Enroll', link: 'face-enroll' },
{ name: 'Verify', link: 'face-verifysection' },
{ name: 'Liveness', link: 'face-liveness' },
{ name: 'Compare', link: 'face-compare' },
{ name: 'Search', link: 'face-search' },
];
const [isMobile, setIsMobile] = useState(false);
const navigate = useNavigate();
// Redirect otomatis ke rute default saat akses ke /face-verify
useEffect(() => {
if (window.location.pathname === '/face-verify') {
navigate('face-enroll', { replace: true });
}
}, [navigate]);
// Update state isMobile berdasarkan ukuran layar
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 768);
};
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<div className="container" style={styles.container}>
{/* Static Content */}
<div className="row-card border-left border-primary shadow mb-4" style={styles.welcomeCard}>
<div className="d-flex flex-column justify-content-start align-items-start p-4">
<h4 className="mb-3 text-start">
<i className="fas fa-warning fa-bold me-3"></i>Alert
</h4>
<p className="mb-0 text-start">
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
Experience the ease and flexibility of trying out all our features firsthand.
</p>
<div className="d-flex flex-row mt-3">
<Link to="/createApps" style={{ textDecoration: 'none' }}>
<button className="btn d-flex justify-content-center align-items-center me-2" style={styles.createButton}>
<i className="fas fa-plus text-white me-2"></i>
<p className="text-white mb-0">Create New App ID</p>
</button>
</Link>
</div>
</div>
</div>
{/* Tab Navigation */}
<div style={styles.section}>
<div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
<div className="d-flex flex-wrap">
{verifyTabs.map((tab) => (
<Link
key={tab.link}
to={tab.link}
className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
style={styles.tabLink}
>
{tab.name}
</Link>
))}
</div>
</div>
{/* Dynamic Tab Content */}
<div className="tab-content">
<Routes>
<Route path="face-enroll" element={<Enroll />} />
<Route path="face-verifysection" element={<VerifySection />} />
<Route path="face-liveness" element={<Liveness />} />
<Route path="face-compare" element={<Compare />} />
<Route path="face-search" element={<Search />} />
</Routes>
</div>
</div>
</div>
);
};
export default Verify;
const styles = {
container: {
marginTop: '3%',
padding: '0 15px',
},
welcomeCard: {
backgroundColor: '#E2FBEA',
borderLeft: '4px solid #0542CC',
borderRadius: '5px',
marginBottom: '20px',
},
createButton: {
backgroundColor: '#0542CC',
},
section: {
padding: '20px',
border: '0.1px solid rgba(0, 0, 0, 0.2)',
borderLeft: '4px solid #0542CC',
borderRadius: '10px',
width: '100%',
},
tabLink: {
padding: '10px 20px',
},
};

9
src/screens/Biometric/FaceRecognition/index.js Normal file
View File

@@ -0,0 +1,9 @@
import FaceVerify from "./Verify";
import FaceSummary from "./Summary";
import FaceTransaction from "./Transaction";
export {
FaceVerify,
FaceSummary,
FaceTransaction
}