From 9610ce5b8cb355ae39e4b64f6ce114d9a69e905a Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Sun, 9 Mar 2025 01:29:25 +0800
Subject: [PATCH] feat: can add faceId by uploading images (#3641)

---
 web/src/common/modal/FaceRecognitionModal.js | 224 ++++++++++++++-----
 web/src/table/FaceIdTable.js                 |   6 +-
 2 files changed, 169 insertions(+), 61 deletions(-)

diff --git a/web/src/common/modal/FaceRecognitionModal.js b/web/src/common/modal/FaceRecognitionModal.js
index 00fd2af8..3a324d5a 100644
--- a/web/src/common/modal/FaceRecognitionModal.js
+++ b/web/src/common/modal/FaceRecognitionModal.js
@@ -14,11 +14,12 @@
 
 import * as faceapi from "face-api.js";
 import React, {useState} from "react";
-import {Button, Modal, Progress, Spin, message} from "antd";
+import {Button, Modal, Progress, Space, Spin, message} from "antd";
 import i18next from "i18next";
+import Dragger from "antd/es/upload/Dragger";
 
 const FaceRecognitionModal = (props) => {
-  const {visible, onOk, onCancel} = props;
+  const {visible, onOk, onCancel, withImage} = props;
   const [modelsLoaded, setModelsLoaded] = React.useState(false);
   const [isCameraCaptured, setIsCameraCaptured] = useState(false);
 
@@ -28,6 +29,10 @@ const FaceRecognitionModal = (props) => {
   const mediaStreamRef = React.useRef(null);
   const [percent, setPercent] = useState(0);
 
+  const [files, setFiles] = useState([]);
+  const [currentFaceId, setCurrentFaceId] = React.useState();
+  const [currentFaceIndex, setCurrentFaceIndex] = React.useState();
+
   React.useEffect(() => {
     const loadModels = async() => {
       // const MODEL_URL = process.env.PUBLIC_URL + "/models";
@@ -50,6 +55,9 @@ const FaceRecognitionModal = (props) => {
   }, []);
 
   React.useEffect(() => {
+    if (withImage) {
+      return;
+    }
     if (visible) {
       setPercent(0);
       if (modelsLoaded) {
@@ -75,6 +83,9 @@ const FaceRecognitionModal = (props) => {
   }, [visible, modelsLoaded]);
 
   React.useEffect(() => {
+    if (withImage) {
+      return;
+    }
     if (isCameraCaptured) {
       let count = 0;
       const interval = setInterval(() => {
@@ -98,6 +109,9 @@ const FaceRecognitionModal = (props) => {
   }, [isCameraCaptured]);
 
   const handleStreamVideo = () => {
+    if (withImage) {
+      return;
+    }
     let count = 0;
     let goodCount = 0;
     if (!detection.current) {
@@ -148,73 +162,163 @@ const FaceRecognitionModal = (props) => {
     }
   };
 
-  return (
-    <div>
-      <Modal
-        closable={false}
+  const getBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  if (!withImage) {
+    return (
+      <div>
+        <Modal
+          closable={false}
+          maskClosable={false}
+          destroyOnClose={true}
+          open={visible && isCameraCaptured}
+          title={i18next.t("login:Face Recognition")}
+          width={350}
+          footer={[
+            <Button key="back" onClick={onCancel}>
+                  Cancel
+            </Button>,
+          ]}
+        >
+          <Progress percent={percent} />
+          <div style={{
+            marginTop: "20px",
+            marginBottom: "50px",
+            justifyContent: "center",
+            alignContent: "center",
+            position: "relative",
+            flexDirection: "column",
+          }}>
+            {
+              modelsLoaded ?
+                <div style={{display: "flex", justifyContent: "center", alignContent: "center"}}>
+                  <video
+                    ref={videoRef}
+                    onPlay={handleStreamVideo}
+                    style={{
+                      borderRadius: "50%",
+                      height: "220px",
+                      verticalAlign: "middle",
+                      width: "220px",
+                      objectFit: "cover",
+                    }}
+                  ></video>
+                  <div style={{
+                    position: "absolute",
+                    width: "240px",
+                    height: "240px",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                  }}>
+                    <svg width="240" height="240" fill="none">
+                      <circle
+                        strokeDasharray="700"
+                        strokeDashoffset={700 - 6.9115 * percent}
+                        strokeWidth="4"
+                        cx="120"
+                        cy="120"
+                        r="110"
+                        stroke="#5734d3"
+                        transform="rotate(-90, 120, 120)"
+                        strokeLinecap="round"
+                        style={{transition: "all .2s linear"}}
+                      ></circle>
+                    </svg>
+                  </div>
+                  <canvas ref={canvasRef} style={{position: "absolute"}} />
+                </div>
+                :
+                <div>
+                  <Spin tip={i18next.t("login:Loading")} size="large"
+                    style={{display: "flex", justifyContent: "center", alignContent: "center"}}>
+                    <div className="content" />
+                  </Spin>
+                </div>
+            }
+          </div>
+        </Modal>
+      </div>
+    );
+  } else {
+    return <div>
+      <Modal closable={false}
         maskClosable={false}
         destroyOnClose={true}
-        open={visible && isCameraCaptured}
+        open={visible}
         title={i18next.t("login:Face Recognition")}
         width={350}
         footer={[
-          <Button key="back" onClick={onCancel}>
-            Cancel
+          <Button key="ok" type={"primary"} disabled={!currentFaceId || currentFaceId?.length === 0} onClick={() => {
+            onOk(Array.from(currentFaceId.descriptor));
+          }}>
+            Ok
           </Button>,
-        ]}
-      >
-        <Progress percent={percent} />
-        <div style={{marginTop: "20px", marginBottom: "50px", justifyContent: "center", alignContent: "center", position: "relative", flexDirection: "column"}}>
+          <Button key="back" onClick={onCancel}>
+                  Cancel
+          </Button>,
+        ]}>
+        <Space direction={"vertical"} style={{width: "100%"}}>
+          <Dragger
+            multiple={true}
+            defaultFileList={files}
+            style={{width: "100%"}}
+            beforeUpload={(file) => {
+              getBase64(file).then(res => {
+                file.base64 = res;
+                files.push(file);
+              });
+              setCurrentFaceId([]);
+              return false;
+            }}
+            onRemove={(file) => {
+              const index = files.indexOf(file);
+              const newFileList = files.slice();
+              newFileList.splice(index, 1);
+              setFiles(newFileList);
+              setCurrentFaceId([]);
+            }}
+          >
+            <p>{i18next.t("general:Click to Upload")}</p>
+          </Dragger >
           {
-            modelsLoaded ?
-              <div style={{display: "flex", justifyContent: "center", alignContent: "center"}}>
-                <video
-                  ref={videoRef}
-                  onPlay={handleStreamVideo}
-                  style={{
-                    borderRadius: "50%",
-                    height: "220px",
-                    verticalAlign: "middle",
-                    width: "220px",
-                    objectFit: "cover",
-                  }}
-                ></video>
-                <div style={{
-                  position: "absolute",
-                  width: "240px",
-                  height: "240px",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                }}>
-                  <svg width="240" height="240" fill="none">
-                    <circle
-                      strokeDasharray="700"
-                      strokeDashoffset={700 - 6.9115 * percent}
-                      strokeWidth="4"
-                      cx="120"
-                      cy="120"
-                      r="110"
-                      stroke="#5734d3"
-                      transform="rotate(-90, 120, 120)"
-                      strokeLinecap="round"
-                      style={{transition: "all .2s linear"}}
-                    ></circle>
-                  </svg>
-                </div>
-                <canvas ref={canvasRef} style={{position: "absolute"}} />
-              </div>
-              :
-              <div>
-                <Spin tip={i18next.t("login:Loading")} size="large" style={{display: "flex", justifyContent: "center", alignContent: "center"}}>
-                  <div className="content" />
-                </Spin>
-              </div>
+            modelsLoaded ? <Button style={{width: "100%"}} onClick={() => {
+              let maxScore = 0;
+              files.forEach((file, fileIndex) => {
+                const img = new Image();
+                img.src = file.base64;
+                faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors().then(res2 => {
+                  if (res2[0]?.detection.score > 0.9 && res2[0]?.detection.score > maxScore) {
+                    maxScore = res2[0]?.detection.score;
+                    setCurrentFaceId(res2[0]);
+                    setCurrentFaceIndex(fileIndex);
+                  }
+                });
+              });
+              if (currentFaceId?.length === 0) {
+                message.error(i18next.t("login:Face recognition failed"));
+              }
+            }}> {i18next.t("application:Generate faceId")}</Button> : null
           }
-        </div>
+        </Space>
+        {
+          currentFaceId && currentFaceId.length !== 0 ? (
+            <React.Fragment>
+              <div>{i18next.t("application:Select")}:{files[currentFaceIndex]?.name}</div>
+              <div><img src={files[currentFaceIndex]?.base64} alt="selected" style={{width: "100%"}} /></div>
+            </React.Fragment>
+          ) : null
+        }
       </Modal>
-    </div>
-  );
+    </div>;
+  }
 };
 
 export default FaceRecognitionModal;
diff --git a/web/src/table/FaceIdTable.js b/web/src/table/FaceIdTable.js
index 4777b904..8bb18c7f 100644
--- a/web/src/table/FaceIdTable.js
+++ b/web/src/table/FaceIdTable.js
@@ -97,12 +97,16 @@ class FaceIdTable extends React.Component {
         title={() => (
           <div>
             {i18next.t("user:Face IDs")}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button disabled={this.props.table?.length >= 5} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.setState({openFaceRecognitionModal: true})}>
+            <Button disabled={this.props.table?.length >= 5} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.setState({openFaceRecognitionModal: true, withImage: false})}>
               {i18next.t("general:Add Face Id")}
             </Button>
+            <Button disabled={this.props.table?.length >= 5} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.setState({openFaceRecognitionModal: true, withImage: true})}>
+              {i18next.t("general:Add Face Id with image")}
+            </Button>
             <Suspense fallback={null}>
               <FaceRecognitionModal
                 visible={this.state.openFaceRecognitionModal}
+                withImage={this.state.withImage}
                 onOk={(faceIdData) => {
                   this.addFaceId(table, faceIdData);
                   this.setState({openFaceRecognitionModal: false});