From 1717aedcb1c427e99ac072566a2c9ced06b7b08f Mon Sep 17 00:00:00 2001
From: Rizqika <rizqikaibnu@gmail.com>
Date: Mon, 9 Dec 2024 10:51:56 +0700
Subject: [PATCH] Solve - Compare

---
 .../FaceRecognition/Section/Compare.jsx       | 264 ++++++++----------
 .../FaceRecognition/Section/Enroll.jsx        |   1 -
 2 files changed, 114 insertions(+), 151 deletions(-)

diff --git a/src/screens/Biometric/FaceRecognition/Section/Compare.jsx b/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
index 0e3c39e..8509a2e 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Compare.jsx
@@ -114,118 +114,70 @@ const Compare = () => {
 
   const handleImageUpload = (file) => {
     if (!file) {
-      setUploadError('Please select a file');
-      return;
+        setUploadError('Please select a file');
+        return;
     }
-  
+
     // Check file size (2MB = 2 * 1024 * 1024 bytes)
     const maxSize = 2 * 1024 * 1024;
     if (file.size > maxSize) {
-      setUploadError('File size exceeds 2MB limit');
-      setFile(null);
-      setSelectedImageName('');
-      return;
-    }
-  
-    // Check file type using both extension and MIME type
-    const fileExtension = file.name.split('.').pop().toLowerCase();
-    const validExtensions = ['jpg', 'jpeg'];
-    const validMimeTypes = ['image/jpeg', 'image/jpg'];
-    
-    if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
-      setUploadError('Only JPG/JPEG files are allowed');
-      setFile(null);
-      setSelectedImageName('');
-      return;
-    }
-  
-    // Check image dimensions
-    const img = new Image();
-    const objectUrl = URL.createObjectURL(file);
-    
-    img.onload = () => {
-      URL.revokeObjectURL(objectUrl);
-      
-      if (img.width > 300 || img.height > 300) {
-        setUploadError('Image dimensions must not exceed 300x300 pixels');
+        setUploadError('File size exceeds 2MB limit');
         setFile(null);
         setSelectedImageName('');
         return;
-      }
-  
-      // All validations passed
-      setSelectedImageName(file.name);
-      setFile(file);
-      setUploadError('');
-    };
-  
-    img.onerror = () => {
-      URL.revokeObjectURL(objectUrl);
-      setUploadError('Invalid image file');
-      setFile(null);
-      setSelectedImageName('');
-    };
-  
-    img.src = objectUrl;
-  };
-  
-  const handleCompareImageUpload = (file) => {
-    if (!file) {
-      setCompareUploadError('Please select a file');
-      return;
     }
-  
-    // Check file size (2MB = 2 * 1024 * 1024 bytes)
-    const maxSize = 2 * 1024 * 1024;
-    if (file.size > maxSize) {
-      setCompareUploadError('File size exceeds 2MB limit');
-      setCompareFile(null);
-      setSelectedCompareImageName('');
-      return;
-    }
-  
-    // Check file type using both extension and MIME type
+
+    // Check file type
     const fileExtension = file.name.split('.').pop().toLowerCase();
     const validExtensions = ['jpg', 'jpeg'];
     const validMimeTypes = ['image/jpeg', 'image/jpg'];
     
     if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
-      setCompareUploadError('Only JPG/JPEG files are allowed');
-      setCompareFile(null);
-      setSelectedCompareImageName('');
-      return;
+        setUploadError('Only JPG/JPEG files are allowed');
+        setFile(null);
+        setSelectedImageName('');
+        return;
     }
