update

src/components/GenerateImg.vue

@@ -8,31 +8,75 @@ import { globalStore } from "../globalstore.js";
 import faceTemplate from "../static/ali_face_template.js";
 import MyPhoto from './MyPhoto.vue'
 import PhotoSquare from './PhotoSquare.vue'
+import { loadFaceApiModels, validateFaceInImage } from "../libs/faceValidator.js"
 
 defineProps({
   show: true
 })
 
-onMounted(() => {
+onMounted(async () => {
+  await loadFaceApiModels()
 })
 
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
 import { tr } from "element-plus/es/locales.mjs"
 const router = useRouter();
+
 // 上传前的校验
 const beforeUpload = (file) => {
+  // 基础格式校验
   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
   if (!isJpgOrPng) {
     ElMessage.error('只能上传JPG或PNG格式的图片!');
     return false;
   }
+  
   const isLt2M = file.size / 1024 / 1024 < 5;
   if (!isLt2M) {
     ElMessage.error('图片大小不能超过5MB!');
     return false;
   }
-  return true;
+  
+  return new Promise(async (resolve) => {
+    const loadingInstance = ElMessage({
+      message: '正在验证人脸...',
+      type: 'info',
+      duration: 0,
+      showClose: false
+    });
+    
+    try {
+      const faceValidationResult = await validateFaceInImage(file);
+      loadingInstance.close();
+      
+      if (!faceValidationResult.success) {
+        ElMessage({
+          message: faceValidationResult.message,
+          type: 'error',
+          duration: 4000
+        });
+        resolve(false);
+      } else {
+        ElMessage({
+          message: faceValidationResult.message,
+          type: 'success',
+          duration: 2000
+        });
+        resolve(true);
+      }
+      
+    } catch (error) {
+      loadingInstance.close();
+      console.error('人脸验证出错:', error);
+      ElMessage({
+        message: '人脸验证失败，请重试',
+        type: 'error',
+        duration: 3000
+      });
+      resolve(false);
+    }
+  });
 };
 
 const getTemplateIdsFromUrl = (response, url, index)=> {

src/libs/faceValidator.js

@@ -0,0 +1,219 @@
+import * as faceapi from 'face-api.js'
+
+// 模型加载状态
+let modelsLoaded = false
+
+/**
+ * 加载 face-api.js 模型
+ */
+export async function loadFaceApiModels() {
+  if (modelsLoaded) {
+    console.log('Face API 模型已经加载过了')
+    return true
+  }
+
+  try {
+    console.log('开始加载 Face API 模型...')
+    
+    // 获取基础路径，处理 vite 的 base 配置
+    const basePath = import.meta.env.BASE_URL || '/'
+    const modelsPath = basePath.endsWith('/') ? basePath + 'models' : basePath + '/models'
+    
+    console.log('模型加载路径:', modelsPath)
+    
+    // 加载必需的模型
+    await Promise.all([
+      faceapi.nets.tinyFaceDetector.loadFromUri(modelsPath),
+      faceapi.nets.faceLandmark68Net.loadFromUri(modelsPath),
+      faceapi.nets.faceRecognitionNet.loadFromUri(modelsPath)
+    ])
+    
+    console.log('Face API 模型加载完成')
+    modelsLoaded = true
+    return true
+  } catch (error) {
+    console.error('Face API 模型加载失败:', error)
+    // 如果本地模型加载失败，尝试从 CDN 加载
+    try {
+      console.log('尝试从 CDN 加载模型...')
+      await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri('https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.13/model'),
+        faceapi.nets.faceLandmark68Net.loadFromUri('https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.13/model'),
+        faceapi.nets.faceRecognitionNet.loadFromUri('https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.13/model')
+      ])
+      console.log('CDN 模型加载成功')
+      modelsLoaded = true
+      return true
+    } catch (cdnError) {
+      console.error('CDN 模型加载也失败:', cdnError)
+      return false
+    }
+  }
+}
+
+/**
+ * 检查模型是否已加载
+ */
+export function areModelsLoaded() {
+  return modelsLoaded
+}
+
+/**
+ * 验证图片中的人脸
+ * @param {File} file - 图片文件
+ * @returns {Promise<Object>} - 验证结果
+ */
+export async function validateFaceInImage(file) {
+  // 如果模型未加载，先加载模型
+  if (!modelsLoaded) {
+    const loaded = await loadFaceApiModels()
+    if (!loaded) {
+      return {
+        success: false,
+        message: '人脸识别模型加载失败，请刷新页面重试'
+      }
+    }
+  }
+
+  return new Promise((resolve) => {
+    const img = new Image()
+    
+    img.onload = async () => {
+      try {
+        console.log('开始进行人脸检测...')
+        
+        // 使用 TinyFaceDetector 进行人脸检测
+        const detections = await faceapi
+          .detectAllFaces(img, new faceapi.TinyFaceDetectorOptions({
+            inputSize: 416,
+            scoreThreshold: 0.5
+          }))
+          .withFaceLandmarks()
+        
+        console.log(`检测到 ${detections.length} 张人脸`)
+        
+        // 检查是否检测到人脸
+        if (detections.length === 0) {
+          resolve({
+            success: false,
+            message: '未检测到人脸，请上传包含清晰人脸的图片'
+          })
+          return
+        }
+        
+        // 检查是否只有一张人脸
+        if (detections.length > 1) {
+          resolve({
+            success: false,
+            message: '检测到多张人脸，请上传只包含一张人脸的图片'
+          })
+          return
+        }
+        
+        const detection = detections[0]
+        const confidence = detection.detection.score
+        
+        console.log('人脸检测置信度:', confidence)
+        
+        // 检查置信度是否足够高
+        const minConfidence = 0.6 // 降低到 0.6 以提高通过率
+        if (confidence < minConfidence) {
+          resolve({
+            success: false,
+            message: `人脸清晰度不够（置信度: ${(confidence * 100).toFixed(1)}%），请上传更清晰的人脸图片`
+          })
+          return
+        }
+        
+        // 检查人脸大小（相对于图片尺寸）
+        const faceBox = detection.detection.box
+        const imageArea = img.naturalWidth * img.naturalHeight
+        const faceArea = faceBox.width * faceBox.height
+        const faceRatio = faceArea / imageArea
+        
+        console.log('人脸占图片比例:', (faceRatio * 100).toFixed(2) + '%')
+        
+        const minFaceRatio = 0.015 // 降低到 1.5% 以提高通过率
+        if (faceRatio < minFaceRatio) {
+          resolve({
+            success: false,
+            message: '人脸在图片中占比太小，请上传人脸更大更清晰的图片'
+          })
+          return
+        }
+        
+        // 检查人脸角度（通过关键点判断）
+        if (detection.landmarks) {
+          const landmarks = detection.landmarks
+          const leftEye = landmarks.getLeftEye()
+          const rightEye = landmarks.getRightEye()
+          
+          // 计算眼睛之间的角度来判断人脸是否正面
+          if (leftEye.length > 0 && rightEye.length > 0) {
+            const leftEyeCenter = leftEye[0]
+            const rightEyeCenter = rightEye[3]
+            
+            const eyeAngle = Math.abs(
+              Math.atan2(
+                rightEyeCenter.y - leftEyeCenter.y,
+                rightEyeCenter.x - leftEyeCenter.x
+              ) * 180 / Math.PI
+            )
+            
+            console.log('人脸角度:', eyeAngle.toFixed(1) + '度')
+            
+            const maxAngle = 20 // 放宽到 20 度
+            if (eyeAngle > maxAngle) {
+              resolve({
+                success: false,
+                message: '请上传正面人脸照片，避免侧脸或过度倾斜的角度'
+              })
+              return
+            }
+          }
+        }
+        
+        // 所有验证通过
+        resolve({
+          success: true,
+          message: `人脸验证通过（置信度: ${(confidence * 100).toFixed(1)}%）`,
+          confidence: confidence,
+          faceRatio: faceRatio,
+          faceBox: {
+            x: faceBox.x,
+            y: faceBox.y,
+            width: faceBox.width,
+            height: faceBox.height
+          }
+        })
+        
+      } catch (error) {
+        console.error('人脸检测过程中出错:', error)
+        resolve({
+          success: false,
+          message: '人脸检测失败，请重试或更换图片'
+        })
+      }
+    }
+    
+    img.onerror = () => {
+      resolve({
+        success: false,
+        message: '图片加载失败，请检查图片格式'
+      })
+    }
+    
+    // 加载图片
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      img.src = e.target.result
+    }
+    reader.onerror = () => {
+      resolve({
+        success: false,
+        message: '图片读取失败，请重试'
+      })
+    }
+    reader.readAsDataURL(file)
+  })
+}