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

Improve code

Browse Source
This commit is contained in:
Rizqika 2024-11-14 11:02:28 +07:00
parent 2dd0d54938
commit 1ff6059560
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,9 @@ const Compare = () => {
const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState('');
const [selectedCompareImageName, setSelectedCompareImageName] = useState('');
const [resultImageLabel, setResultImageLabel] = useState('');
const [resultCompareImageLabel, setResultCompareImageLabel] = useState('');
const fileInputRef = useRef(null);
const fileCompareInputRef = useRef(null);
const [showResult, setShowResult] = useState(false);
@ -210,6 +213,8 @@ const Compare = () => {
await fetchImage(imageUrl2, setImageCompareUrl);
setVerified(data.details.data.result.verified);
setResultImageLabel(selectedImageName)
setResultCompareImageLabel(selectedCompareImageName)
setShowResult(true);
console.log('Comparison successful:', data);
} else {
@ -285,7 +290,7 @@ const Compare = () => {
alt="Original Foto"
style={styles.imageStyle}
/>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedImageName}</p>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>File Name: {resultImageLabel}</p>
</div>
<div style={styles.imageCompareContainer}>
@ -294,7 +299,7 @@ const Compare = () => {
alt="Compare Foto"
style={styles.imageStyle}
/>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>{selectedCompareImageName}</p>
<p style={{ marginTop: '1rem', textAlign: 'center' }}>File Name: {resultCompareImageLabel}</p>
</div>
</div>
</div>

38
src/screens/Biometric/FaceRecognition/Section/Search.jsx
View File

@ -15,6 +15,7 @@ const Search = () => {
const [isSelectOpen, setIsSelectOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState('');
const [resultImageLabel, setResultImageLabel] = useState('');
const fileInputRef = useRef(null);
const [showResult, setShowResult] = useState(false);
const [applicationId, setApplicationId] = useState('');
@ -139,8 +140,6 @@ const Search = () => {
console.error('No file selected or invalid file object.');
}
};
const handleImageCancel = () => {
setSelectedImageName('');
@ -230,6 +229,7 @@ const Search = () => {
}));
setResults(processedResults);
setResultImageLabel(selectedImageName)
setShowResult(true);
} else {
console.error('Error response:', JSON.stringify(data, null, 2));
@ -637,22 +637,24 @@ const Search = () => {
{/* 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 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}>
{/* Displaying the dynamically set resultImageLabel */}
<p style={styles.resultText}>Image Name: {resultImageLabel}</p> {/* Updated here */}
<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>
);
}