-  
-    // Check image dimensions
-    const img = new Image();
-    const objectUrl = URL.createObjectURL(file);
-    
-    img.onload = () => {
-      URL.revokeObjectURL(objectUrl);
-      
-      if (img.width > 300 || img.height > 300) {
-        setCompareUploadError('Image dimensions must not exceed 300x300 pixels');
+
+    // Set file and filename if validation passes
+    setFile(file);
+    setSelectedImageName(file.name); // Add this line
+    setUploadError(''); // Clear any previous errors
+  };
+ 
+  const handleCompareImageUpload = (file) => {
+    if (!file) {
+        setCompareUploadError('Please select a file');
+        return;
+    }
+
+    // Check file size (2MB = 2 * 1024 * 1024 bytes)
+    const maxSize = 2 * 1024 * 1024;
+    if (file.size > maxSize) {
+        setCompareUploadError('File size exceeds 2MB limit');
         setCompareFile(null);
         setSelectedCompareImageName('');
         return;
-      }
-  
-      // All validations passed
-      setSelectedCompareImageName(file.name);
-      setCompareFile(file);
-      setCompareUploadError('');
-    };
-  
-    img.onerror = () => {
-      URL.revokeObjectURL(objectUrl);
-      setCompareUploadError('Invalid image file');
-      setCompareFile(null);
-      setSelectedCompareImageName('');
-    };
-  
-    img.src = objectUrl;
-  };
+    }
+
+    // Check file type
+    const fileExtension = file.name.split('.').pop().toLowerCase();
+    const validExtensions = ['jpg', 'jpeg'];
+    const validMimeTypes = ['image/jpeg', 'image/jpg'];
     
