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

View File

@ -15,6 +15,7 @@ const Search = () => {
const [isSelectOpen, setIsSelectOpen] = useState(false); const [isSelectOpen, setIsSelectOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const [selectedImageName, setSelectedImageName] = useState(''); const [selectedImageName, setSelectedImageName] = useState('');
const [resultImageLabel, setResultImageLabel] = useState('');
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
const [showResult, setShowResult] = useState(false); const [showResult, setShowResult] = useState(false);
const [applicationId, setApplicationId] = useState(''); const [applicationId, setApplicationId] = useState('');
@ -140,8 +141,6 @@ const Search = () => {
} }
}; };
const handleImageCancel = () => { const handleImageCancel = () => {
setSelectedImageName(''); setSelectedImageName('');
setFile(null); setFile(null);
@ -230,6 +229,7 @@ const Search = () => {
})); }));
setResults(processedResults); setResults(processedResults);
setResultImageLabel(selectedImageName)
setShowResult(true); setShowResult(true);
} else { } else {
console.error('Error response:', JSON.stringify(data, null, 2)); console.error('Error response:', JSON.stringify(data, null, 2));
@ -643,7 +643,8 @@ const Search = () => {
{results.slice(0, limitId).map((result, index) => ( {results.slice(0, limitId).map((result, index) => (
<div key={index} style={styles.resultItem}> <div key={index} style={styles.resultItem}>
<div style={styles.resultTextContainer}> <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}>Similarity: {result.similarity}%</p>
<p style={styles.resultText}>Distance: {result.distance}</p> <p style={styles.resultText}>Distance: {result.distance}</p>
</div> </div>
@ -652,7 +653,8 @@ const Search = () => {
))} ))}
</div> </div>
</div> </div>
)} )
}
</div> </div>
); );
} }