Improve code

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

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>

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('');
@ -140,8 +141,6 @@ const Search = () => {
}
};
const handleImageCancel = () => {
setSelectedImageName('');
setFile(null);
@ -230,6 +229,7 @@ const Search = () => {
}));
setResults(processedResults);
setResultImageLabel(selectedImageName)
setShowResult(true);
} else {
console.error('Error response:', JSON.stringify(data, null, 2));
@ -643,7 +643,8 @@ const Search = () => {
{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>
{/* 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>
@ -652,7 +653,8 @@ const Search = () => {
))}
</div>
</div>
)}
)
}
</div>
);
}