Improve code
This commit is contained in:
parent
2dd0d54938
commit
1ff6059560
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user