check status feature

1 files changed, 65 insertions, 4 deletions

diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index 275df89..10b2776 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+/* eslint-disable space-before-function-paren */
+import React, { useState, useEffect } from 'react'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import PhotoCapture from '../PhotoCapture/PhotoCapture'
 import Fingerprint from '../Fingerprint/Fingerprint'
@@ -6,11 +7,47 @@ import IrisScan from '../IrisScan/IrisScan'
 import BiometricSelect from '../BiometricSelect/BiometricSelect'
 import BackButton from '../../../components/BackButton/BackButton'
 import { userContext } from '../../../context/User'
+import * as cocoSsd from '@tensorflow-models/coco-ssd'
+import * as tf from '@tensorflow/tfjs'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useTranslation } from 'react-i18next'
 
 const Biometric = () => {
+  const { t } = useTranslation()
   const [page, setPage] = useState(4)
   const { userData, oriUserData, setUserData } = userContext()
 
+  const [model, setModel] = useState()
+
+  async function loadModel() {
+    try {
+      const model = await cocoSsd.load()
+      setModel(model)
+      console.log('setloadedModel')
+    } catch (err) {
+      console.log(err)
+      console.log('failed load model')
+    }
+  }
+
+  useEffect(() => {
+    tf.ready().then(() => {
+      loadModel()
+    })
+  }, [])
+
+  let predictions = []
+  async function predictionFunction() {
+    predictions = await model.detect(document.getElementById('img'))
+    console.log(predictions)
+    if (predictions.length > 0) {
+      console.log(predictions)
+      console.log(predictions[0])
+    }
+    return predictions
+  }
+
   const conditionalComponent = () => {
     switch (page) {
       case 0:
@@ -32,10 +69,29 @@ const Biometric = () => {
   }
 
   const handleSubmit = () => {
-    if (!userData.photo) {
-      setUserData({ ...userData, photo: oriUserData.photo })
+    predictionFunction()
+    if (predictions.length === 0) {
+      toast.warning(t('PLEASE_WAIT'), {
+        timeout: 1000
+      })
     }
-    setPage(4)
+    console.log('befoer start')
+    setTimeout(() => {
+      if (predictions.length > 0) {
+        if (!userData.photo) {
+          setUserData({ ...userData, photo: oriUserData.photo })
+        } else if (
+          predictions[0].class === 'person' &&
+          predictions[0].score > 0.8
+        ) {
+          setPage(4)
+        } else {
+          toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+        }
+      } else {
+        toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+      }
+    }, 1000)
   }
 
   const conditionalButton = () => {
@@ -65,6 +121,11 @@ const Biometric = () => {
   }
   return (
     <>
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       {conditionalComponent()}
       {conditionalButton()}
     </>