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

Implement API on OCR KTP

Browse Source
This commit is contained in:
Rizqika 2024-11-12 12:15:10 +07:00
parent 0a46ddab93
commit 83f9bd135c
2 changed files with 320 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

494
src/screens/Biometric/OcrKtp/Verify.jsx
View File

@ -1,24 +1,38 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronLeft, faImage, faTimes } from '@fortawesome/free-solid-svg-icons'; import { faImage, faTimes, faChevronDown, faChevronLeft, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
import { Link } from 'react-router-dom';
import Select from 'react-select'
import { DummyKtp } from '../../../assets/images';
const CustomLabel = ({ overRide, children, ...props }) => {
return <label {...props}>{children}</label>;
};
const Verify = () => { const Verify = () => {
const BASE_URL = process.env.REACT_APP_BASE_URL; const BASE_URL = process.env.REACT_APP_BASE_URL;
const API_KEY = process.env.REACT_APP_API_KEY; const API_KEY = process.env.REACT_APP_API_KEY;
const fileTypes = ["image/jpeg", "image/png"]; // Use MIME types for better file validation const fileTypes = ["image/jpeg", "image/png"];
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
const [isSelectOpen, setIsSelectOpen] = useState(false); const [isMobile, setIsMobile] = useState(false);
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState(''); const [selectedImageName, setSelectedImageName] = useState('');
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const [applicationId, setApplicationId] = useState(''); const [applicationId, setApplicationId] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [applicationIds, setApplicationIds] = useState([]); const [applicationIds, setApplicationIds] = useState([]);
const [imageUrl, setImageUrl] = useState('');
const [imageError, setImageError] = useState(''); const [imageError, setImageError] = useState('');
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [showResult, setShowResult] = useState(false); const [showResult, setShowResult] = useState(false);
const [inputValueApplication, setInputValueApplication] = useState('');
// Validation state
const [validationErrors, setValidationErrors] = useState({
applicationId: '',
file: ''
});
// Fetch Application IDs // Fetch Application IDs
useEffect(() => { useEffect(() => {
@ -51,47 +65,91 @@ const Verify = () => {
}; };
fetchApplicationIds(); fetchApplicationIds();
const checkMobile = () => {
setIsMobile(window.innerWidth <= 768); // Example: 768px as the threshold for mobile devices
};
// Check on initial load
checkMobile();
// Add resize listener to adjust `isMobile` state on window resize
window.addEventListener('resize', checkMobile);
// Clean up the event listener when the component unmounts
return () => {
window.removeEventListener('resize', checkMobile);
};
}, []); }, []);
const handleFocus = () => setIsSelectOpen(true); const handleInputChangeApplication = (inputValue) => {
const handleBlur = () => setIsSelectOpen(false); setInputValueApplication(inputValue);
};
// Handle file upload
const handleImageUpload = (e) => { const handleApplicationChange = (selectedOption) => {
const file = e.target.files[0]; setApplicationId(selectedOption ? selectedOption.value : '');
if (!file) return; };
const fileType = file.type; // Use MIME type instead of file extension const applicationOptions = applicationIds.map(app => ({
if (!fileTypes.includes(fileType)) { value: app.id, // This is what will be sent when an option is selected
setImageError('Image format is not supported'); label: app.name // This is what will be displayed in the dropdown
setFile(null); }));
return;
} // Handle file upload
const handleFileDrop = (files) => {
if (file.size > 2 * 1024 * 1024) { // 2MB check if (files && files[0]) {
setImageError('File size exceeds 2MB'); handleImageUpload(files[0]);
setFile(null); } else {
return; console.error('No valid files dropped');
} }
};
setSelectedImageName(file.name);
setFile(file); const handleImageUpload = (file) => {
setImageError(''); setFile(file);
setSelectedImageName(file.name);
// Validate file type
if (!fileTypes.includes(file.type)) {
setImageError('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
} else if (file.size > 2 * 1024 * 1024) { // Max 2MB
setImageError('File size exceeds 2MB.');
} else {
setImageError('');
}
}; };
// Cancel file upload
const handleImageCancel = () => { const handleImageCancel = () => {
setSelectedImageName('');
setFile(null); setFile(null);
setSelectedImageName('');
setImageError(''); setImageError('');
fileInputRef.current.value = ''; fileInputRef.current.value = '';
}; };
// Validate form inputs before submitting
const validateForm = () => {
const errors = {
applicationId: '',
file: ''
};
if (!applicationId) {
errors.applicationId = 'Please select an Application ID.';
}
if (!file) {
errors.file = 'Please upload an image file.';
} else if (imageError) {
errors.file = imageError;
}
setValidationErrors(errors);
return Object.values(errors).every(error => error === '');
};
// Submit form and trigger OCR API // Submit form and trigger OCR API
const handleCheckClick = async () => { const handleCheckClick = async () => {
if (!file || !applicationId) { if (!validateForm()) {
setErrorMessage('Please select an application and upload a file.'); return; // Form is not valid
return;
} }
setIsLoading(true); setIsLoading(true);
@ -99,8 +157,6 @@ const Verify = () => {
formData.append('application_id', applicationId); formData.append('application_id', applicationId);
formData.append('file', file); formData.append('file', file);
console.log(`id: ${applicationId}, file: ${file}`)
try { try {
const response = await fetch(`${BASE_URL}/ocr-ktp`, { const response = await fetch(`${BASE_URL}/ocr-ktp`, {
method: 'POST', method: 'POST',
@ -117,35 +173,12 @@ const Verify = () => {
const result = await response.json(); const result = await response.json();
console.log('Full response:', result); // Log full response to inspect the structure // Log the full result to verify structure
console.log('OCR API Response:', result);
if (result.status_code === 201) { if (result.status_code === 201) {
console.log('Success');
// Correct the path to access the data-ktp object
const responseData = result.details.data?.['data-ktp'] || {}; const responseData = result.details.data?.['data-ktp'] || {};
// Log each field to inspect the data
console.log('NIK:', responseData.nik);
console.log('District:', responseData.kecamatan);
console.log('Name:', responseData.nama);
console.log('City:', responseData.kabkot);
console.log('Date of Birth:', responseData.tanggal_lahir);
console.log('State:', responseData.provinsi);
console.log('Gender:', responseData.jenis_kelamin);
console.log('Religion:', responseData.agama);
console.log('Blood Type:', responseData.golongan_darah);
console.log('Marital Status:', responseData.status_perkawinan);
console.log('Address:', responseData.alamat);
console.log('Occupation:', responseData.pekerjaan);
console.log('RT/RW:', `${responseData.rt}/${responseData.rw}`);
console.log('Nationality:', responseData.kewarganegaraan);
console.log('Image URL:', result.details.image_url);
console.log('Dark:', responseData.dark);
console.log('Blur:', responseData.blur);
console.log('Grayscale:', responseData.grayscale);
console.log('Flashlight:', responseData.flashlight);
// Map the response data to a new object with default values if the property doesn't exist
const data = { const data = {
nik: responseData.nik || 'N/A', nik: responseData.nik || 'N/A',
district: responseData.kecamatan || 'N/A', district: responseData.kecamatan || 'N/A',
@ -161,17 +194,22 @@ const Verify = () => {
occupation: responseData.pekerjaan || 'N/A', occupation: responseData.pekerjaan || 'N/A',
rtRw: `${responseData.rt || 'N/A'}/${responseData.rw || 'N/A'}`, rtRw: `${responseData.rt || 'N/A'}/${responseData.rw || 'N/A'}`,
nationality: responseData.kewarganegaraan || 'N/A', nationality: responseData.kewarganegaraan || 'N/A',
imageUrl: result.details.image_url || '', imageUrl: result.details.data?.image_url || '', // Properly access image_url
dark: responseData.dark || 'N/A',
blur: responseData.blur || 'N/A',
grayscale: responseData.grayscale || 'N/A',
flashlight: responseData.flashlight || 'N/A',
}; };
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
setData(data); setData(data);
setShowResult(true); setShowResult(true);
setErrorMessage(''); setErrorMessage('');
setSelectedImageName(''); setSelectedImageName('');
// Fetch image if image URL exists in the result
if (result.details.data?.image_url) {
const imageFileName = result.details.data.image_url.split('/').pop(); // Get the image filename
console.log('Image file name:', imageFileName); // Debug the file name
await fetchImage(imageFileName); // Call the fetchImage function to fetch the image
}
} else { } else {
setErrorMessage('OCR processing failed'); setErrorMessage('OCR processing failed');
} }
@ -182,15 +220,53 @@ const Verify = () => {
} }
}; };
// The fetchImage function you already have in your code
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;
}
// Get the image blob
const imageBlob = await response.blob();
const imageData = URL.createObjectURL(imageBlob); // Create object URL from the blob
// Debugging: Make sure imageData is correct
console.log('Fetched image URL:', imageData);
setImageUrl(imageData); // Update imageUrl state with the fetched image data
} catch (error) {
console.error('Error fetching image:', error);
setErrorMessage(error.message);
} finally {
setIsLoading(false);
}
};
return ( return (
<div className="container" style={{ marginTop: '3%' }}> <div className="container" style={{ marginTop: '3%' }}>
{/* Inject keyframes for the spinner */}
<style> <style>
{` {`
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
`} `}
</style> </style>
{isLoading && ( {isLoading && (
<div style={styles.loadingOverlay}> <div style={styles.loadingOverlay}>
@ -223,27 +299,20 @@ const Verify = () => {
<div className="form-group row align-items-center"> <div className="form-group row align-items-center">
<div className="col-md-6"> <div className="col-md-6">
<div style={styles.selectWrapper}> <div style={styles.selectWrapper}>
<select <Select
id="applicationId" id="applicationId"
className="form-control" value={applicationOptions.find(option => option.value === applicationId)}
style={styles.select} onChange={handleApplicationChange}
value={applicationId} options={applicationOptions}
onChange={(e) => setApplicationId(e.target.value)} placeholder="Select Application ID"
onFocus={handleFocus} isSearchable
onBlur={handleBlur} menuPortalTarget={document.body}
> menuPlacement="auto"
<option value="">Select Application ID</option> inputValue={inputValueApplication}
{applicationIds.map((app) => ( onInputChange={handleInputChangeApplication} // Limit input length for Application ID
<option key={app.id} value={app.id}> />
{app.name}
</option>
))}
</select>
<FontAwesomeIcon
icon={isSelectOpen ? faChevronDown : faChevronLeft}
style={styles.chevronIcon}
/>
</div> </div>
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', marginTop: '8px' }}> <p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', marginTop: '8px' }}>
@ -258,16 +327,38 @@ const Verify = () => {
<div className="col-md-6"> <div className="col-md-6">
<div className="form-group mt-4"> <div className="form-group mt-4">
<label htmlFor="imageInput" className="form-label">Upload Image (KTP)</label> <CustomLabel htmlFor="imageInput" style={styles.customLabel}>
Upload Image (KTP)
</CustomLabel>
<div style={styles.uploadWrapper}> <div style={styles.uploadWrapper}>
{/* Drag and Drop File Input */}
<div
style={styles.uploadArea}
onDrop={(e) => {
e.preventDefault();
handleFileDrop(e.dataTransfer.files);
}}
onDragOver={(e) => e.preventDefault()}
>
<FontAwesomeIcon icon={faCloudUploadAlt} style={styles.uploadIcon} />
<p style={styles.uploadText}>Drag and Drop Here</p>
<p>Or</p>
<a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
<p className="text-muted" style={styles.uploadText}>Recommended size: 300x300 (Max File Size: 2MB)</p>
<p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
</div>
{/* File Input */}
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
id="imageInput" id="imageInput"
className="form-control" className="form-control"
style={{ display: 'none' }}
accept="image/jpeg, image/png" accept="image/jpeg, image/png"
onChange={handleImageUpload} onChange={(e) => handleImageUpload(e.target.files[0])}
/> />
{selectedImageName && ( {selectedImageName && (
<div className="mt-3"> <div className="mt-3">
<p><strong>File:</strong> {selectedImageName}</p> <p><strong>File:</strong> {selectedImageName}</p>
@ -276,7 +367,7 @@ const Verify = () => {
</button> </button>
</div> </div>
)} )}
{imageError && <p style={{ color: 'red' }}>{imageError}</p>} {validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
</div> </div>
</div> </div>
</div> </div>
@ -285,7 +376,7 @@ const Verify = () => {
<button <button
className="btn btn-primary" className="btn btn-primary"
onClick={handleCheckClick} onClick={handleCheckClick}
disabled={isLoading || !file || !applicationId} disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
> >
<FontAwesomeIcon icon={faImage} className="me-2" /> <FontAwesomeIcon icon={faImage} className="me-2" />
Check KTP Check KTP
@ -301,77 +392,91 @@ const Verify = () => {
{showResult && data && ( {showResult && data && (
<div className="mt-5"> <div className="mt-5">
<h4>OCR Result</h4> <h4>OCR KTP Result</h4>
<table style={styles.tableStyle}> <div className="row">
<tbody> {/* Gambar di kolom pertama */}
<tr> <div className="col-md-6">
<td style={styles.tableCell}>NIK</td> <img
<td style={styles.tableCell}>{data.nik}</td> src={imageUrl || "path-to-your-image"}
</tr> alt="KTP Image"
<tr> style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
<td style={styles.tableCell}>District</td> className="img-fluid" // Menambahkan kelas Bootstrap img-fluid untuk responsif
<td style={styles.tableCell}>{data.district}</td> />
</tr> </div>
<tr>
<td style={styles.tableCell}>Name</td> {/* Tabel di kolom kedua */}
<td style={styles.tableCell}>{data.name}</td> <div className="col-md-6">
</tr> <table style={styles.tableStyle}>
<tr> <tbody>
<td style={styles.tableCell}>City</td> <tr>
<td style={styles.tableCell}>{data.city}</td> <td style={styles.tableCell}>NIK</td>
</tr> <td style={styles.tableCell}>{data.nik}</td>
<tr> </tr>
<td style={styles.tableCell}>Date of Birth</td> <tr>
<td style={styles.tableCell}>{data.dob}</td> <td style={styles.tableCell}>District</td>
</tr> <td style={styles.tableCell}>{data.district}</td>
<tr> </tr>
<td style={styles.tableCell}>State</td> <tr>
<td style={styles.tableCell}>{data.state}</td> <td style={styles.tableCell}>Name</td>
</tr> <td style={styles.tableCell}>{data.name}</td>
<tr> </tr>
<td style={styles.tableCell}>Gender</td> <tr>
<td style={styles.tableCell}>{data.gender}</td> <td style={styles.tableCell}>City</td>
</tr> <td style={styles.tableCell}>{data.city}</td>
<tr> </tr>
<td style={styles.tableCell}>Religion</td> <tr>
<td style={styles.tableCell}>{data.religion}</td> <td style={styles.tableCell}>Date of Birth</td>
</tr> <td style={styles.tableCell}>{data.dob}</td>
<tr> </tr>
<td style={styles.tableCell}>Blood Type</td> <tr>
<td style={styles.tableCell}>{data.bloodType}</td> <td style={styles.tableCell}>State</td>
</tr> <td style={styles.tableCell}>{data.state}</td>
<tr> </tr>
<td style={styles.tableCell}>Marital Status</td> <tr>
<td style={styles.tableCell}>{data.maritalStatus}</td> <td style={styles.tableCell}>Gender</td>
</tr> <td style={styles.tableCell}>{data.gender}</td>
<tr> </tr>
<td style={styles.tableCell}>Address</td> <tr>
<td style={styles.tableCell}>{data.address}</td> <td style={styles.tableCell}>Religion</td>
</tr> <td style={styles.tableCell}>{data.religion}</td>
<tr> </tr>
<td style={styles.tableCell}>Occupation</td> <tr>
<td style={styles.tableCell}>{data.occupation}</td> <td style={styles.tableCell}>Blood Type</td>
</tr> <td style={styles.tableCell}>{data.bloodType}</td>
<tr> </tr>
<td style={styles.tableCell}>RT/RW</td> <tr>
<td style={styles.tableCell}>{data.rtRw}</td> <td style={styles.tableCell}>Marital Status</td>
</tr> <td style={styles.tableCell}>{data.maritalStatus}</td>
<tr> </tr>
<td style={styles.tableCell}>Nationality</td> <tr>
<td style={styles.tableCell}>{data.nationality}</td> <td style={styles.tableCell}>Address</td>
</tr> <td style={styles.tableCell}>{data.address}</td>
<tr> </tr>
<td style={styles.tableCell}>Image</td> <tr>
<td style={styles.tableCell}><img src={data.imageUrl} alt="KTP" width="150" /></td> <td style={styles.tableCell}>Occupation</td>
</tr> <td style={styles.tableCell}>{data.occupation}</td>
</tbody> </tr>
</table> <tr>
<td style={styles.tableCell}>RT/RW</td>
<td style={styles.tableCell}>{data.rtRw}</td>
</tr>
<tr>
<td style={styles.tableCell}>Nationality</td>
<td style={styles.tableCell}>{data.nationality}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
)} )}
</div> </div>
); );
}; };
export default Verify;
const styles = { const styles = {
selectWrapper: { selectWrapper: {
position: 'relative', position: 'relative',
@ -385,13 +490,6 @@ const styles = {
borderRadius: '4px', borderRadius: '4px',
border: '1px solid #ccc', border: '1px solid #ccc',
}, },
chevronIcon: {
position: 'absolute',
top: '50%',
right: '10px',
transform: 'translateY(-50%)',
color: '#0542cc',
},
remainingQuota: { remainingQuota: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -404,8 +502,47 @@ const styles = {
fontSize: '16px', fontSize: '16px',
fontWeight: '300', fontWeight: '300',
}, },
customLabel: {
fontSize: '18px',
fontWeight: '600',
color: '#1f2d3d',
},
uploadWrapper: { uploadWrapper: {
position: 'relative', marginTop: '1rem',
},
uploadArea: {
backgroundColor: '#e6f2ff',
height: '58svh',
cursor: 'pointer',
marginTop: '1rem',
paddingTop: '22px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #ced4da',
borderRadius: '0.25rem',
textAlign: 'center',
},
uploadIcon: {
fontSize: '40px',
color: '#0542cc',
marginBottom: '10px',
},
uploadText: {
color: '#1f2d3d',
fontWeight: '400',
fontSize: '16px',
},
browseLink: {
color: '#0542cc',
textDecoration: 'none',
fontWeight: 'bold',
},
uploadError: {
color: 'red',
fontSize: '12px',
marginTop: '10px',
}, },
errorContainer: { errorContainer: {
marginTop: '10px', marginTop: '10px',
@ -418,28 +555,27 @@ const styles = {
color: '#721c24', color: '#721c24',
fontSize: '14px', fontSize: '14px',
margin: '0', margin: '0',
}, },loadingOverlay: {
loadingOverlay: { position: 'fixed', // Gunakan fixed untuk overlay penuh layar
position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0, // Pastikan menutupi seluruh layar
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
alignItems: 'center', alignItems: 'center', // Posisikan spinner di tengah secara vertikal
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
color: 'white', color: 'white',
fontSize: '24px', fontSize: '24px',
zIndex: 1000, zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
}, },
spinner: { spinner: {
border: '4px solid #f3f3f3', border: '4px solid #f3f3f3', // Border gray untuk spinner
borderTop: '4px solid #3498db', borderTop: '4px solid #3498db', // Border biru untuk spinner
borderRadius: '50%', borderRadius: '50%', // Membuat spinner bulat
width: '50px', width: '50px', // Ukuran spinner
height: '50px', height: '50px', // Ukuran spinner
animation: 'spin 2s linear infinite', animation: 'spin 2s linear infinite', // Menambahkan animasi spin
}, },
loadingText: { loadingText: {
marginLeft: '20px', marginLeft: '20px',
@ -455,5 +591,3 @@ const styles = {
textAlign: 'left', textAlign: 'left',
}, },
}; };
export default Verify;

2
src/screens/Home/Applications/Applications.jsx
View File

@ -135,7 +135,7 @@ const Applications = () => {
/> />
<div style={styles.wrapperCard(isMobile)}> <div style={styles.wrapperCard(isMobile)}>
<div style={styles.createButtonContainer}> <div style={styles.createButtonContainer}>
<Link to="/create-new-application" style={styles.link}> <Link to="/createApps" style={styles.link}>
<button style={styles.createButton}> <button style={styles.createButton}>
<FontAwesomeIcon icon={faPlus} style={{ marginRight: '8px' }} /> <FontAwesomeIcon icon={faPlus} style={{ marginRight: '8px' }} />
Create New App ID Create New App ID