+    if (!validExtensions.includes(fileExtension) || !validMimeTypes.includes(file.type)) {
+        setCompareUploadError('Only JPG/JPEG files are allowed');
+        setCompareFile(null);
+        setSelectedCompareImageName('');
+        return;
+    }
+
+    // Set file and filename if validation passes
+    setCompareFile(file);
+    setSelectedCompareImageName(file.name); // Add this line
+    setCompareUploadError(''); // Clear any previous errors
+  };
+  
 
   const handleImageCancel = () => {
     setSelectedImageName('');
@@ -239,102 +191,114 @@ const Compare = () => {
     if (fileCompareInputRef.current) fileCompareInputRef.current.value = '';
   };
 
-  const handleCheckClick = async () => {
-    // Reset error messages
+  const validateForm = () => {
+    // Reset all error states
     setApplicationError('');
     setThresholdError('');
     setUploadError('');
     setCompareUploadError('');
     setErrorMessage('');
 
-    // Initialize a flag to check for errors
-    let hasError = false;
+    let isValid = true;
 
     // Validate Application ID
     if (!applicationId) {
         setApplicationError('Please select an Application ID before compare.');
-        hasError = true;
+        isValid = false;
     }
 
-    // Validate Threshold ID
+    // Validate Threshold
     const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
     if (!selectedThreshold) {
         setThresholdError('Invalid threshold selected.');
-        hasError = true;
+        isValid = false;
     }
 
-    // Validate Image Uploads
+    // Validate Images
     if (!selectedImageName) {
         setUploadError('Please upload a face photo before compare.');
-        hasError = true;
+        isValid = false;
     }
 
     if (!selectedCompareImageName) {
         setCompareUploadError('Please upload a compare face photo before compare.');
-        hasError = true;
+        isValid = false;
     }
 
-    // If there are any errors, return early
-    if (hasError) {
+    return isValid;
+  };
+
+
+  const handleCheckClick = () => {
+    if (!validateForm()) {
         return;
     }
 
-    // Prepare FormData and log inputs
+    setIsLoading(true);
+    setErrorMessage('');
+
+    const selectedThreshold = thresholdIds.find(threshold => threshold.name === thresholdId)?.name;
     const formData = new FormData();
     formData.append('application_id', applicationId);
-    formData.append('file1', file); // Use the state variable directly
-    formData.append('file2', compareFile); // Use the state variable directly
+    formData.append('file1', file);
+    formData.append('file2', compareFile);
     formData.append('threshold', selectedThreshold);
 
-    // Log the inputs
-    console.log('Inputs:', {
+    // Log request data
+    console.log('📝 Request Data:', {
         applicationId,
         threshold: selectedThreshold,
         file1: selectedImageName,
         file2: selectedCompareImageName,
     });
 
-    setIsLoading(true);
-    setErrorMessage('');
-
-    try {
-        const response = await fetch(`${BASE_URL}/face_recognition/compare`, {
-            method: 'POST',
-            headers: {
-                'accept': 'application/json',
-                'x-api-key': `${API_KEY}`,
-            },
-            body: formData,
-        });
-
-        const data = await response.json();
-        if (response.ok) {
-            // Fetch image URLs from response
-            const imageUrl1 = data.details.data.result.image_url1;
-            const imageUrl2 = data.details.data.result.image_url2;
-
-            await fetchImage(imageUrl1, setImageUrl);
-            await fetchImage(imageUrl2, setImageCompareUrl);
-
-            setVerified(data.details.data.result.verified);
-            setResultImageLabel(selectedImageName)
-            setResultCompareImageLabel(selectedCompareImageName)
-            setSelectedQuota(data.details.data.result.quota)
-            setShowResult(true);
-            console.log('Comparison successful:', data);
-        } else {
-            console.error('Error response:', data);
-            const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
-            setErrorMessage(errorMessage);
+    fetch(`${BASE_URL}/face_recognition/compare`, {
+        method: 'POST',
+        headers: {
+            'accept': 'application/json',
+            'x-api-key': API_KEY,
+        },
+        body: formData,
+    })
+    .then(response => {
+        if (!response.ok) {
+            return response.json().then(errorData => {
+                throw new Error(errorData.detail || 'Comparison failed, please try again');
+            });
         }
-    } catch (error) {
-        console.error('Error:', error);
-        setErrorMessage('An error occurred while making the request.');
-    } finally {
+        return response.json();
+    })
+    .then(result => {
+        console.log('📡 API Response:', result);
+
+        const { result: compareResult } = result.details.data;
+        
+        // Process image URLs
+        if (compareResult.image_url1) {
+            fetchImage(compareResult.image_url1, setImageUrl);
+        }
+        if (compareResult.image_url2) {
+            fetchImage(compareResult.image_url2, setImageCompareUrl);
+        }
+
+        // Update states
+        setVerified(compareResult.verified);
+        setResultImageLabel(selectedImageName);
+        setResultCompareImageLabel(selectedCompareImageName);
+        setSelectedQuota(compareResult.quota);
+        setShowResult(true);
+    })
+    .catch(error => {
+        console.error('🔥 Request Failed:', error);
+        setErrorMessage(error.message);
+        setShowResult(false);
+    })
+    .finally(() => {
         setIsLoading(false);
-    }
+    });
   };
 
+
   const fetchImage = async (imageUrl, setImageUrl) => {
       setIsLoading(true);
       try {
@@ -555,7 +519,7 @@ const Compare = () => {
                   <p style={styles.uploadText}>Drag and Drop Here</p>
                   <p>Or</p>
                   <a href="#">Browse</a>
-                  <p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
+                  <p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
                   <p className="text-muted">Supported file types: JPG, JPEG</p>
                 </div>
               }
@@ -604,7 +568,7 @@ const Compare = () => {
                   <p style={styles.uploadText}>Drag and Drop Here</p>
                   <p>Or</p>
                   <a href="#">Browse</a>
-                  <p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
+                  <p className="text-muted">Recommended size: 320x200 (Max File Size: 2MB)</p>
                   <p className="text-muted">Supported file types: JPG, JPEG</p>
                 </div>
               }
diff --git a/src/screens/Biometric/FaceRecognition/Section/Enroll.jsx b/src/screens/Biometric/FaceRecognition/Section/Enroll.jsx
index cfac394..daff7c7 100644
--- a/src/screens/Biometric/FaceRecognition/Section/Enroll.jsx
+++ b/src/screens/Biometric/FaceRecognition/Section/Enroll.jsx
@@ -280,7 +280,6 @@ const Enroll = () => {
         });
     };
 
-
     // Fetch image preview
     const fetchImage = async (imageFileName) => {
         setIsLoading(true);