要实现一个基于人脸识别的Web登录界面，使用Python的FastAPI作为后端，Vue作为前端，以下是实现步骤和代码示例。
1. 后端 (FastAPI)
首先，安装所需的依赖：
pip install fastapi uvicorn face_recognition numpy
然后，创建一个FastAPI应用来处理人脸识别和登录逻辑。
from fastapi import FastAPI, File, UploadFile, HTTPException
import face_recognition
import numpy as np
import os
app = FastAPI()
# 存储已知用户的face_encodings和用户名
known_face_encodings = []
known_face_names = []
# 加载已知用户的人脸数据
def load_known_faces():
global known_face_encodings, known_face_names
known_faces_dir = "known_faces"
for filename in os.listdir(known_faces_dir):
if filename.endswith(".jpg") or filename.endswith(".png"):
image_path = os.path.join(known_faces_dir, filename)
image = face_recognition.load_image_file(image_path)
face_encoding = face_recognition.face_encodings(image)[0]
known_face_encodings.append(face_encoding)
known_face_names.append(os.path.splitext(filename)[0])
load_known_faces()
@app.post("/login/")
async def login(file: UploadFile = File(...)):
try:
# 读取上传的图片
image = face_recognition.load_image_file(file.file)
face_locations = face_recognition.face_locations(image)
face_encodings = face_recognition.face_encodings(image, face_locations)
if len(face_encodings) == 0:
raise HTTPException(status_code=400, detail="No face detected")
# 比较上传的人脸和已知的人脸
matches = face_recognition.compare_faces(known_face_encodings, face_encodings[0])
name = "Unknown"
if True in matches:
first_match_index = matches.index(True)
name = known_face_names[first_match_index]
return {"name": name}
except Exception as e:
raise HTTPException(status_code=500, detail=str(e))
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=8000)
2. 前端 (Vue)
首先，确保你已经安装了Vue CLI。如果没有安装，可以使用以下命令安装：
npm install -g @vue/cli
然后，创建一个新的Vue项目：
vue create face-login-frontend
进入项目目录并安装所需的依赖：
cd face-login-frontend
npm install axios
在src/components/目录下创建一个新的组件FaceLogin.vue：
<template>
<div>
<h1>人脸识别登录</h1>
<input type="file" @change="onFileChange" accept="image/*" />
<button @click="login">登录</button>
<p v-if="message">{{ message }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
message: ''
};
},
methods: {
onFileChange(event) {
this.file = event.target.files[0];
},
async login() {
if (!this.file) {
this.message = '请选择一张图片';
return;
}
const formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('http://localhost:8000/login/', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
this.message = `欢迎, ${response.data.name}`;
} catch (error) {
this.message = '登录失败: ' + error.response.data.detail;
}
}
}
};
</script>
<style scoped>
/* 添加一些样式 */
</style>
在src/App.vue中使用这个组件：
<template>
<div id="app">
<FaceLogin />
</div>
</template>
<script>
import FaceLogin from './components/FaceLogin.vue';
export default {
components: {
FaceLogin
}
};
</script>
<style>
/* 添加一些全局样式 */
</style>
3. 运行项目
首先，启动FastAPI后端：
python main.py
然后，启动Vue前端：
npm run serve
现在，你可以访问http://localhost:8080来使用人脸识别登录功能。
4. 已知人脸数据
在known_faces目录下放置已知用户的图片，图片文件名即为用户名（例如user1.jpg）。系统会加载这些图片并用于人脸识别。
5. 总结
通过以上步骤，你可以实现一个基于人脸识别的Web登录界面。FastAPI处理后端逻辑，Vue处理前端界面，两者通过HTTP请求进行通信。你可以根据需要进一步扩展和优化这个系统。