Python项目-基于深度学习的校园人脸识别考勤系统

引言

随着人工智能技术的快速发展，深度学习在计算机视觉领域的应用日益广泛。人脸识别作为其中的一个重要分支，已经在安防、金融、教育等多个领域展现出巨大的应用价值。本文将详细介绍如何使用Python和深度学习技术构建一个校园人脸识别考勤系统，该系统能够自动识别学生身份并记录考勤信息，大大提高了考勤效率，减轻了教师的工作负担。

系统概述

功能特点

• 实时人脸检测与识别：能够从摄像头视频流中实时检测并识别人脸
• 自动考勤记录：识别学生身份后自动记录考勤信息
• 数据可视化：提供直观的考勤统计和数据分析功能
• 管理员后台：方便教师和管理员查看和管理考勤记录
• 用户友好界面：简洁直观的用户界面，易于操作

技术栈

• 编程语言：Python 3.8+
• 深度学习框架：TensorFlow/Keras、PyTorch
• 人脸检测与识别：dlib、face_recognition、OpenCV
• Web框架：Flask/Django
• 数据库：SQLite/MySQL
• 前端技术：HTML、CSS、JavaScript、Bootstrap

系统设计

系统架构

系统采用经典的三层架构设计：

1. 表示层：用户界面，包括学生签到界面和管理员后台
2. 业务逻辑层：核心算法实现，包括人脸检测、特征提取和身份识别
3. 数据访问层：负责数据的存储和检索，包括学生信息和考勤记录

数据流程

1. 摄像头捕获实时视频流
2. 人脸检测模块从视频帧中检测人脸
3. 特征提取模块提取人脸特征
4. 身份识别模块将提取的特征与数据库中的特征进行比对
5. 考勤记录模块记录识别结果和时间信息
6. 数据分析模块生成考勤统计报表

核心技术实现

1. 人脸检测

人脸检测是整个系统的第一步，我们使用HOG（Histogram of Oriented Gradients）算法或基于深度学习的方法（如MTCNN、RetinaFace）来检测图像中的人脸。

1. import cv2
2. import dlib
4. # 使用dlib的人脸检测器
5. detector = dlib.get_frontal_face_detector()
7. def detect_faces(image):
8. # 转换为灰度图
9. gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
10. # 检测人脸
11. faces = detector(gray, 1)
13. # 返回人脸位置列表
14. face_locations = []
15. for face in faces:
16. x, y, w, h = face.left(), face.top(), face.width(), face.height()
17. face_locations.append((y, x + w, y + h, x))
19. return face_locations

复制代码

2. 人脸特征提取

检测到人脸后，我们需要提取人脸的特征向量，这里使用深度学习模型（如FaceNet、ArcFace）来提取高维特征。

1. import face_recognition
3. def extract_face_features(image, face_locations):
4. # 提取人脸特征
5. face_encodings = face_recognition.face_encodings(image, face_locations)
6. return face_encodings

复制代码

3. 人脸识别

将提取的特征与数据库中已存储的特征进行比对，找出最匹配的身份。

1. def recognize_faces(face_encodings, known_face_encodings, known_face_names):
2. recognized_names = []
4. for face_encoding in face_encodings:
5. # 比较人脸特征与已知特征的距离
6. matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
7. name = "Unknown"
9. # 找出距离最小的匹配
10. face_distances = face_recognition.face_distance(known_face_encodings, face_encoding)
11. best_match_index = np.argmin(face_distances)
13. if matches[best_match_index]:
14. name = known_face_names[best_match_index]
16. recognized_names.append(name)
18. return recognized_names

复制代码

4. 考勤记录

识别到学生身份后，系统会自动记录考勤信息，包括学生ID、姓名、时间等。

1. import datetime
2. import sqlite3
4. def record_attendance(student_id, student_name):
5. conn = sqlite3.connect('attendance.db')
6. cursor = conn.cursor()
8. # 获取当前时间
9. now = datetime.datetime.now()
10. date = now.strftime("%Y-%m-%d")
11. time = now.strftime("%H:%M:%S")
13. # 插入考勤记录
14. cursor.execute("""
15. INSERT INTO attendance (student_id, student_name, date, time)
16. VALUES (?, ?, ?, ?)
17. """, (student_id, student_name, date, time))
19. conn.commit()
20. conn.close()

复制代码

系统集成

将上述模块集成到一个完整的系统中，下面是主程序的示例代码：

1. import cv2
2. import numpy as np
3. import face_recognition
4. import os
5. from datetime import datetime
6. import sqlite3
8. # 初始化数据库
9. def init_database():
10. conn = sqlite3.connect('attendance.db')
11. cursor = conn.cursor()
13. # 创建学生表
14. cursor.execute('''
15. CREATE TABLE IF NOT EXISTS students (
16. id INTEGER PRIMARY KEY,
17. student_id TEXT,
18. name TEXT,
19. face_encoding BLOB
20. )
21. ''')
23. # 创建考勤记录表
24. cursor.execute('''
25. CREATE TABLE IF NOT EXISTS attendance (
26. id INTEGER PRIMARY KEY,
27. student_id TEXT,
28. student_name TEXT,
29. date TEXT,
30. time TEXT
31. )
32. ''')
34. conn.commit()
35. conn.close()
37. # 加载已知学生人脸特征
38. def load_known_faces():
39. conn = sqlite3.connect('attendance.db')
40. cursor = conn.cursor()
42. cursor.execute("SELECT student_id, name, face_encoding FROM students")
43. rows = cursor.fetchall()
45. known_face_encodings = []
46. known_face_ids = []
47. known_face_names = []
49. for row in rows:
50. student_id, name, face_encoding_blob = row
51. face_encoding = np.frombuffer(face_encoding_blob, dtype=np.float64)
53. known_face_encodings.append(face_encoding)
54. known_face_ids.append(student_id)
55. known_face_names.append(name)
57. conn.close()
59. return known_face_encodings, known_face_ids, known_face_names
61. # 主程序
62. def main():
63. # 初始化数据库
64. init_database()
66. # 加载已知人脸
67. known_face_encodings, known_face_ids, known_face_names = load_known_faces()
69. # 打开摄像头
70. video_capture = cv2.VideoCapture(0)
72. # 记录已识别的学生，避免重复记录
73. recognized_students = set()
75. while True:
76. # 读取一帧视频
77. ret, frame = video_capture.read()
79. # 缩小图像以加快处理速度
80. small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)
82. # 将BGR转换为RGB（face_recognition使用RGB）
83. rgb_small_frame = small_frame[:, :, ::-1]
85. # 检测人脸
86. face_locations = face_recognition.face_locations(rgb_small_frame)
87. face_encodings = face_recognition.face_encodings(rgb_small_frame, face_locations)
89. face_names = []
90. for face_encoding in face_encodings:
91. # 比较人脸
92. matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
93. name = "Unknown"
94. student_id = "Unknown"
96. # 找出最匹配的人脸
97. face_distances = face_recognition.face_distance(known_face_encodings, face_encoding)
98. best_match_index = np.argmin(face_distances)
100. if matches[best_match_index]:
101. name = known_face_names[best_match_index]
102. student_id = known_face_ids[best_match_index]
104. # 记录考勤
105. if student_id not in recognized_students:
106. record_attendance(student_id, name)
107. recognized_students.add(student_id)
109. face_names.append(name)
111. # 显示结果
112. for (top, right, bottom, left), name in zip(face_locations, face_names):
113. # 放大回原始大小
114. top *= 4
115. right *= 4
116. bottom *= 4
117. left *= 4
119. # 绘制人脸框
120. cv2.rectangle(frame, (left, top), (right, bottom), (0, 0, 255), 2)
122. # 绘制名字标签
123. cv2.rectangle(frame, (left, bottom - 35), (right, bottom), (0, 0, 255), cv2.FILLED)
124. font = cv2.FONT_HERSHEY_DUPLEX
125. cv2.putText(frame, name, (left + 6, bottom - 6), font, 1.0, (255, 255, 255), 1)
127. # 显示结果图像
128. cv2.imshow('Video', frame)
130. # 按q退出
131. if cv2.waitKey(1) & 0xFF == ord('q'):
132. break
134. # 释放资源
135. video_capture.release()
136. cv2.destroyAllWindows()
138. if __name__ == "__main__":
139. main()

复制代码

Web界面实现

使用Flask框架构建Web界面，方便用户操作和查看考勤记录。

1. from flask import Flask, render_template, request, redirect, url_for
2. import sqlite3
3. import pandas as pd
4. import matplotlib.pyplot as plt
5. import io
6. import base64
8. app = Flask(__name__)
10. @app.route('/')
11. def index():
12. return render_template('index.html')
14. @app.route('/attendance')
15. def attendance():
16. conn = sqlite3.connect('attendance.db')
18. # 获取考勤记录
19. query = """
20. SELECT student_id, student_name, date, time
21. FROM attendance
22. ORDER BY date DESC, time DESC
23. """
25. df = pd.read_sql_query(query, conn)
26. conn.close()
28. return render_template('attendance.html', records=df.to_dict('records'))
30. @app.route('/statistics')
31. def statistics():
32. conn = sqlite3.connect('attendance.db')
34. # 获取考勤统计
35. query = """
36. SELECT date, COUNT(DISTINCT student_id) as count
37. FROM attendance
38. GROUP BY date
39. ORDER BY date
40. """
42. df = pd.read_sql_query(query, conn)
43. conn.close()
45. # 生成统计图表
46. plt.figure(figsize=(10, 6))
47. plt.bar(df['date'], df['count'])
48. plt.xlabel('日期')
49. plt.ylabel('出勤人数')
50. plt.title('每日出勤统计')
51. plt.xticks(rotation=45)
53. # 将图表转换为base64编码
54. img = io.BytesIO()
55. plt.savefig(img, format='png')
56. img.seek(0)
57. plot_url = base64.b64encode(img.getvalue()).decode()
59. return render_template('statistics.html', plot_url=plot_url)
61. if __name__ == '__main__':
62. app.run(debug=True)

复制代码

系统部署

环境配置

1. 安装必要的Python库：

1. pip install opencv-python dlib face_recognition numpy flask pandas matplotlib

复制代码

2. 准备学生人脸数据库：

1. def register_new_student(student_id, name, image_path):
2. # 加载图像
3. image = face_recognition.load_image_file(image_path)
5. # 检测人脸
6. face_locations = face_recognition.face_locations(image)
8. if len(face_locations) != 1:
9. return False, "图像中没有检测到人脸或检测到多个人脸"
11. # 提取人脸特征
12. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
14. # 将特征存入数据库
15. conn = sqlite3.connect('attendance.db')
16. cursor = conn.cursor()
18. cursor.execute("""
19. INSERT INTO students (student_id, name, face_encoding)
20. VALUES (?, ?, ?)
21. """, (student_id, name, face_encoding.tobytes()))
23. conn.commit()
24. conn.close()
26. return True, "学生注册成功"

复制代码

3. 启动系统：

1. python app.py

复制代码

硬件要求

• 摄像头：支持720p或更高分辨率
• 处理器：建议Intel Core i5或更高性能
• 内存：至少8GB RAM
• 存储：至少100GB可用空间（用于存储学生数据和考勤记录）

系统优化与扩展

性能优化

1. 模型压缩：使用模型量化和剪枝技术减小模型体积，提高推理速度
2. GPU加速：利用GPU进行并行计算，加快人脸检测和识别过程
3. 批处理：同时处理多个人脸，减少模型加载和初始化时间

功能扩展

1. 活体检测：防止照片欺骗，提高系统安全性
2. 表情识别：分析学生表情，评估课堂专注度
3. 移动端应用：开发移动应用，支持远程考勤
4. 多模态融合：结合声纹识别等多种生物特征，提高识别准确率

安全与隐私保护

在实施人脸识别系统时，必须高度重视用户隐私和数据安全：

1. 数据加密：对存储的人脸特征和个人信息进行加密
2. 权限控制：严格控制系统访问权限，防止未授权访问
3. 数据最小化：只收集和存储必要的个人信息
4. 透明度：向用户明确说明数据收集和使用方式
5. 合规性：确保系统符合相关法律法规要求

结论

基于深度学习的校园人脸识别考勤系统是人工智能技术在教育领域的一个典型应用。通过整合计算机视觉、深度学习和Web开发技术，我们构建了一个高效、准确的自动考勤系统，不仅大大提高了考勤效率，还为教育管理提供了数据支持。

随着深度学习技术的不断发展，人脸识别系统的准确率和性能将进一步提升，应用场景也将更加广泛。同时，我们也需要关注系统在实际应用中可能面临的挑战，如隐私保护、环境适应性等问题，不断优化和完善系统功能。

源代码

Directory Content Summary

Source Directory: ./face_attendance_system

Directory Structure

1. face_attendance_system/
2. app.py
3. face_detection.py
4. README.md
5. requirements.txt
6. database/
7. db_setup.py
8. init_db.py
9. migrate.py
10. models.py
11. static/
12. css/
13. style.css
14. js/
15. main.js
16. uploads/
17. templates/
18. attendance.html
19. base.html
20. dashboard.html
21. edit_user.html
22. face_recognition_attendance.html
23. face_registration.html
24. face_registration_admin.html
25. index.html
26. login.html
27. register.html
28. user_management.html
29. webcam_registration.html

复制代码

File Contents

app.py

1. import os
2. import numpy as np
3. import face_recognition
4. import cv2
5. from flask import Flask, render_template, request, redirect, url_for, flash, session, jsonify
6. from werkzeug.utils import secure_filename
7. import base64
8. from datetime import datetime
9. import json
10. import uuid
11. import shutil
13. # Import database models
14. from database.models import User, FaceEncoding, Attendance
15. from database.db_setup import init_database
17. # Initialize the Flask application
18. app = Flask(__name__)
19. app.secret_key = 'your_secret_key_here' # Change this to a random secret key in production
21. # Initialize database
22. init_database()
24. # Configure upload folder
25. UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static', 'uploads')
26. if not os.path.exists(UPLOAD_FOLDER):
27. os.makedirs(UPLOAD_FOLDER)
28. app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
29. app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 16MB max upload size
31. # Allowed file extensions
32. ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
34. def allowed_file(filename):
35. """Check if file has allowed extension"""
36. return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
38. @app.route('/')
39. def index():
40. """Home page route"""
41. if 'user_id' in session:
42. return redirect(url_for('dashboard'))
43. return render_template('index.html')
45. @app.route('/login', methods=['GET', 'POST'])
46. def login():
47. """Login route"""
48. if request.method == 'POST':
49. student_id = request.form.get('student_id')
50. password = request.form.get('password')
52. if not student_id or not password:
53. flash('Please provide both student ID and password', 'danger')
54. return render_template('login.html')
56. user = User.authenticate(student_id, password)
58. if user:
59. session['user_id'] = user['id']
60. session['student_id'] = user['student_id']
61. session['name'] = user['name']
62. flash(f'Welcome back, {user["name"]}!', 'success')
63. return redirect(url_for('dashboard'))
64. else:
65. flash('Invalid student ID or password', 'danger')
67. return render_template('login.html')
69. @app.route('/register', methods=['GET', 'POST'])
70. def register():
71. """User registration route"""
72. if request.method == 'POST':
73. student_id = request.form.get('student_id')
74. name = request.form.get('name')
75. email = request.form.get('email')
76. password = request.form.get('password')
77. confirm_password = request.form.get('confirm_password')
79. # Validate input
80. if not all([student_id, name, email, password, confirm_password]):
81. flash('Please fill in all fields', 'danger')
82. return render_template('register.html')
84. if password != confirm_password:
85. flash('Passwords do not match', 'danger')
86. return render_template('register.html')
88. # Check if student ID already exists
89. existing_user = User.get_user_by_student_id(student_id)
90. if existing_user:
91. flash('Student ID already registered', 'danger')
92. return render_template('register.html')
94. # Create user
95. user_id = User.create_user(student_id, name, email, password)
97. if user_id:
98. flash('Registration successful! Please login.', 'success')
99. return redirect(url_for('login'))
100. else:
101. flash('Registration failed. Please try again.', 'danger')
103. return render_template('register.html')
105. @app.route('/logout')
106. def logout():
107. """Logout route"""
108. session.clear()
109. flash('You have been logged out', 'info')
110. return redirect(url_for('index'))
112. @app.route('/dashboard')
113. def dashboard():
114. """User dashboard route"""
115. if 'user_id' not in session:
116. flash('Please login first', 'warning')
117. return redirect(url_for('login'))
119. user_id = session['user_id']
120. user = User.get_user_by_id(user_id)
122. # Get user's face encodings
123. face_encodings = FaceEncoding.get_face_encodings_by_user_id(user_id)
124. has_face_data = len(face_encodings) > 0
126. # Get user's attendance records
127. attendance_records = Attendance.get_attendance_by_user(user_id)
129. return render_template('dashboard.html',
130. user=user,
131. has_face_data=has_face_data,
132. attendance_records=attendance_records)
134. @app.route('/face-registration', methods=['GET', 'POST'])
135. def face_registration():
136. """Face registration route"""
137. if 'user_id' not in session:
138. flash('Please login first', 'warning')
139. return redirect(url_for('login'))
141. if request.method == 'POST':
142. # Check if the post request has the file part
143. if 'face_image' not in request.files:
144. flash('No file part', 'danger')
145. return redirect(request.url)
147. file = request.files['face_image']
149. # If user does not select file, browser also
150. # submit an empty part without filename
151. if file.filename == '':
152. flash('No selected file', 'danger')
153. return redirect(request.url)
155. if file and allowed_file(file.filename):
156. # Generate a unique filename
157. filename = secure_filename(f"{session['student_id']}_{uuid.uuid4().hex}.jpg")
158. filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
159. file.save(filepath)
161. # Process the image for face detection
162. image = face_recognition.load_image_file(filepath)
163. face_locations = face_recognition.face_locations(image)
165. if not face_locations:
166. os.remove(filepath) # Remove the file if no face is detected
167. flash('No face detected in the image. Please try again.', 'danger')
168. return redirect(request.url)
170. if len(face_locations) > 1:
171. os.remove(filepath) # Remove the file if multiple faces are detected
172. flash('Multiple faces detected in the image. Please upload an image with only your face.', 'danger')
173. return redirect(request.url)
175. # Extract face encoding
176. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
178. # Save face encoding to database
179. encoding_id = FaceEncoding.save_face_encoding(session['user_id'], face_encoding)
181. if encoding_id:
182. flash('Face registered successfully!', 'success')
183. return redirect(url_for('dashboard'))
184. else:
185. flash('Failed to register face. Please try again.', 'danger')
186. else:
187. flash('Invalid file type. Please upload a JPG, JPEG or PNG image.', 'danger')
189. return render_template('face_registration.html')
191. @app.route('/webcam-registration', methods=['GET', 'POST'])
192. def webcam_registration():
193. """Face registration using webcam"""
194. if 'user_id' not in session:
195. flash('Please login first', 'warning')
196. return redirect(url_for('login'))
198. if request.method == 'POST':
199. # Get the base64 encoded image from the request
200. image_data = request.form.get('image_data')
202. if not image_data:
203. return jsonify({'success': False, 'message': 'No image data received'})
205. # Remove the data URL prefix
206. image_data = image_data.split(',')[1]
208. # Decode the base64 image
209. image_bytes = base64.b64decode(image_data)
211. # Generate a unique filename
212. filename = f"{session['student_id']}_{uuid.uuid4().hex}.jpg"
213. filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
215. # Save the image
216. with open(filepath, 'wb') as f:
217. f.write(image_bytes)
219. # Process the image for face detection
220. image = face_recognition.load_image_file(filepath)
221. face_locations = face_recognition.face_locations(image)
223. if not face_locations:
224. os.remove(filepath) # Remove the file if no face is detected
225. return jsonify({'success': False, 'message': 'No face detected in the image. Please try again.'})
227. if len(face_locations) > 1:
228. os.remove(filepath) # Remove the file if multiple faces are detected
229. return jsonify({'success': False, 'message': 'Multiple faces detected in the image. Please ensure only your face is visible.'})
231. # Extract face encoding
232. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
234. # Save face encoding to database
235. encoding_id = FaceEncoding.save_face_encoding(session['user_id'], face_encoding)
237. if encoding_id:
238. return jsonify({'success': True, 'message': 'Face registered successfully!'})
239. else:
240. os.remove(filepath)
241. return jsonify({'success': False, 'message': 'Failed to register face. Please try again.'})
243. return render_template('webcam_registration.html')
245. @app.route('/webcam-registration-admin', methods=['POST'])
246. def webcam_registration_admin():
247. """Process webcam registration for face data"""
248. if 'user_id' not in session:
249. return jsonify({'success': False, 'message': 'Please login first'})
251. # Get image data from form
252. image_data = request.form.get('image_data')
253. user_id = request.form.get('user_id')
255. if not image_data:
256. return jsonify({'success': False, 'message': 'No image data provided'})
258. # Check if user_id is provided (for admin registration)
259. if not user_id:
260. user_id = session['user_id']
262. # Get user data
263. user = User.get_user_by_id(user_id)
264. if not user:
265. return jsonify({'success': False, 'message': 'User not found'})
267. try:
268. # Remove header from the base64 string
269. image_data = image_data.split(',')[1]
271. # Decode base64 string to image
272. image_bytes = base64.b64decode(image_data)
274. # Create a temporary file to save the image
275. temp_filepath = os.path.join(app.config['UPLOAD_FOLDER'], f"temp_{uuid.uuid4().hex}.jpg")
276. with open(temp_filepath, 'wb') as f:
277. f.write(image_bytes)
279. # Process the image for face detection
280. image = face_recognition.load_image_file(temp_filepath)
281. face_locations = face_recognition.face_locations(image)
283. if not face_locations:
284. os.remove(temp_filepath)
285. return jsonify({'success': False, 'message': 'No face detected in the image. Please try again.'})
287. if len(face_locations) > 1:
288. os.remove(temp_filepath)
289. return jsonify({'success': False, 'message': 'Multiple faces detected in the image. Please ensure only one face is visible.'})
291. # Extract face encoding
292. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
294. # Save face encoding to database
295. encoding_id = FaceEncoding.save_face_encoding(user_id, face_encoding)
297. if encoding_id:
298. # Save the processed image with a proper filename
299. final_filename = secure_filename(f"{user['student_id']}_{uuid.uuid4().hex}.jpg")
300. final_filepath = os.path.join(app.config['UPLOAD_FOLDER'], final_filename)
301. shutil.copy(temp_filepath, final_filepath)
303. # Remove temporary file
304. os.remove(temp_filepath)
306. return jsonify({'success': True, 'message': 'Face registered successfully!'})
307. else:
308. os.remove(temp_filepath)
309. return jsonify({'success': False, 'message': 'Failed to register face. Please try again.'})
311. except Exception as e:
312. # Clean up if there was an error
313. if os.path.exists(temp_filepath):
314. os.remove(temp_filepath)
315. return jsonify({'success': False, 'message': f'An error occurred: {str(e)}'})
317. @app.route('/attendance', methods=['GET'])
318. def attendance():
319. """View attendance records"""
320. if 'user_id' not in session:
321. flash('Please login first', 'warning')
322. return redirect(url_for('login'))
324. date = request.args.get('date', datetime.now().strftime('%Y-%m-%d'))
326. attendance_records = Attendance.get_attendance_by_date(date)
328. return render_template('attendance.html',
329. attendance_records=attendance_records,
330. selected_date=date)
332. @app.route('/check-in', methods=['GET'])
333. def check_in():
334. """Manual check-in page"""
335. if 'user_id' not in session:
336. flash('Please login first', 'warning')
337. return redirect(url_for('login'))
339. return render_template('check_in.html')
341. @app.route('/process-check-in', methods=['POST'])
342. def process_check_in():
343. """Process manual check-in"""
344. if 'user_id' not in session:
345. return jsonify({'success': False, 'message': 'Please login first'})
347. user_id = session['user_id']
349. # Record check-in
350. attendance_id = Attendance.record_check_in(user_id)
352. if attendance_id:
353. return jsonify({'success': True, 'message': 'Check-in successful!'})
354. else:
355. return jsonify({'success': False, 'message': 'You have already checked in today'})
357. @app.route('/check-out', methods=['POST'])
358. def check_out():
359. """Process check-out"""
360. if 'user_id' not in session:
361. return jsonify({'success': False, 'message': 'Please login first'})
363. user_id = session['user_id']
365. # Record check-out
366. success = Attendance.record_check_out(user_id)
368. if success:
369. return jsonify({'success': True, 'message': 'Check-out successful!'})
370. else:
371. return jsonify({'success': False, 'message': 'No active check-in found for today'})
373. @app.route('/face-recognition-attendance', methods=['GET'])
374. def face_recognition_attendance():
375. """Face recognition attendance page"""
376. if 'user_id' not in session:
377. flash('Please login first', 'warning')
378. return redirect(url_for('login'))
380. return render_template('face_recognition_attendance.html')
382. @app.route('/process-face-attendance', methods=['POST'])
383. def process_face_attendance():
384. """Process face recognition attendance"""
385. # Get the base64 encoded image from the request
386. image_data = request.form.get('image_data')
388. if not image_data:
389. return jsonify({'success': False, 'message': 'No image data received'})
391. # Remove the data URL prefix
392. image_data = image_data.split(',')[1]
394. # Decode the base64 image
395. image_bytes = base64.b64decode(image_data)
397. # Generate a temporary filename
398. temp_filename = f"temp_{uuid.uuid4().hex}.jpg"
399. temp_filepath = os.path.join(app.config['UPLOAD_FOLDER'], temp_filename)
401. # Save the image
402. with open(temp_filepath, 'wb') as f:
403. f.write(image_bytes)
405. try:
406. # Process the image for face detection
407. image = face_recognition.load_image_file(temp_filepath)
408. face_locations = face_recognition.face_locations(image)
410. if not face_locations:
411. return jsonify({'success': False, 'message': 'No face detected in the image. Please try again.'})
413. if len(face_locations) > 1:
414. return jsonify({'success': False, 'message': 'Multiple faces detected. Please ensure only one person is in the frame.'})
416. # Extract face encoding
417. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
419. # Get all face encodings from database
420. all_encodings = FaceEncoding.get_all_face_encodings()
422. if not all_encodings:
423. return jsonify({'success': False, 'message': 'No registered faces found in the database.'})
425. # Compare with known face encodings
426. known_encodings = [enc['encoding'] for enc in all_encodings]
427. matches = face_recognition.compare_faces(known_encodings, face_encoding)
429. if True in matches:
430. # Find the matching index
431. match_index = matches.index(True)
432. matched_user = all_encodings[match_index]
434. # Record attendance
435. attendance_id = Attendance.record_check_in(matched_user['user_id'])
437. if attendance_id:
438. return jsonify({
439. 'success': True,
440. 'message': f'Welcome, {matched_user["name"]}! Your attendance has been recorded.',
441. 'user': {
442. 'name': matched_user['name'],
443. 'student_id': matched_user['student_id']
444. }
445. })
446. else:
447. return jsonify({
448. 'success': True,
449. 'message': f'Welcome back, {matched_user["name"]}! You have already checked in today.',
450. 'user': {
451. 'name': matched_user['name'],
452. 'student_id': matched_user['student_id']
453. }
454. })
455. else:
456. return jsonify({'success': False, 'message': 'Face not recognized. Please register your face or try again.'})
458. finally:
459. # Clean up the temporary file
460. if os.path.exists(temp_filepath):
461. os.remove(temp_filepath)
463. @app.route('/user-management', methods=['GET'])
464. def user_management():
465. """User management route for admins"""
466. if 'user_id' not in session:
467. flash('Please login first', 'warning')
468. return redirect(url_for('login'))
470. # Check if user is admin (in a real app, you would check user role)
471. # For demo purposes, we'll allow all logged-in users to access this page
473. # Get search query and pagination parameters
474. search_query = request.args.get('search', '')
475. page = int(request.args.get('page', 1))
476. per_page = 10
478. # Get users based on search query
479. if search_query:
480. users = User.search_users(search_query, page, per_page)
481. total_users = User.count_search_results(search_query)
482. else:
483. users = User.get_all_users(page, per_page)
484. total_users = User.count_all_users()
486. # Calculate total pages
487. total_pages = (total_users + per_page - 1) // per_page
489. # Check if each user has face data
490. for user in users:
491. face_encodings = FaceEncoding.get_face_encodings_by_user_id(user['id'])
492. user['has_face_data'] = len(face_encodings) > 0
494. return render_template('user_management.html',
495. users=users,
496. search_query=search_query,
497. current_page=page,
498. total_pages=total_pages)
500. @app.route('/edit-user/<int:user_id>', methods=['GET', 'POST'])
501. def edit_user(user_id):
502. """Edit user route"""
503. if 'user_id' not in session:
504. flash('Please login first', 'warning')
505. return redirect(url_for('login'))
507. # Check if user is admin (in a real app, you would check user role)
508. # For demo purposes, we'll allow all logged-in users to access this page
510. # Get user data
511. user = User.get_user_by_id(user_id)
512. if not user:
513. flash('User not found', 'danger')
514. return redirect(url_for('user_management'))
516. # Check if user has face data
517. face_encodings = FaceEncoding.get_face_encodings_by_user_id(user_id)
518. user['has_face_data'] = len(face_encodings) > 0
520. if request.method == 'POST':
521. student_id = request.form.get('student_id')
522. name = request.form.get('name')
523. email = request.form.get('email')
524. password = request.form.get('password')
525. role = request.form.get('role')
526. is_active = 'is_active' in request.form
528. # Update user
529. success = User.update_user(user_id, student_id, name, email, password, role, is_active)
531. if success:
532. flash('User updated successfully', 'success')
533. return redirect(url_for('user_management'))
534. else:
535. flash('Failed to update user', 'danger')
537. return render_template('edit_user.html', user=user)
539. @app.route('/delete-user/<int:user_id>', methods=['POST'])
540. def delete_user(user_id):
541. """Delete user route"""
542. if 'user_id' not in session:
543. flash('Please login first', 'warning')
544. return redirect(url_for('login'))
546. # Check if user is admin (in a real app, you would check user role)
547. # For demo purposes, we'll allow all logged-in users to access this page
549. # Delete user
550. success = User.delete_user(user_id)
552. if success:
553. flash('User deleted successfully', 'success')
554. else:
555. flash('Failed to delete user', 'danger')
557. return redirect(url_for('user_management'))
559. @app.route('/reset-face-data/<int:user_id>', methods=['POST'])
560. def reset_face_data(user_id):
561. """Reset user's face data"""
562. if 'user_id' not in session:
563. flash('Please login first', 'warning')
564. return redirect(url_for('login'))
566. # Check if user is admin (in a real app, you would check user role)
567. # For demo purposes, we'll allow all logged-in users to access this page
569. # Delete face encodings
570. success = FaceEncoding.delete_face_encodings_by_user_id(user_id)
572. if success:
573. flash('Face data reset successfully', 'success')
574. else:
575. flash('Failed to reset face data', 'danger')
577. return redirect(url_for('edit_user', user_id=user_id))
579. @app.route('/face-registration-admin/<int:user_id>', methods=['GET', 'POST'])
580. def face_registration_admin(user_id):
581. """Face registration for admin to register user's face"""
582. if 'user_id' not in session:
583. flash('Please login first', 'warning')
584. return redirect(url_for('login'))
586. # Check if user is admin (in a real app, you would check user role)
587. # For demo purposes, we'll allow all logged-in users to access this page
589. # Get user data
590. user = User.get_user_by_id(user_id)
591. if not user:
592. flash('User not found', 'danger')
593. return redirect(url_for('user_management'))
595. if request.method == 'POST':
596. # Check if the post request has the file part
597. if 'face_image' not in request.files:
598. flash('No file part', 'danger')
599. return redirect(request.url)
601. file = request.files['face_image']
603. # If user does not select file, browser also
604. # submit an empty part without filename
605. if file.filename == '':
606. flash('No selected file', 'danger')
607. return redirect(request.url)
609. if file and allowed_file(file.filename):
610. # Generate a unique filename
611. filename = secure_filename(f"{user['student_id']}_{uuid.uuid4().hex}.jpg")
612. filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
613. file.save(filepath)
615. # Process the image for face detection
616. image = face_recognition.load_image_file(filepath)
617. face_locations = face_recognition.face_locations(image)
619. if not face_locations:
620. os.remove(filepath) # Remove the file if no face is detected
621. flash('No face detected in the image. Please try again.', 'danger')
622. return redirect(request.url)
624. if len(face_locations) > 1:
625. os.remove(filepath) # Remove the file if multiple faces are detected
626. flash('Multiple faces detected in the image. Please upload an image with only one face.', 'danger')
627. return redirect(request.url)
629. # Extract face encoding
630. face_encoding = face_recognition.face_encodings(image, face_locations)[0]
632. # Save face encoding to database
633. encoding_id = FaceEncoding.save_face_encoding(user_id, face_encoding)
635. if encoding_id:
636. flash('Face registered successfully!', 'success')
637. return redirect(url_for('edit_user', user_id=user_id))
638. else:
639. flash('Failed to register face. Please try again.', 'danger')
640. else:
641. flash('Invalid file type. Please upload a JPG, JPEG or PNG image.', 'danger')
643. return render_template('face_registration_admin.html', user=user)
645. @app.route('/detect-face', methods=['POST'])
646. def detect_face():
647. """检测人脸API"""
648. if 'image_data' not in request.form:
649. return jsonify({'success': False, 'message': '未提供图像数据'})
651. # 获取图像数据
652. image_data = request.form.get('image_data')
654. try:
655. # 移除base64头部
656. if ',' in image_data:
657. image_data = image_data.split(',')[1]
659. # 解码base64图像
660. image_bytes = base64.b64decode(image_data)
661. nparr = np.frombuffer(image_bytes, np.uint8)
662. image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
664. # 转换为RGB（OpenCV使用BGR）
665. rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
667. # 检测人脸
668. face_locations = face_recognition.face_locations(rgb_image)
670. return jsonify({
671. 'success': True,
672. 'message': '人脸检测完成',
673. 'face_count': len(face_locations)
674. })
676. except Exception as e:
677. app.logger.error(f"人脸检测错误: {str(e)}")
678. return jsonify({'success': False, 'message': f'处理图像时出错: {str(e)}'})
680. @app.route('/recognize-face', methods=['POST'])
681. def recognize_face():
682. """识别人脸API"""
683. if 'image_data' not in request.form:
684. return jsonify({'success': False, 'message': '未提供图像数据'})
686. # 获取图像数据
687. image_data = request.form.get('image_data')
689. try:
690. # 移除base64头部
691. if ',' in image_data:
692. image_data = image_data.split(',')[1]
694. # 解码base64图像
695. image_bytes = base64.b64decode(image_data)
696. nparr = np.frombuffer(image_bytes, np.uint8)
697. image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
699. # 转换为RGB（OpenCV使用BGR）
700. rgb_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
702. # 检测人脸
703. face_locations = face_recognition.face_locations(rgb_image)
705. if not face_locations:
706. return jsonify({'success': False, 'message': '未检测到人脸，请确保脸部清晰可见'})
708. if len(face_locations) > 1:
709. return jsonify({'success': False, 'message': '检测到多个人脸，请确保画面中只有一个人脸'})
711. # 提取人脸特征
712. face_encoding = face_recognition.face_encodings(rgb_image, face_locations)[0]
714. # 加载所有已知人脸编码
715. known_faces = FaceEncoding.get_all_face_encodings()
717. if not known_faces:
718. return jsonify({'success': False, 'message': '数据库中没有注册的人脸'})
720. # 比较人脸
721. known_encodings = [face['encoding'] for face in known_faces]
722. matches = face_recognition.compare_faces(known_encodings, face_encoding)
723. face_distances = face_recognition.face_distance(known_encodings, face_encoding)
725. if True in matches:
726. # 找到最佳匹配
727. best_match_index = np.argmin(face_distances)
728. confidence = 1 - face_distances[best_match_index]
730. if confidence >= 0.6: # 置信度阈值
731. matched_user = known_faces[best_match_index]
733. # 返回识别结果
734. return jsonify({
735. 'success': True,
736. 'message': f'成功识别为 {matched_user["name"]}',
737. 'user': {
738. 'user_id': matched_user['user_id'],
739. 'student_id': matched_user['student_id'],
740. 'name': matched_user['name']
741. },
742. 'confidence': float(confidence)
743. })
744. else:
745. return jsonify({'success': False, 'message': '识别置信度过低，请重新尝试'})
746. else:
747. return jsonify({'success': False, 'message': '无法识别您的身份，请确保您已注册人脸数据'})
749. except Exception as e:
750. app.logger.error(f"人脸识别错误: {str(e)}")
751. return jsonify({'success': False, 'message': f'处理图像时出错: {str(e)}'})
753. @app.route('/record-attendance', methods=['POST'])
754. def record_attendance():
755. """记录考勤API"""
756. if 'user_id' not in session:
757. return jsonify({'success': False, 'message': '请先登录'})
759. # 获取请求数据
760. data = request.get_json()
762. if not data or 'user_id' not in data:
763. return jsonify({'success': False, 'message': '无效的请求数据'})
765. user_id = data.get('user_id')
766. confidence = data.get('confidence', 0)
768. # 验证用户身份（确保当前登录用户只能为自己签到）
769. if int(session['user_id']) != int(user_id) and session.get('role') != 'admin':
770. return jsonify({'success': False, 'message': '无权为其他用户签到'})
772. # 检查是否已经签到
773. today_attendance = Attendance.get_today_attendance(user_id)
774. if today_attendance:
775. return jsonify({'success': False, 'message': '今天已经签到，无需重复签到'})
777. # 记录考勤
778. attendance_id = Attendance.record_check_in(user_id)
780. if attendance_id:
781. # 获取用户信息
782. user = User.get_user_by_id(user_id)
784. return jsonify({
785. 'success': True,
786. 'message': f'签到成功！欢迎 {user["name"]}',
787. 'attendance_id': attendance_id,
788. 'check_in_time': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
789. })
790. else:
791. return jsonify({'success': False, 'message': '签到失败，请稍后重试'})
793. @app.route('/get-recent-attendance', methods=['GET'])
794. def get_recent_attendance():
795. """获取最近考勤记录API"""
796. if 'user_id' not in session:
797. return jsonify({'success': False, 'message': '请先登录'})
799. # 获取最近的考勤记录（默认10条）
800. limit = request.args.get('limit', 10, type=int)
801. records = Attendance.get_recent_attendance(limit)
803. return jsonify({
804. 'success': True,
805. 'records': records
806. })
808. if __name__ == '__main__':
809. app.run(debug=True)

复制代码

face_detection.py

1. import cv2
2. import face_recognition
3. import numpy as np
4. import os
5. import pickle
6. from datetime import datetime
7. import time
8. import logging
10. # 配置日志
11. logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
12. logger = logging.getLogger(__name__)
14. class FaceDetector:
15. """人脸检测与识别类"""
17. def __init__(self, model_type='hog', tolerance=0.6, known_faces=None):
18. """
19. 初始化人脸检测器
21. 参数:
22. model_type (str): 使用的模型类型，'hog'（CPU）或'cnn'（GPU）
23. tolerance (float): 人脸匹配的容差值，越小越严格
24. known_faces (list): 已知人脸编码和对应用户信息的列表
25. """
26. self.model_type = model_type
27. self.tolerance = tolerance
28. self.known_faces = known_faces or []
29. logger.info(f"人脸检测器初始化完成，使用{model_type}模型，容差值为{tolerance}")
31. def load_known_faces(self, known_faces):
32. """
33. 加载已知人脸数据
35. 参数:
36. known_faces (list): 包含人脸编码和用户信息的列表
37. """
38. self.known_faces = known_faces
39. logger.info(f"已加载{len(known_faces)}个已知人脸")
41. def detect_faces(self, image):
42. """
43. 检测图像中的人脸位置
45. 参数:
46. image: 图像数据，可以是文件路径或图像数组
48. 返回:
49. list: 人脸位置列表，每个位置为(top, right, bottom, left)
50. """
51. # 如果是文件路径，加载图像
52. if isinstance(image, str):
53. if not os.path.exists(image):
54. logger.error(f"图像文件不存在: {image}")
55. return []
56. image = face_recognition.load_image_file(image)
58. # 检测人脸位置
59. start_time = time.time()
60. face_locations = face_recognition.face_locations(image, model=self.model_type)
61. detection_time = time.time() - start_time
63. logger.info(f"检测到{len(face_locations)}个人脸，耗时{detection_time:.4f}秒")
64. return face_locations
66. def encode_faces(self, image, face_locations=None):
67. """
68. 提取图像中人脸的编码特征
70. 参数:
71. image: 图像数据，可以是文件路径或图像数组
72. face_locations: 可选，人脸位置列表
74. 返回:
75. list: 人脸编码特征列表
76. """
77. # 如果是文件路径，加载图像
78. if isinstance(image, str):
79. if not os.path.exists(image):
80. logger.error(f"图像文件不存在: {image}")
81. return []
82. image = face_recognition.load_image_file(image)
84. # 如果没有提供人脸位置，先检测人脸
85. if face_locations is None:
86. face_locations = self.detect_faces(image)
88. if not face_locations:
89. logger.warning("未检测到人脸，无法提取特征")
90. return []
92. # 提取人脸编码特征
93. start_time = time.time()
94. face_encodings = face_recognition.face_encodings(image, face_locations)
95. encoding_time = time.time() - start_time
97. logger.info(f"提取了{len(face_encodings)}个人脸特征，耗时{encoding_time:.4f}秒")
98. return face_encodings
100. def recognize_faces(self, face_encodings):
101. """
102. 识别人脸，匹配已知人脸
104. 参数:
105. face_encodings: 待识别的人脸编码特征列表
107. 返回:
108. list: 识别结果列表，每个结果为(user_info, confidence)或(None, 0)
109. """
110. if not self.known_faces:
111. logger.warning("没有已知人脸数据，无法进行识别")
112. return [(None, 0) for _ in face_encodings]
114. if not face_encodings:
115. logger.warning("没有提供人脸特征，无法进行识别")
116. return []
118. results = []
120. # 提取已知人脸的编码和用户信息
121. known_encodings = [face['encoding'] for face in self.known_faces]
123. for face_encoding in face_encodings:
124. # 计算与已知人脸的距离
125. face_distances = face_recognition.face_distance(known_encodings, face_encoding)
127. if len(face_distances) > 0:
128. # 找到最小距离及其索引
129. best_match_index = np.argmin(face_distances)
130. best_match_distance = face_distances[best_match_index]
132. # 计算置信度（1 - 距离）
133. confidence = 1 - best_match_distance
135. # 如果距离小于容差，认为匹配成功
136. if best_match_distance <= self.tolerance:
137. user_info = {
138. 'user_id': self.known_faces[best_match_index]['user_id'],
139. 'student_id': self.known_faces[best_match_index]['student_id'],
140. 'name': self.known_faces[best_match_index]['name']
141. }
142. results.append((user_info, confidence))
143. logger.info(f"识别到用户: {user_info['name']}，置信度: {confidence:.4f}")
144. else:
145. results.append((None, confidence))
146. logger.info(f"未能识别人脸，最佳匹配置信度: {confidence:.4f}，低于阈值")
147. else:
148. results.append((None, 0))
149. logger.warning("没有已知人脸数据进行比较")
151. return results
153. def process_image(self, image):
154. """
155. 处理图像，检测、编码并识别人脸
157. 参数:
158. image: 图像数据，可以是文件路径或图像数组
160. 返回:
161. tuple: (face_locations, recognition_results)
162. """
163. # 检测人脸
164. face_locations = self.detect_faces(image)
166. if not face_locations:
167. return [], []
169. # 提取人脸编码
170. face_encodings = self.encode_faces(image, face_locations)
172. # 识别人脸
173. recognition_results = self.recognize_faces(face_encodings)
175. return face_locations, recognition_results
177. def process_video_frame(self, frame):
178. """
179. 处理视频帧，检测、编码并识别人脸
181. 参数:
182. frame: 视频帧图像数组
184. 返回:
185. tuple: (face_locations, recognition_results)
186. """
187. # 将BGR格式转换为RGB格式（OpenCV使用BGR，face_recognition使用RGB）
188. rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
190. # 为提高性能，可以缩小图像
191. small_frame = cv2.resize(rgb_frame, (0, 0), fx=0.25, fy=0.25)
193. # 检测人脸
194. face_locations = self.detect_faces(small_frame)
196. # 调整人脸位置坐标到原始尺寸
197. original_face_locations = []
198. for top, right, bottom, left in face_locations:
199. original_face_locations.append(
200. (top * 4, right * 4, bottom * 4, left * 4)
201. )
203. if not original_face_locations:
204. return [], []
206. # 提取人脸编码（使用原始尺寸的图像）
207. face_encodings = self.encode_faces(rgb_frame, original_face_locations)
209. # 识别人脸
210. recognition_results = self.recognize_faces(face_encodings)
212. return original_face_locations, recognition_results
214. def draw_results(self, image, face_locations, recognition_results):
215. """
216. 在图像上绘制人脸检测和识别结果
218. 参数:
219. image: 图像数组
220. face_locations: 人脸位置列表
221. recognition_results: 识别结果列表
223. 返回:
224. image: 绘制结果后的图像
225. """
226. # 复制图像，避免修改原图
227. result_image = image.copy()
229. # 遍历每个人脸
230. for i, (top, right, bottom, left) in enumerate(face_locations):
231. if i < len(recognition_results):
232. user_info, confidence = recognition_results[i]
234. # 绘制人脸框
235. if user_info: # 识别成功
236. color = (0, 255, 0) # 绿色
237. else: # 识别失败
238. color = (0, 0, 255) # 红色
240. cv2.rectangle(result_image, (left, top), (right, bottom), color, 2)
242. # 绘制文本背景
243. cv2.rectangle(result_image, (left, bottom - 35), (right, bottom), color, cv2.FILLED)
245. # 绘制文本
246. if user_info:
247. text = f"{user_info['name']} ({confidence:.2f})"
248. else:
249. text = f"Unknown ({confidence:.2f})"
251. cv2.putText(result_image, text, (left + 6, bottom - 6), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (255, 255, 255), 1)
253. return result_image
255. @staticmethod
256. def save_face_image(image, face_location, output_path):
257. """
258. 保存人脸图像
260. 参数:
261. image: 图像数组
262. face_location: 人脸位置 (top, right, bottom, left)
263. output_path: 输出文件路径
265. 返回:
266. bool: 是否保存成功
267. """
268. try:
269. top, right, bottom, left = face_location
271. # 扩大人脸区域，包含更多背景
272. height, width = image.shape[:2]
273. margin = int((bottom - top) * 0.5) # 使用人脸高度的50%作为边距
275. # 确保不超出图像边界
276. top = max(0, top - margin)
277. bottom = min(height, bottom + margin)
278. left = max(0, left - margin)
279. right = min(width, right + margin)
281. # 裁剪人脸区域
282. face_image = image[top:bottom, left:right]
284. # 保存图像
285. cv2.imwrite(output_path, face_image)
286. logger.info(f"人脸图像已保存到: {output_path}")
287. return True
288. except Exception as e:
289. logger.error(f"保存人脸图像失败: {e}")
290. return False
293. def test_face_detector():
294. """测试人脸检测器功能"""
295. # 创建人脸检测器
296. detector = FaceDetector()
298. # 测试图像路径
299. test_image_path = "test_image.jpg"
301. # 检测人脸
302. face_locations = detector.detect_faces(test_image_path)
303. print(f"检测到 {len(face_locations)} 个人脸")
305. # 提取人脸编码
306. face_encodings = detector.encode_faces(test_image_path, face_locations)
307. print(f"提取了 {len(face_encodings)} 个人脸特征")
309. # 加载图像并绘制结果
310. image = cv2.imread(test_image_path)
311. result_image = detector.draw_results(image, face_locations, [(None, 0.5) for _ in face_locations])
313. # 显示结果
314. cv2.imshow("Face Detection Results", result_image)
315. cv2.waitKey(0)
316. cv2.destroyAllWindows()
319. if __name__ == "__main__":
320. test_face_detector()

复制代码

README.md

1. # 校园人脸识别考勤系统
3. 基于深度学习的校园人脸识别考勤系统，使用Python、Flask、OpenCV和face_recognition库开发。
5. ## 功能特点
7. - 用户管理：注册、登录、编辑和删除用户
8. - 人脸识别：通过摄像头或上传图片进行人脸识别
9. - 考勤管理：记录和查询考勤信息
10. - 课程管理：创建课程和管理课程考勤
11. - 权限控制：区分管理员和普通用户权限
13. ## 技术栈
15. - **后端**：Python、Flask
16. - **前端**：HTML、CSS、JavaScript、Bootstrap 5
17. - **数据库**：SQLite
18. - **人脸识别**：face_recognition、OpenCV
19. - **其他**：NumPy、Pickle
21. ## 安装指南
23. 1. 克隆仓库
24. ```bash
25. git clone https://github.com/yourusername/face-attendance-system.git
26. cd face-attendance-system

复制代码

2. 创建虚拟环境

1. python -m venv venv
2. source venv/bin/activate # Windows: venv\Scripts\activate

复制代码

3. 安装依赖

1. pip install -r requirements.txt

复制代码

4. 初始化数据库

1. python database/init_db.py

复制代码

5. 运行应用

1. python app.py

复制代码

6. 访问应用
   在浏览器中访问 http://localhost:5000

系统要求

• Python 3.7+
• 摄像头（用于人脸识别）
• 现代浏览器（Chrome、Firefox、Edge等）

默认管理员账户

• 学号：admin
• 密码：admin123

项目结构

1. face_attendance_system/
2. ├── app.py # 主应用入口
3. ├── face_detection.py # 人脸检测和识别模块
4. ├── requirements.txt # 项目依赖
5. ├── README.md # 项目说明
6. ├── database/ # 数据库相关
7. │ ├── init_db.py # 数据库初始化
8. │ ├── migrate.py # 数据库迁移
9. │ └── models.py # 数据模型
10. ├── static/ # 静态资源
11. │ ├── css/ # CSS样式
12. │ ├── js/ # JavaScript脚本
13. │ └── uploads/ # 上传文件存储
14. │ └── faces/ # 人脸图像存储
15. └── templates/ # HTML模板
16. ├── base.html # 基础模板
17. ├── login.html # 登录页面
18. ├── register.html # 注册页面
19. ├── user_management.html # 用户管理页面
20. ├── edit_user.html # 编辑用户页面
21. ├── face_registration_admin.html # 管理员人脸注册页面
22. ├── webcam_registration.html # 摄像头人脸注册页面
23. └── face_recognition_attendance.html # 人脸识别考勤页面

复制代码

许可证

MIT License

2. ### requirements.txt
4. ```text/plain
5. Flask==2.0.1
6. Werkzeug==2.0.1
7. Jinja2==3.0.1
8. itsdangerous==2.0.1
9. MarkupSafe==2.0.1
10. numpy==1.21.0
11. opencv-python==4.5.3.56
12. face-recognition==1.3.0
13. face-recognition-models==0.3.0
14. dlib==19.22.1
15. Pillow==8.3.1

复制代码

database\db_setup.py

1. import sqlite3
2. import os
4. # Database directory
5. DB_DIR = os.path.dirname(os.path.abspath(__file__))
6. DB_PATH = os.path.join(DB_DIR, 'attendance.db')
8. def init_database():
9. """Initialize the database with necessary tables"""
10. conn = sqlite3.connect(DB_PATH)
11. cursor = conn.cursor()
13. # Create users table
14. cursor.execute('''
15. CREATE TABLE IF NOT EXISTS users (
16. id INTEGER PRIMARY KEY AUTOINCREMENT,
17. student_id TEXT UNIQUE NOT NULL,
18. name TEXT NOT NULL,
19. email TEXT UNIQUE,
20. password TEXT NOT NULL,
21. registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
22. )
23. ''')
25. # Create face_encodings table
26. cursor.execute('''
27. CREATE TABLE IF NOT EXISTS face_encodings (
28. id INTEGER PRIMARY KEY AUTOINCREMENT,
29. user_id INTEGER NOT NULL,
30. encoding BLOB NOT NULL,
31. created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
32. FOREIGN KEY (user_id) REFERENCES users (id)
33. )
34. ''')
36. # Create attendance table
37. cursor.execute('''
38. CREATE TABLE IF NOT EXISTS attendance (
39. id INTEGER PRIMARY KEY AUTOINCREMENT,
40. user_id INTEGER NOT NULL,
41. check_in_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
42. check_out_time TIMESTAMP,
43. date TEXT,
44. FOREIGN KEY (user_id) REFERENCES users (id)
45. )
46. ''')
48. conn.commit()
49. conn.close()
51. print("Database initialized successfully!")
53. if __name__ == "__main__":
54. init_database()

复制代码

database\init_db.py

1. import sqlite3
2. import os
4. # Database path
5. DB_DIR = os.path.dirname(os.path.abspath(__file__))
6. DB_PATH = os.path.join(DB_DIR, 'attendance.db')
8. def init_database():
9. """Initialize database with required tables"""
10. print("Initializing database...")
12. # Connect to database
13. conn = sqlite3.connect(DB_PATH)
14. cursor = conn.cursor()
16. try:
17. # Create users table
18. cursor.execute('''
19. CREATE TABLE IF NOT EXISTS users (
20. id INTEGER PRIMARY KEY AUTOINCREMENT,
21. student_id TEXT UNIQUE NOT NULL,
22. name TEXT NOT NULL,
23. email TEXT NOT NULL,
24. password TEXT NOT NULL,
25. registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
26. role TEXT DEFAULT 'student',
27. is_active INTEGER DEFAULT 1
28. )
29. ''')
31. # Create face_encodings table
32. cursor.execute('''
33. CREATE TABLE IF NOT EXISTS face_encodings (
34. id INTEGER PRIMARY KEY AUTOINCREMENT,
35. user_id INTEGER NOT NULL,
36. encoding BLOB NOT NULL,
37. created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
38. FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
39. )
40. ''')
42. # Create attendance table
43. cursor.execute('''
44. CREATE TABLE IF NOT EXISTS attendance (
45. id INTEGER PRIMARY KEY AUTOINCREMENT,
46. user_id INTEGER NOT NULL,
47. check_in_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
48. check_out_time TIMESTAMP,
49. status TEXT DEFAULT 'present',
50. FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
51. )
52. ''')
54. # Create courses table
55. cursor.execute('''
56. CREATE TABLE IF NOT EXISTS courses (
57. id INTEGER PRIMARY KEY AUTOINCREMENT,
58. course_code TEXT UNIQUE NOT NULL,
59. course_name TEXT NOT NULL,
60. instructor TEXT NOT NULL,
61. schedule TEXT,
62. created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
63. )
64. ''')
66. # Create course_enrollments table
67. cursor.execute('''
68. CREATE TABLE IF NOT EXISTS course_enrollments (
69. id INTEGER PRIMARY KEY AUTOINCREMENT,
70. course_id INTEGER NOT NULL,
71. user_id INTEGER NOT NULL,
72. enrollment_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
73. FOREIGN KEY (course_id) REFERENCES courses (id) ON DELETE CASCADE,
74. FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE,
75. UNIQUE(course_id, user_id)
76. )
77. ''')
79. # Create course_attendance table
80. cursor.execute('''
81. CREATE TABLE IF NOT EXISTS course_attendance (
82. id INTEGER PRIMARY KEY AUTOINCREMENT,
83. course_id INTEGER NOT NULL,
84. user_id INTEGER NOT NULL,
85. attendance_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
86. status TEXT DEFAULT 'present',
87. FOREIGN KEY (course_id) REFERENCES courses (id) ON DELETE CASCADE,
88. FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
89. )
90. ''')
92. # Create admin user if not exists
93. cursor.execute("SELECT id FROM users WHERE role = 'admin' LIMIT 1")
94. if not cursor.fetchone():
95. import hashlib
96. admin_password = hashlib.sha256('admin123'.encode()).hexdigest()
97. cursor.execute('''
98. INSERT INTO users (student_id, name, email, password, role)
99. VALUES (?, ?, ?, ?, ?)
100. ''', ('admin', 'System Administrator', 'admin@example.com', admin_password, 'admin'))
101. print("Created default admin user (student_id: admin, password: admin123)")
103. conn.commit()
104. print("Database initialized successfully.")
106. except Exception as e:
107. print(f"Error during initialization: {e}")
108. conn.rollback()
110. finally:
111. conn.close()
113. if __name__ == '__main__':
114. init_database()

复制代码

database\migrate.py

1. import sqlite3
2. import os
3. import sys
5. # Database path
6. DB_DIR = os.path.dirname(os.path.abspath(__file__))
7. DB_PATH = os.path.join(DB_DIR, 'attendance.db')
9. def check_column_exists(cursor, table_name, column_name):
10. """Check if a column exists in a table"""
11. cursor.execute(f"PRAGMA table_info({table_name})")
12. columns = cursor.fetchall()
13. for column in columns:
14. if column[1] == column_name:
15. return True
16. return False
18. def migrate_database():
19. """Migrate database to latest schema"""
20. print("Starting database migration...")
22. # Connect to database
23. conn = sqlite3.connect(DB_PATH)
24. cursor = conn.cursor()
26. try:
27. # Check if database exists
28. cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='users'")
29. if not cursor.fetchone():
30. print("Database not initialized. Please run init_db.py first.")
31. conn.close()
32. sys.exit(1)
34. # Add role column to users table if it doesn't exist
35. if not check_column_exists(cursor, 'users', 'role'):
36. print("Adding 'role' column to users table...")
37. cursor.execute("ALTER TABLE users ADD COLUMN role TEXT DEFAULT 'student'")
38. conn.commit()
39. print("Added 'role' column to users table.")
41. # Add is_active column to users table if it doesn't exist
42. if not check_column_exists(cursor, 'users', 'is_active'):
43. print("Adding 'is_active' column to users table...")
44. cursor.execute("ALTER TABLE users ADD COLUMN is_active INTEGER DEFAULT 1")
45. conn.commit()
46. print("Added 'is_active' column to users table.")
48. # Check if face_encodings table has the correct schema
49. cursor.execute("PRAGMA table_info(face_encodings)")
50. columns = cursor.fetchall()
51. encoding_column_type = None
52. for column in columns:
53. if column[1] == 'encoding':
54. encoding_column_type = column[2]
55. break
57. # If encoding column is not BLOB, we need to recreate the table
58. if encoding_column_type != 'BLOB':
59. print("Updating face_encodings table schema...")
61. # Create a backup of the face_encodings table
62. cursor.execute("CREATE TABLE IF NOT EXISTS face_encodings_backup AS SELECT * FROM face_encodings")
64. # Drop the original table
65. cursor.execute("DROP TABLE face_encodings")
67. # Create the table with the correct schema
68. cursor.execute('''
69. CREATE TABLE face_encodings (
70. id INTEGER PRIMARY KEY AUTOINCREMENT,
71. user_id INTEGER NOT NULL,
72. encoding BLOB NOT NULL,
73. created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
74. FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE
75. )
76. ''')
78. # Note: We can't restore the data because the encoding format has changed
79. # from numpy array bytes to pickle serialized data
81. print("Updated face_encodings table schema. Note: Previous face encodings have been backed up but not restored.")
82. print("Users will need to re-register their faces.")
84. print("Database migration completed successfully.")
86. except Exception as e:
87. print(f"Error during migration: {e}")
88. conn.rollback()
90. finally:
91. conn.close()
93. if __name__ == '__main__':
94. migrate_database()

复制代码

database\models.py

1. import sqlite3
2. import os
3. import numpy as np
4. import hashlib
5. import pickle
6. from datetime import datetime
8. # Database path
9. DB_DIR = os.path.dirname(os.path.abspath(__file__))
10. DB_PATH = os.path.join(DB_DIR, 'attendance.db')
12. class User:
13. """User model for handling user-related database operations"""
15. @staticmethod
16. def create_user(student_id, name, email, password):
17. """Create a new user"""
18. conn = sqlite3.connect(DB_PATH)
19. cursor = conn.cursor()
21. # Hash the password
22. hashed_password = hashlib.sha256(password.encode()).hexdigest()
24. try:
25. cursor.execute('''
26. INSERT INTO users (student_id, name, email, password)
27. VALUES (?, ?, ?, ?)
28. ''', (student_id, name, email, hashed_password))
30. conn.commit()
31. user_id = cursor.lastrowid
32. conn.close()
34. return user_id
35. except sqlite3.IntegrityError:
36. conn.close()
37. return None
39. @staticmethod
40. def get_user_by_id(user_id):
41. """Get user by ID"""
42. conn = sqlite3.connect(DB_PATH)
43. cursor = conn.cursor()
45. cursor.execute('''
46. SELECT id, student_id, name, email, registration_date, role, is_active
47. FROM users
48. WHERE id = ?
49. ''', (user_id,))
51. user = cursor.fetchone()
52. conn.close()
54. if user:
55. return {
56. 'id': user[0],
57. 'student_id': user[1],
58. 'name': user[2],
59. 'email': user[3],
60. 'registration_date': user[4],
61. 'role': user[5] if len(user) > 5 else 'student',
62. 'is_active': bool(user[6]) if len(user) > 6 else True
63. }
64. return None
66. @staticmethod
67. def get_user_by_student_id(student_id):
68. """Get user by student ID"""
69. conn = sqlite3.connect(DB_PATH)
70. cursor = conn.cursor()
72. cursor.execute('''
73. SELECT id, student_id, name, email, registration_date, role, is_active
74. FROM users
75. WHERE student_id = ?
76. ''', (student_id,))
78. user = cursor.fetchone()
79. conn.close()
81. if user:
82. return {
83. 'id': user[0],
84. 'student_id': user[1],
85. 'name': user[2],
86. 'email': user[3],
87. 'registration_date': user[4],
88. 'role': user[5] if len(user) > 5 else 'student',
89. 'is_active': bool(user[6]) if len(user) > 6 else True
90. }
91. return None
93. @staticmethod
94. def authenticate(student_id, password):
95. """Authenticate a user"""
96. conn = sqlite3.connect(DB_PATH)
97. cursor = conn.cursor()
99. # Hash the password
100. hashed_password = hashlib.sha256(password.encode()).hexdigest()
102. cursor.execute('''
103. SELECT id, student_id, name, email, registration_date, role, is_active
104. FROM users
105. WHERE student_id = ? AND password = ?
106. ''', (student_id, hashed_password))
108. user = cursor.fetchone()
109. conn.close()
111. if user:
112. return {
113. 'id': user[0],
114. 'student_id': user[1],
115. 'name': user[2],
116. 'email': user[3],
117. 'registration_date': user[4],
118. 'role': user[5] if len(user) > 5 else 'student',
119. 'is_active': bool(user[6]) if len(user) > 6 else True
120. }
121. return None
123. @staticmethod
124. def get_all_users(page=1, per_page=10):
125. """Get all users"""
126. conn = sqlite3.connect(DB_PATH)
127. cursor = conn.cursor()
129. offset = (page - 1) * per_page
130. cursor.execute('''
131. SELECT id, student_id, name, email, registration_date, role, is_active
132. FROM users
133. ORDER BY id DESC
134. LIMIT ? OFFSET ?
135. ''', (per_page, offset))
137. users = cursor.fetchall()
138. conn.close()
140. result = []
141. for user in users:
142. result.append({
143. 'id': user[0],
144. 'student_id': user[1],
145. 'name': user[2],
146. 'email': user[3],
147. 'registration_date': user[4],
148. 'role': user[5] if len(user) > 5 else 'student',
149. 'is_active': bool(user[6]) if len(user) > 6 else True
150. })
152. return result
154. @staticmethod
155. def count_all_users():
156. """Count all users"""
157. conn = sqlite3.connect(DB_PATH)
158. cursor = conn.cursor()
160. cursor.execute('''
161. SELECT COUNT(*)
162. FROM users
163. ''')
165. count = cursor.fetchone()[0]
166. conn.close()
168. return count
170. @staticmethod
171. def search_users(query, page=1, per_page=10):
172. """Search users"""
173. conn = sqlite3.connect(DB_PATH)
174. cursor = conn.cursor()
176. offset = (page - 1) * per_page
177. search_query = f"%{query}%"
178. cursor.execute('''
179. SELECT id, student_id, name, email, registration_date, role, is_active
180. FROM users
181. WHERE student_id LIKE ? OR name LIKE ?
182. ORDER BY id DESC
183. LIMIT ? OFFSET ?
184. ''', (search_query, search_query, per_page, offset))
186. users = cursor.fetchall()
187. conn.close()
189. result = []
190. for user in users:
191. result.append({
192. 'id': user[0],
193. 'student_id': user[1],
194. 'name': user[2],
195. 'email': user[3],
196. 'registration_date': user[4],
197. 'role': user[5] if len(user) > 5 else 'student',
198. 'is_active': bool(user[6]) if len(user) > 6 else True
199. })
201. return result
203. @staticmethod
204. def count_search_results(query):
205. """Count search results"""
206. conn = sqlite3.connect(DB_PATH)
207. cursor = conn.cursor()
209. search_query = f"%{query}%"
210. cursor.execute('''
211. SELECT COUNT(*)
212. FROM users
213. WHERE student_id LIKE ? OR name LIKE ?
214. ''', (search_query, search_query))
216. count = cursor.fetchone()[0]
217. conn.close()
219. return count
221. @staticmethod
222. def update_user(user_id, student_id, name, email, password=None, role='student', is_active=True):
223. """Update user"""
224. conn = sqlite3.connect(DB_PATH)
225. cursor = conn.cursor()
227. try:
228. if password:
229. hashed_password = hashlib.sha256(password.encode()).hexdigest()
230. cursor.execute('''
231. UPDATE users
232. SET student_id = ?, name = ?, email = ?, password = ?, role = ?, is_active = ?
233. WHERE id = ?
234. ''', (student_id, name, email, hashed_password, role, is_active, user_id))
235. else:
236. cursor.execute('''
237. UPDATE users
238. SET student_id = ?, name = ?, email = ?, role = ?, is_active = ?
239. WHERE id = ?
240. ''', (student_id, name, email, role, is_active, user_id))
242. conn.commit()
243. return True
244. except Exception as e:
245. print(f"Error updating user: {e}")
246. return False
248. @staticmethod
249. def delete_user(user_id):
250. """Delete user"""
251. conn = sqlite3.connect(DB_PATH)
252. cursor = conn.cursor()
254. try:
255. # Delete user's face encodings
256. cursor.execute('''
257. DELETE FROM face_encodings
258. WHERE user_id = ?
259. ''', (user_id,))
261. # Delete user's attendance records
262. cursor.execute('''
263. DELETE FROM attendance
264. WHERE user_id = ?
265. ''', (user_id,))
267. # Delete user
268. cursor.execute('''
269. DELETE FROM users
270. WHERE id = ?
271. ''', (user_id,))
273. conn.commit()
274. return True
275. except Exception as e:
276. print(f"Error deleting user: {e}")
277. return False
279. class FaceEncoding:
280. """Face encoding model for handling face-related database operations"""
282. @staticmethod
283. def save_face_encoding(user_id, face_encoding):
284. """Save a face encoding for a user"""
285. conn = sqlite3.connect(DB_PATH)
286. cursor = conn.cursor()
288. # Convert numpy array to bytes for storage
289. encoding_bytes = pickle.dumps(face_encoding)
291. cursor.execute('''
292. INSERT INTO face_encodings (user_id, encoding)
293. VALUES (?, ?)
294. ''', (user_id, encoding_bytes))
296. conn.commit()
297. encoding_id = cursor.lastrowid
298. conn.close()
300. return encoding_id
302. @staticmethod
303. def get_face_encodings_by_user_id(user_id):
304. """Get face encodings for a specific user"""
305. conn = sqlite3.connect(DB_PATH)
306. cursor = conn.cursor()
308. cursor.execute('''
309. SELECT id, user_id, encoding
310. FROM face_encodings
311. WHERE user_id = ?
312. ''', (user_id,))
314. encodings = cursor.fetchall()
315. conn.close()
317. result = []
318. for encoding in encodings:
319. # Convert bytes back to numpy array
320. face_encoding = pickle.loads(encoding[2])
321. result.append({
322. 'id': encoding[0],
323. 'user_id': encoding[1],
324. 'encoding': face_encoding
325. })
327. return result
329. @staticmethod
330. def get_all_face_encodings():
331. """Get all face encodings with user information"""
332. conn = sqlite3.connect(DB_PATH)
333. cursor = conn.cursor()
335. cursor.execute('''
336. SELECT f.id, f.user_id, f.encoding, u.student_id, u.name
337. FROM face_encodings f
338. JOIN users u ON f.user_id = u.id
339. ''')
341. encodings = cursor.fetchall()
342. conn.close()
344. result = []
345. for encoding in encodings:
346. # Convert bytes back to numpy array
347. face_encoding = pickle.loads(encoding[2])
348. result.append({
349. 'id': encoding[0],
350. 'user_id': encoding[1],
351. 'encoding': face_encoding,
352. 'student_id': encoding[3],
353. 'name': encoding[4]
354. })
356. return result
358. @staticmethod
359. def delete_face_encodings_by_user_id(user_id):
360. """Delete face encodings for a specific user"""
361. conn = sqlite3.connect(DB_PATH)
362. cursor = conn.cursor()
364. try:
365. cursor.execute('''
366. DELETE FROM face_encodings
367. WHERE user_id = ?
368. ''', (user_id,))
370. conn.commit()
371. return True
372. except Exception as e:
373. print(f"Error deleting face encodings: {e}")
374. return False
376. class Attendance:
377. """Attendance model for handling attendance-related database operations"""
379. @staticmethod
380. def record_check_in(user_id):
381. """Record attendance check-in"""
382. conn = sqlite3.connect(DB_PATH)
383. cursor = conn.cursor()
385. today = datetime.now().strftime('%Y-%m-%d')
387. # Check if user already checked in today
388. cursor.execute('''
389. SELECT id FROM attendance
390. WHERE user_id = ? AND date = ? AND check_out_time IS NULL
391. ''', (user_id, today))
393. existing = cursor.fetchone()
395. if existing:
396. conn.close()
397. return False
399. cursor.execute('''
400. INSERT INTO attendance (user_id, date)
401. VALUES (?, ?)
402. ''', (user_id, today))
404. conn.commit()
405. attendance_id = cursor.lastrowid
406. conn.close()
408. return attendance_id
410. @staticmethod
411. def record_check_out(user_id):
412. """Record attendance check-out"""
413. conn = sqlite3.connect(DB_PATH)
414. cursor = conn.cursor()
416. today = datetime.now().strftime('%Y-%m-%d')
417. now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
419. cursor.execute('''
420. UPDATE attendance
421. SET check_out_time = ?
422. WHERE user_id = ? AND date = ? AND check_out_time IS NULL
423. ''', (now, user_id, today))
425. affected = cursor.rowcount
426. conn.commit()
427. conn.close()
429. return affected > 0
431. @staticmethod
432. def get_attendance_by_date(date):
433. """Get attendance records for a specific date"""
434. conn = sqlite3.connect(DB_PATH)
435. cursor = conn.cursor()
437. cursor.execute('''
438. SELECT a.id, a.user_id, u.student_id, u.name, a.check_in_time, a.check_out_time
439. FROM attendance a
440. JOIN users u ON a.user_id = u.id
441. WHERE a.date = ?
442. ORDER BY a.check_in_time DESC
443. ''', (date,))
445. records = cursor.fetchall()
446. conn.close()
448. result = []
449. for record in records:
450. result.append({
451. 'id': record[0],
452. 'user_id': record[1],
453. 'student_id': record[2],
454. 'name': record[3],
455. 'check_in_time': record[4],
456. 'check_out_time': record[5]
457. })
459. return result
461. @staticmethod
462. def get_attendance_by_user(user_id):
463. """Get attendance records for a specific user"""
464. conn = sqlite3.connect(DB_PATH)
465. cursor = conn.cursor()
467. cursor.execute('''
468. SELECT id, date, check_in_time, check_out_time
469. FROM attendance
470. WHERE user_id = ?
471. ORDER BY date DESC, check_in_time DESC
472. ''', (user_id,))
474. records = cursor.fetchall()
475. conn.close()
477. result = []
478. for record in records:
479. result.append({
480. 'id': record[0],
481. 'date': record[1],
482. 'check_in_time': record[2],
483. 'check_out_time': record[3]
484. })
486. return result
488. @staticmethod
489. def get_today_attendance(user_id):
490. """Get user's attendance for today"""
491. conn = sqlite3.connect(DB_PATH)
492. cursor = conn.cursor()
494. # Get today's date (format: YYYY-MM-DD)
495. today = datetime.now().strftime('%Y-%m-%d')
497. cursor.execute('''
498. SELECT id, user_id, check_in_time, check_out_time, status
499. FROM attendance
500. WHERE user_id = ? AND date(check_in_time) = ?
501. ''', (user_id, today))
503. attendance = cursor.fetchone()
504. conn.close()
506. if attendance:
507. return {
508. 'id': attendance[0],
509. 'user_id': attendance[1],
510. 'check_in_time': attendance[2],
511. 'check_out_time': attendance[3],
512. 'status': attendance[4]
513. }
514. return None
516. @staticmethod
517. def get_recent_attendance(limit=10):
518. """Get recent attendance records"""
519. conn = sqlite3.connect(DB_PATH)
520. cursor = conn.cursor()
522. cursor.execute('''
523. SELECT a.id, a.user_id, a.check_in_time, a.status, u.student_id, u.name
524. FROM attendance a
525. JOIN users u ON a.user_id = u.id
526. ORDER BY a.check_in_time DESC
527. LIMIT ?
528. ''', (limit,))
530. attendances = cursor.fetchall()
531. conn.close()
533. result = []
534. for attendance in attendances:
535. result.append({
536. 'id': attendance[0],
537. 'user_id': attendance[1],
538. 'check_in_time': attendance[2],
539. 'status': attendance[3],
540. 'student_id': attendance[4],
541. 'name': attendance[5]
542. })
544. return result

复制代码

static\css\style.css

1. /* 全局样式 */
2. body {
3. background-color: #f8f9fa;
4. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5. }
7. /* 导航栏样式 */
8. .navbar {
9. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
10. }
12. .navbar-brand {
13. font-weight: 600;
14. }
16. /* 卡片样式 */
17. .card {
18. border: none;
19. border-radius: 10px;
20. overflow: hidden;
21. margin-bottom: 20px;
22. transition: transform 0.3s, box-shadow 0.3s;
23. }
25. .card:hover {
26. transform: translateY(-5px);
27. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
28. }
30. .card-header {
31. font-weight: 600;
32. border-bottom: none;
33. }
35. /* 按钮样式 */
36. .btn {
37. border-radius: 5px;
38. font-weight: 500;
39. padding: 8px 16px;
40. transition: all 0.3s;
41. }
43. .btn-primary {
44. background-color: #4e73df;
45. border-color: #4e73df;
46. }
48. .btn-primary:hover {
49. background-color: #2e59d9;
50. border-color: #2e59d9;
51. }
53. .btn-success {
54. background-color: #1cc88a;
55. border-color: #1cc88a;
56. }
58. .btn-success:hover {
59. background-color: #17a673;
60. border-color: #17a673;
61. }
63. .btn-info {
64. background-color: #36b9cc;
65. border-color: #36b9cc;
66. }
68. .btn-info:hover {
69. background-color: #2c9faf;
70. border-color: #2c9faf;
71. }
73. /* 表单样式 */
74. .form-control {
75. border-radius: 5px;
76. padding: 10px 15px;
77. border: 1px solid #d1d3e2;
78. }
80. .form-control:focus {
81. border-color: #4e73df;
82. box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
83. }
85. .input-group-text {
86. background-color: #f8f9fc;
87. border: 1px solid #d1d3e2;
88. }
90. /* 摄像头容器 */
91. #camera-container, #captured-container {
92. position: relative;
93. width: 100%;
94. max-width: 640px;
95. margin: 0 auto;
96. border-radius: 10px;
97. overflow: hidden;
98. }
100. #webcam, #captured-image {
101. width: 100%;
102. height: auto;
103. border-radius: 10px;
104. }
106. /* 考勤信息样式 */
107. #attendance-info, #recognition-result {
108. transition: all 0.3s ease;
109. }
111. /* 动画效果 */
112. .fade-in {
113. animation: fadeIn 0.5s;
114. }
116. @keyframes fadeIn {
117. from { opacity: 0; }
118. to { opacity: 1; }
119. }
121. /* 响应式调整 */
122. @media (max-width: 768px) {
123. .card-body {
124. padding: 1rem;
125. }
127. .btn {
128. padding: 6px 12px;
129. }
130. }
132. /* 页脚样式 */
133. footer {
134. margin-top: 3rem;
135. padding: 1.5rem 0;
136. color: #6c757d;
137. border-top: 1px solid #e3e6f0;
138. }

复制代码

static\js\main.js

1. // 全局工具函数
3. // 格式化日期时间
4. function formatDateTime(dateString) {
5. const date = new Date(dateString);
6. return date.toLocaleString();
7. }
9. // 格式化日期
10. function formatDate(dateString) {
11. const date = new Date(dateString);
12. return date.toLocaleDateString();
13. }
15. // 格式化时间
16. function formatTime(dateString) {
17. const date = new Date(dateString);
18. return date.toLocaleTimeString();
19. }
21. // 显示加载中状态
22. function showLoading(element, message = '加载中...') {
23. element.innerHTML = `
24. <div class="text-center py-4">
25. <div class="spinner-border text-primary" role="status">
26. <span class="visually-hidden">Loading...</span>
27. </div>
28. <p class="mt-2">${message}</p>
29. </div>
30. `;
31. }
33. // 显示错误消息
34. function showError(element, message) {
35. element.innerHTML = `
36. <div class="alert alert-danger" role="alert">
37. <i class="fas fa-exclamation-circle me-2"></i>${message}
38. </div>
39. `;
40. }
42. // 显示成功消息
43. function showSuccess(element, message) {
44. element.innerHTML = `
45. <div class="alert alert-success" role="alert">
46. <i class="fas fa-check-circle me-2"></i>${message}
47. </div>
48. `;
49. }
51. // 显示警告消息
52. function showWarning(element, message) {
53. element.innerHTML = `
54. <div class="alert alert-warning" role="alert">
55. <i class="fas fa-exclamation-triangle me-2"></i>${message}
56. </div>
57. `;
58. }
60. // 显示信息消息
61. function showInfo(element, message) {
62. element.innerHTML = `
63. <div class="alert alert-info" role="alert">
64. <i class="fas fa-info-circle me-2"></i>${message}
65. </div>
66. `;
67. }
69. // 复制文本到剪贴板
70. function copyToClipboard(text) {
71. const textarea = document.createElement('textarea');
72. textarea.value = text;
73. document.body.appendChild(textarea);
74. textarea.select();
75. document.execCommand('copy');
76. document.body.removeChild(textarea);
77. }
79. // 防抖函数
80. function debounce(func, wait) {
81. let timeout;
82. return function(...args) {
83. const context = this;
84. clearTimeout(timeout);
85. timeout = setTimeout(() => func.apply(context, args), wait);
86. };
87. }
89. // 节流函数
90. function throttle(func, limit) {
91. let inThrottle;
92. return function(...args) {
93. const context = this;
94. if (!inThrottle) {
95. func.apply(context, args);
96. inThrottle = true;
97. setTimeout(() => inThrottle = false, limit);
98. }
99. };
100. }
102. // 文档就绪事件
103. document.addEventListener('DOMContentLoaded', function() {
104. // 初始化工具提示
105. const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
106. tooltipTriggerList.map(function(tooltipTriggerEl) {
107. return new bootstrap.Tooltip(tooltipTriggerEl);
108. });
110. // 初始化弹出框
111. const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
112. popoverTriggerList.map(function(popoverTriggerEl) {
113. return new bootstrap.Popover(popoverTriggerEl);
114. });
116. // 处理闪现消息自动消失
117. const flashMessages = document.querySelectorAll('.alert-dismissible');
118. flashMessages.forEach(function(message) {
119. setTimeout(function() {
120. const alert = bootstrap.Alert.getInstance(message);
121. if (alert) {
122. alert.close();
123. } else {
124. message.classList.add('fade');
125. setTimeout(() => message.remove(), 500);
126. }
127. }, 5000);
128. });
130. // 处理表单验证
131. const forms = document.querySelectorAll('.needs-validation');
132. Array.from(forms).forEach(function(form) {
133. form.addEventListener('submit', function(event) {
134. if (!form.checkValidity()) {
135. event.preventDefault();
136. event.stopPropagation();
137. }
138. form.classList.add('was-validated');
139. }, false);
140. });
142. // 处理返回顶部按钮
143. const backToTopButton = document.getElementById('back-to-top');
144. if (backToTopButton) {
145. window.addEventListener('scroll', function() {
146. if (window.pageYOffset > 300) {
147. backToTopButton.classList.add('show');
148. } else {
149. backToTopButton.classList.remove('show');
150. }
151. });
153. backToTopButton.addEventListener('click', function() {
154. window.scrollTo({
155. top: 0,
156. behavior: 'smooth'
157. });
158. });
159. }
161. // 处理侧边栏切换
162. const sidebarToggle = document.getElementById('sidebar-toggle');
163. if (sidebarToggle) {
164. sidebarToggle.addEventListener('click', function() {
165. document.body.classList.toggle('sidebar-collapsed');
166. localStorage.setItem('sidebar-collapsed', document.body.classList.contains('sidebar-collapsed'));
167. });
169. // 从本地存储恢复侧边栏状态
170. if (localStorage.getItem('sidebar-collapsed') === 'true') {
171. document.body.classList.add('sidebar-collapsed');
172. }
173. }
175. // 处理暗黑模式切换
176. const darkModeToggle = document.getElementById('dark-mode-toggle');
177. if (darkModeToggle) {
178. darkModeToggle.addEventListener('click', function() {
179. document.body.classList.toggle('dark-mode');
180. localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
181. });
183. // 从本地存储恢复暗黑模式状态
184. if (localStorage.getItem('dark-mode') === 'true') {
185. document.body.classList.add('dark-mode');
186. }
187. }
188. });

复制代码

templates\attendance.html

1. {% extends 'base.html' %}
3. {% block title %}考勤记录 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="card shadow">
7. <div class="card-header bg-primary text-white">
8. <h4 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>考勤记录</h4>
9. </div>
10. <div class="card-body">
11. <div class="row mb-4">
12. <div class="col-md-6">
13. <form method="GET" action="{{ url_for('attendance') }}" class="d-flex">
14. <input type="date" class="form-control me-2" name="date" value="{{ selected_date }}" required="">
15. <button type="submit" class="btn btn-primary">
16. <i class="fas fa-search me-1"></i>查询
17. </button>
18. </form>
19. </div>
20. <div class="col-md-6 text-md-end mt-3 mt-md-0">
21. <a href="{{ url_for('face_recognition_attendance') }}" class="btn btn-success">
22. <i class="fas fa-camera me-1"></i>人脸识别考勤
23. </a>
24. </div>
25. </div>
27. {% if attendance_records %}
28. <div class="table-responsive">
30. {% for record in attendance_records %}
32. {% endfor %}
33. <table class="table table-hover table-striped">
34. <thead class="table-light">
35. <tr>
36. <th>学号</th>
37. <th>姓名</th>
38. <th>签到时间</th>
39. <th>签退时间</th>
40. <th>状态</th>
41. <th>时长</th>
42. </tr>
43. </thead>
44. <tbody><tr>
45. <td>{{ record.student_id }}</td>
46. <td>{{ record.name }}</td>
47. <td>{{ record.check_in_time }}</td>
48. <td>{{ record.check_out_time if record.check_out_time else '未签退' }}</td>
49. <td>
50. {% if record.check_out_time %}
51. <span class="badge bg-success">已完成</span>
52. {% else %}
53. <span class="badge bg-warning">进行中</span>
54. {% endif %}
55. </td>
56. <td>
57. {% if record.check_out_time %}
58. {% set check_in = record.check_in_time.split(' ')[1] %}
59. {% set check_out = record.check_out_time.split(' ')[1] %}
60. {% set hours = (check_out.split(':')[0]|int - check_in.split(':')[0]|int) %}
61. {% set minutes = (check_out.split(':')[1]|int - check_in.split(':')[1]|int) %}
62. {% if minutes < 0 %}
63. {% set hours = hours - 1 %}
64. {% set minutes = minutes + 60 %}
65. {% endif %}
66. {{ hours }}小时{{ minutes }}分钟
67. {% else %}
68. -
69. {% endif %}
70. </td>
71. </tr></tbody>
72. </table>
73. </div>
75. <div class="row mt-4">
76. <div class="col-md-6">
77. <div class="card">
78. <div class="card-header bg-light">
79. <h5 class="mb-0">考勤统计</h5>
80. </div>
81. <div class="card-body">
82. <div class="row text-center">
83. <div class="col-4">
84. <div class="border-end">
85. <h3 class="text-primary">{{ attendance_records|length }}</h3>
86. <p class="text-muted">总人数</p>
87. </div>
88. </div>
89. <div class="col-4">
90. <div class="border-end">
91. <h3 class="text-success">
92. {% set completed = 0 %}
93. {% for record in attendance_records %}
94. {% if record.check_out_time %}
95. {% set completed = completed + 1 %}
96. {% endif %}
97. {% endfor %}
98. {{ completed }}
99. </h3>
100. <p class="text-muted">已完成</p>
101. </div>
102. </div>
103. <div class="col-4">
104. <h3 class="text-warning">
105. {% set in_progress = 0 %}
106. {% for record in attendance_records %}
107. {% if not record.check_out_time %}
108. {% set in_progress = in_progress + 1 %}
109. {% endif %}
110. {% endfor %}
111. {{ in_progress }}
112. </h3>
113. <p class="text-muted">进行中</p>
114. </div>
115. </div>
116. </div>
117. </div>
118. </div>
119. <div class="col-md-6 mt-3 mt-md-0">
120. <div class="card">
121. <div class="card-header bg-light">
122. <h5 class="mb-0">图表统计</h5>
123. </div>
124. <div class="card-body">
125. <canvas id="attendanceChart" width="100%" height="200"></canvas>
126. </div>
127. </div>
128. </div>
129. </div>
130. {% else %}
131. <div class="alert alert-info">
132. <i class="fas fa-info-circle me-2"></i>{{ selected_date }} 没有考勤记录
133. </div>
134. {% endif %}
135. </div>
136. <div class="card-footer">
137. <div class="row">
138. <div class="col-md-6">
139. <button class="btn btn-outline-primary" onclick="window.print()">
140. <i class="fas fa-print me-1"></i>打印记录
141. </button>
142. </div>
143. <div class="col-md-6 text-md-end mt-2 mt-md-0">
144. <a href="#" class="btn btn-outline-success" id="exportBtn">
145. <i class="fas fa-file-excel me-1"></i>导出Excel
146. </a>
147. </div>
148. </div>
149. </div>
150. </div>
151. {% endblock %}
153. {% block extra_js %}
154. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
155. <script>
156. // 考勤统计图表
157. {% if attendance_records %}
158. const ctx = document.getElementById('attendanceChart').getContext('2d');
160. // 计算已完成和进行中的数量
161. let completed = 0;
162. let inProgress = 0;
164. {% for record in attendance_records %}
165. {% if record.check_out_time %}
166. completed++;
167. {% else %}
168. inProgress++;
169. {% endif %}
170. {% endfor %}
172. const attendanceChart = new Chart(ctx, {
173. type: 'pie',
174. data: {
175. labels: ['已完成', '进行中'],
176. datasets: [{
177. data: [completed, inProgress],
178. backgroundColor: [
179. 'rgba(40, 167, 69, 0.7)',
180. 'rgba(255, 193, 7, 0.7)'
181. ],
182. borderColor: [
183. 'rgba(40, 167, 69, 1)',
184. 'rgba(255, 193, 7, 1)'
185. ],
186. borderWidth: 1
187. }]
188. },
189. options: {
190. responsive: true,
191. maintainAspectRatio: false,
192. plugins: {
193. legend: {
194. position: 'bottom'
195. }
196. }
197. }
198. });
199. {% endif %}
201. // 导出Excel功能
202. document.getElementById('exportBtn').addEventListener('click', function(e) {
203. e.preventDefault();
204. alert('导出功能将在完整版中提供');
205. });
206. </script>
207. {% endblock %}

复制代码

templates\base.html

4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>{% block title %}校园人脸识别考勤系统{% endblock %}</title>
7. <!-- Bootstrap CSS -->
8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9. <!-- Font Awesome -->
10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
11. <!-- Custom CSS -->
12. <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
13. {% block extra_css %}{% endblock %}
16. <!-- Navigation -->
17. <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
18. <div class="container">
19. <a class="navbar-brand" href="{{ url_for('index') }}">
20. <i class="fas fa-user-check me-2"></i>校园人脸识别考勤系统
21. </a>
22. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
23. <span class="navbar-toggler-icon"></span>
24. </button>
25. <div class="collapse navbar-collapse" id="navbarNav">
26. <ul class="navbar-nav ms-auto">
27. <li class="nav-item">
28. <a class="nav-link" href="{{ url_for('index') }}">首页</a>
29. </li>
30. {% if session.get('user_id') %}
31. <li class="nav-item">
32. <a class="nav-link" href="{{ url_for('dashboard') }}">控制面板</a>
33. </li>
34. <li class="nav-item">
35. <a class="nav-link" href="{{ url_for('face_recognition_attendance') }}">人脸识别考勤</a>
36. </li>
37. <li class="nav-item">
38. <a class="nav-link" href="{{ url_for('attendance') }}">考勤记录</a>
39. </li>
40. <li class="nav-item dropdown">
41. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
42. <i class="fas fa-user-circle me-1"></i>{{ session.get('name') }}
43. </a>
44. <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
45. <li><a class="dropdown-item" href="{{ url_for('dashboard') }}">个人信息</a></li>
46. <li><a class="dropdown-item" href="{{ url_for('face_registration') }}">人脸注册</a></li>
47. <li>
48. <hr class="dropdown-divider">
49. </li>
50. <li><a class="dropdown-item" href="{{ url_for('logout') }}">退出登录</a></li>
51. </ul>
52. </li>
53. {% else %}
54. <li class="nav-item">
55. <a class="nav-link" href="{{ url_for('login') }}">登录</a>
56. </li>
57. <li class="nav-item">
58. <a class="nav-link" href="{{ url_for('register') }}">注册</a>
59. </li>
60. {% endif %}
61. </ul>
62. </div>
63. </div>
64. </nav>
66. <!-- Flash Messages -->
67. <div class="container mt-3">
68. {% with messages = get_flashed_messages(with_categories=true) %}
69. {% if messages %}
70. {% for category, message in messages %}
71. <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
72. {{ message }}
73. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
74. </div>
75. {% endfor %}
76. {% endif %}
77. {% endwith %}
78. </div>
80. <!-- Main Content -->
81. <main class="container my-4">
82. {% block content %}{% endblock %}
83. </main>
85. <!-- Footer -->
86. <footer class="bg-light py-4 mt-5">
87. <div class="container text-center">
88. <p class="mb-0">© {{ now.year }} 校园人脸识别考勤系统 | 基于深度学习的智能考勤解决方案</p>
89. </div>
90. </footer>
92. <!-- Bootstrap JS Bundle with Popper -->
93. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
94. <!-- jQuery -->
95. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
96. <!-- Custom JS -->
97. <script src="{{ url_for('static', filename='js/main.js') }}"></script>
98. {% block extra_js %}{% endblock %}

复制代码

templates\dashboard.html

1. {% extends 'base.html' %}
3. {% block title %}控制面板 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row">
7. <div class="col-md-4">
8. <div class="card shadow mb-4">
9. <div class="card-header bg-primary text-white">
10. <h5 class="mb-0"><i class="fas fa-user me-2"></i>个人信息</h5>
11. </div>
12. <div class="card-body">
13. <div class="text-center mb-3">
14. {% if has_face_data %}
15. <div class="avatar-container mb-3">
16. <i class="fas fa-user-circle fa-6x text-primary"></i>
17. <span class="badge bg-success position-absolute bottom-0 end-0">
18. <i class="fas fa-check"></i>
19. </span>
20. </div>
21. <p class="text-success"><i class="fas fa-check-circle me-1"></i>人脸数据已注册</p>
22. {% else %}
23. <div class="avatar-container mb-3">
24. <i class="fas fa-user-circle fa-6x text-secondary"></i>
25. <span class="badge bg-warning position-absolute bottom-0 end-0">
26. <i class="fas fa-exclamation"></i>
27. </span>
28. </div>
29. <p class="text-warning"><i class="fas fa-exclamation-circle me-1"></i>尚未注册人脸数据</p>
30. <a href="{{ url_for('face_registration') }}" class="btn btn-primary btn-sm">
31. <i class="fas fa-camera me-1"></i>立即注册
32. </a>
33. {% endif %}
34. </div>
36. <table class="table">
37. <tbody>
38. <tr>
39. <th scope="row"><i class="fas fa-id-card me-2"></i>学号</th>
40. <td>{{ user.student_id }}</td>
41. </tr>
42. <tr>
43. <th scope="row"><i class="fas fa-user me-2"></i>姓名</th>
44. <td>{{ user.name }}</td>
45. </tr>
46. <tr>
47. <th scope="row"><i class="fas fa-envelope me-2"></i>邮箱</th>
48. <td>{{ user.email }}</td>
49. </tr>
50. <tr>
51. <th scope="row"><i class="fas fa-calendar-alt me-2"></i>注册日期</th>
52. <td>{{ user.registration_date }}</td>
53. </tr>
54. </tbody>
55. </table>
56. </div>
57. </div>
59. <div class="card shadow mb-4">
60. <div class="card-header bg-info text-white">
61. <h5 class="mb-0"><i class="fas fa-clock me-2"></i>快速考勤</h5>
62. </div>
63. <div class="card-body text-center">
64. <div class="row">
65. <div class="col-6">
66. <button id="check-in-btn" class="btn btn-success btn-lg w-100 mb-2">
67. <i class="fas fa-sign-in-alt me-2"></i>签到
68. </button>
69. </div>
70. <div class="col-6">
71. <button id="check-out-btn" class="btn btn-danger btn-lg w-100 mb-2">
72. <i class="fas fa-sign-out-alt me-2"></i>签退
73. </button>
74. </div>
75. </div>
76. <div id="attendance-status" class="mt-2"></div>
77. <div class="mt-3">
78. <a href="{{ url_for('face_recognition_attendance') }}" class="btn btn-primary w-100">
79. <i class="fas fa-camera me-2"></i>人脸识别考勤
80. </a>
81. </div>
82. </div>
83. </div>
84. </div>
86. <div class="col-md-8">
87. <div class="card shadow mb-4">
88. <div class="card-header bg-primary text-white">
89. <h5 class="mb-0"><i class="fas fa-history me-2"></i>考勤记录</h5>
90. </div>
91. <div class="card-body">
92. {% if attendance_records %}
93. <div class="table-responsive">
95. {% for record in attendance_records %}
97. {% endfor %}
98. <table class="table table-hover">
99. <thead>
100. <tr>
101. <th>日期</th>
102. <th>签到时间</th>
103. <th>签退时间</th>
104. <th>状态</th>
105. </tr>
106. </thead>
107. <tbody><tr>
108. <td>{{ record.date }}</td>
109. <td>{{ record.check_in_time }}</td>
110. <td>{{ record.check_out_time if record.check_out_time else '未签退' }}</td>
111. <td>
112. {% if record.check_out_time %}
113. <span class="badge bg-success">已完成</span>
114. {% else %}
115. <span class="badge bg-warning">进行中</span>
116. {% endif %}
117. </td>
118. </tr></tbody>
119. </table>
120. </div>
121. {% else %}
122. <div class="alert alert-info">
123. <i class="fas fa-info-circle me-2"></i>暂无考勤记录
124. </div>
125. {% endif %}
126. </div>
127. <div class="card-footer text-end">
128. <a href="{{ url_for('attendance') }}" class="btn btn-outline-primary btn-sm">
129. <i class="fas fa-list me-1"></i>查看全部记录
130. </a>
131. </div>
132. </div>
134. <div class="row">
135. <div class="col-md-6">
136. <div class="card shadow mb-4">
137. <div class="card-header bg-success text-white">
138. <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>本月统计</h5>
139. </div>
140. <div class="card-body">
141. <canvas id="monthlyChart" width="100%" height="200"></canvas>
142. </div>
143. </div>
144. </div>
145. <div class="col-md-6">
146. <div class="card shadow mb-4">
147. <div class="card-header bg-warning text-white">
148. <h5 class="mb-0"><i class="fas fa-bell me-2"></i>通知</h5>
149. </div>
150. <div class="card-body">
151. <div class="list-group">
152. <a href="#" class="list-group-item list-group-item-action">
153. <div class="d-flex w-100 justify-content-between">
154. <h6 class="mb-1">系统更新通知</h6>
155. <small>3天前</small>
156. </div>
157. <p class="mb-1">系统已更新到最新版本，新增人脸识别算法...</p>
158. </a>
159. <a href="#" class="list-group-item list-group-item-action">
160. <div class="d-flex w-100 justify-content-between">
161. <h6 class="mb-1">考勤规则变更</h6>
162. <small>1周前</small>
163. </div>
164. <p class="mb-1">根据学校规定，考勤时间调整为8:30-17:30...</p>
165. </a>
166. </div>
167. </div>
168. </div>
169. </div>
170. </div>
171. </div>
172. </div>
173. {% endblock %}
175. {% block extra_css %}
176. <style>
177. .avatar-container {
178. position: relative;
179. display: inline-block;
180. }
182. .avatar-container .badge {
183. width: 25px;
184. height: 25px;
185. border-radius: 50%;
186. display: flex;
187. align-items: center;
188. justify-content: center;
189. }
190. </style>
191. {% endblock %}
193. {% block extra_js %}
194. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
195. <script>
196. // 考勤按钮功能
197. document.getElementById('check-in-btn').addEventListener('click', function() {
198. const statusDiv = document.getElementById('attendance-status');
199. statusDiv.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div> 处理中...';
201. fetch('{{ url_for("process_check_in") }}', {
202. method: 'POST',
203. headers: {
204. 'Content-Type': 'application/json',
205. }
206. })
207. .then(response => response.json())
208. .then(data => {
209. if (data.success) {
210. statusDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
211. setTimeout(() => {
212. window.location.reload();
213. }, 2000);
214. } else {
215. statusDiv.innerHTML = '<div class="alert alert-warning">' + data.message + '</div>';
216. }
217. })
218. .catch(error => {
219. console.error('Error:', error);
220. statusDiv.innerHTML = '<div class="alert alert-danger">服务器错误，请稍后重试</div>';
221. });
222. });
224. document.getElementById('check-out-btn').addEventListener('click', function() {
225. const statusDiv = document.getElementById('attendance-status');
226. statusDiv.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div> 处理中...';
228. fetch('{{ url_for("check_out") }}', {
229. method: 'POST',
230. headers: {
231. 'Content-Type': 'application/json',
232. }
233. })
234. .then(response => response.json())
235. .then(data => {
236. if (data.success) {
237. statusDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
238. setTimeout(() => {
239. window.location.reload();
240. }, 2000);
241. } else {
242. statusDiv.innerHTML = '<div class="alert alert-warning">' + data.message + '</div>';
243. }
244. })
245. .catch(error => {
246. console.error('Error:', error);
247. statusDiv.innerHTML = '<div class="alert alert-danger">服务器错误，请稍后重试</div>';
248. });
249. });
251. // 月度统计图表
252. const ctx = document.getElementById('monthlyChart').getContext('2d');
253. const monthlyChart = new Chart(ctx, {
254. type: 'bar',
255. data: {
256. labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日'],
257. datasets: [{
258. label: '考勤时长（小时）',
259. data: [8, 8.5, 7.5, 8, 8, 0, 0, 8.5, 8, 7],
260. backgroundColor: 'rgba(75, 192, 192, 0.2)',
261. borderColor: 'rgba(75, 192, 192, 1)',
262. borderWidth: 1
263. }]
264. },
265. options: {
266. scales: {
267. y: {
268. beginAtZero: true,
269. max: 10
270. }
271. },
272. plugins: {
273. legend: {
274. display: false
275. }
276. },
277. maintainAspectRatio: false
278. }
279. });
280. </script>
281. {% endblock %}

复制代码

templates\edit_user.html

1. {% extends 'base.html' %}
3. {% block title %}编辑用户 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-8">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-user-edit me-2"></i>编辑用户</h4>
11. </div>
12. <div class="card-body">
13. <form method="POST" action="{{ url_for('edit_user', user_id=user.id) }}">
14. <div class="row">
15. <div class="col-md-6 mb-3">
16. <label for="student_id" class="form-label">学号 <span class="text-danger">*</span></label>
17. <div class="input-group">
18. <span class="input-group-text"><i class="fas fa-id-card"></i></span>
19. <input type="text" class="form-control" id="student_id" name="student_id" value="{{ user.student_id }}" required="">
20. </div>
21. </div>
22. <div class="col-md-6 mb-3">
23. <label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
24. <div class="input-group">
25. <span class="input-group-text"><i class="fas fa-user"></i></span>
26. <input type="text" class="form-control" id="name" name="name" value="{{ user.name }}" required="">
27. </div>
28. </div>
29. </div>
31. <div class="mb-3">
32. <label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
33. <div class="input-group">
34. <span class="input-group-text"><i class="fas fa-envelope"></i></span>
35. <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}" required="">
36. </div>
37. </div>
39. <div class="mb-3">
40. <label for="password" class="form-label">重置密码 <small class="text-muted">(留空表示不修改)</small></label>
41. <div class="input-group">
42. <span class="input-group-text"><i class="fas fa-lock"></i></span>
43. <input type="password" class="form-control" id="password" name="password">
44. </div>
45. <div class="form-text">如需重置密码，请在此输入新密码</div>
46. </div>
48. <div class="mb-3">
49. <label for="role" class="form-label">用户角色</label>
50. <div class="input-group">
51. <span class="input-group-text"><i class="fas fa-user-tag"></i></span>
52. <select class="form-select" id="role" name="role">
53. <option value="student" {%="" if="" user.role="=" 'student'="" %}selected{%="" endif="" %}="">学生</option>
54. <option value="teacher" {%="" if="" user.role="=" 'teacher'="" %}selected{%="" endif="" %}="">教师</option>
55. <option value="admin" {%="" if="" user.role="=" 'admin'="" %}selected{%="" endif="" %}="">管理员</option>
56. </select>
57. </div>
58. </div>
60. <div class="mb-3">
61. <div class="form-check form-switch">
62. <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {%="" if="" user.is_active="" %}checked{%="" endif="" %}="">
63. <label class="form-check-label" for="is_active">账号状态（启用/禁用）</label>
64. </div>
65. </div>
67. <div class="d-grid gap-2">
68. <button type="submit" class="btn btn-primary">保存修改</button>
69. </div>
70. </form>
71. </div>
72. <div class="card-footer">
73. <div class="row">
74. <div class="col-md-6">
75. <a href="{{ url_for('user_management') }}" class="btn btn-outline-secondary">
76. <i class="fas fa-arrow-left me-1"></i>返回用户列表
77. </a>
78. </div>
79. <div class="col-md-6 text-md-end mt-2 mt-md-0">
80. {% if user.has_face_data %}
81. <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#resetFaceModal">
82. <i class="fas fa-trash-alt me-1"></i>重置人脸数据
83. </button>
84. {% else %}
85. <a href="{{ url_for('face_registration_admin', user_id=user.id) }}" class="btn btn-outline-success">
86. <i class="fas fa-camera me-1"></i>注册人脸数据
87. </a>
88. {% endif %}
89. </div>
90. </div>
91. </div>
92. </div>
93. </div>
94. </div>
96. <!-- Reset Face Data Modal -->
97. <div class="modal fade" id="resetFaceModal" tabindex="-1" aria-labelledby="resetFaceModalLabel" aria-hidden="true">
98. <div class="modal-dialog">
99. <div class="modal-content">
100. <div class="modal-header">
101. <h5 class="modal-title" id="resetFaceModalLabel">确认重置人脸数据</h5>
102. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
103. </div>
104. <div class="modal-body">
105. <p>确定要重置用户 <strong>{{ user.name }}</strong> 的人脸数据吗？</p>
106. <p class="text-danger">此操作不可逆，用户将需要重新注册人脸数据才能使用人脸识别功能。</p>
107. </div>
108. <div class="modal-footer">
109. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
110. <form action="{{ url_for('reset_face_data', user_id=user.id) }}" method="POST" style="display: inline;">
111. <button type="submit" class="btn btn-danger">确认重置</button>
112. </form>
113. </div>
114. </div>
115. </div>
116. </div>
117. {% endblock %}

复制代码

templates\face_recognition_attendance.html

1. {% extends 'base.html' %}
3. {% block title %}人脸识别考勤 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-8">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-camera me-2"></i>人脸识别考勤</h4>
11. </div>
12. <div class="card-body">
13. <div class="text-center mb-4">
14. <h5 class="mb-3">请面向摄像头，系统将自动识别您的身份</h5>
15. <div class="alert alert-info">
16. <i class="fas fa-info-circle me-2"></i>请确保光线充足，面部无遮挡
17. </div>
18. </div>
20. <div class="row">
21. <div class="col-md-8 mx-auto">
22. <div id="camera-container" class="position-relative">
23. <video id="webcam" autoplay="" playsinline="" width="100%" class="rounded border"></video>
24. <div id="face-overlay" class="position-absolute top-0 start-0 w-100 h-100"></div>
25. <canvas id="canvas" class="d-none"></canvas>
26. </div>
28. <div id="recognition-status" class="text-center mt-3">
29. <div class="alert alert-secondary">
30. <i class="fas fa-spinner fa-spin me-2"></i>准备中...
31. </div>
32. </div>
34. <div id="recognition-result" class="text-center mt-3 d-none">
35. <div class="card">
36. <div class="card-body">
37. <h5 id="result-name" class="card-title mb-2"></h5>
38. <p id="result-id" class="card-text text-muted"></p>
39. <p id="result-time" class="card-text"></p>
40. </div>
41. </div>
42. </div>
43. </div>
44. </div>
46. <div class="row mt-4">
47. <div class="col-md-8 mx-auto">
48. <div class="d-grid gap-2">
49. <button id="start-camera" class="btn btn-primary">
50. <i class="fas fa-video me-2"></i>启动摄像头
51. </button>
52. <button id="capture-photo" class="btn btn-success d-none">
53. <i class="fas fa-camera me-2"></i>拍摄并识别
54. </button>
55. <button id="retry-button" class="btn btn-secondary d-none">
56. <i class="fas fa-redo me-2"></i>重新识别
57. </button>
58. </div>
59. </div>
60. </div>
61. </div>
62. <div class="card-footer">
63. <div class="row">
64. <div class="col-md-6">
65. <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary">
66. <i class="fas fa-arrow-left me-1"></i>返回控制面板
67. </a>
68. </div>
69. <div class="col-md-6 text-md-end mt-2 mt-md-0">
70. <a href="{{ url_for('check_in') }}" class="btn btn-outline-primary">
71. <i class="fas fa-clipboard-check me-1"></i>手动考勤
72. </a>
73. </div>
74. </div>
75. </div>
76. </div>
77. </div>
78. </div>
79. {% endblock %}
81. {% block extra_css %}
82. <style>
83. #camera-container {
84. max-width: 640px;
85. margin: 0 auto;
86. border-radius: 0.25rem;
87. overflow: hidden;
88. }
90. #face-overlay {
91. pointer-events: none;
92. }
94. .face-box {
95. position: absolute;
96. border: 2px solid #28a745;
97. border-radius: 4px;
98. }
100. .face-label {
101. position: absolute;
102. background-color: rgba(40, 167, 69, 0.8);
103. color: white;
104. padding: 2px 6px;
105. border-radius: 2px;
106. font-size: 12px;
107. top: -20px;
108. left: 0;
109. }
111. .unknown-face {
112. border-color: #dc3545;
113. }
115. .unknown-face .face-label {
116. background-color: rgba(220, 53, 69, 0.8);
117. }
119. .processing-indicator {
120. position: absolute;
121. top: 50%;
122. left: 50%;
123. transform: translate(-50%, -50%);
124. background-color: rgba(0, 0, 0, 0.7);
125. color: white;
126. padding: 10px 20px;
127. border-radius: 4px;
128. font-size: 14px;
129. }
131. @keyframes pulse {
132. 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
133. 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
134. 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
135. }
137. .pulse {
138. animation: pulse 1.5s infinite;
139. }
140. </style>
141. {% endblock %}
143. {% block extra_js %}
144. <script>
145. const startCameraBtn = document.getElementById('start-camera');
146. const capturePhotoBtn = document.getElementById('capture-photo');
147. const retryButton = document.getElementById('retry-button');
148. const webcamVideo = document.getElementById('webcam');
149. const canvas = document.getElementById('canvas');
150. const faceOverlay = document.getElementById('face-overlay');
151. const recognitionStatus = document.getElementById('recognition-status');
152. const recognitionResult = document.getElementById('recognition-result');
153. const resultName = document.getElementById('result-name');
154. const resultId = document.getElementById('result-id');
155. const resultTime = document.getElementById('result-time');
157. let stream = null;
158. let isProcessing = false;
160. // 启动摄像头
161. startCameraBtn.addEventListener('click', async function() {
162. try {
163. stream = await navigator.mediaDevices.getUserMedia({
164. video: {
165. width: { ideal: 640 },
166. height: { ideal: 480 },
167. facingMode: 'user'
168. }
169. });
170. webcamVideo.srcObject = stream;
172. startCameraBtn.classList.add('d-none');
173. capturePhotoBtn.classList.remove('d-none');
174. recognitionStatus.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>摄像头已启动，请面向摄像头</div>';
176. // 添加脉冲效果
177. webcamVideo.classList.add('pulse');
178. } catch (err) {
179. console.error('摄像头访问失败:', err);
180. recognitionStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>无法访问摄像头: ' + err.message + '</div>';
181. }
182. });
184. // 拍摄照片并识别
185. capturePhotoBtn.addEventListener('click', function() {
186. if (isProcessing) return;
187. isProcessing = true;
189. // 显示处理中状态
190. faceOverlay.innerHTML = '<div class="processing-indicator"><i class="fas fa-spinner fa-spin me-2"></i>正在识别...</div>';
191. recognitionStatus.innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner fa-spin me-2"></i>正在处理，请稍候...</div>';
193. // 拍摄照片
194. canvas.width = webcamVideo.videoWidth;
195. canvas.height = webcamVideo.videoHeight;
196. const ctx = canvas.getContext('2d');
197. ctx.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
199. // 获取图像数据
200. const imageData = canvas.toDataURL('image/jpeg');
202. // 发送到服务器进行人脸识别
203. fetch('{{ url_for("process_face_attendance") }}', {
204. method: 'POST',
205. headers: {
206. 'Content-Type': 'application/x-www-form-urlencoded',
207. },
208. body: 'image_data=' + encodeURIComponent(imageData)
209. })
210. .then(response => response.json())
211. .then(data => {
212. isProcessing = false;
213. faceOverlay.innerHTML = '';
215. if (data.success) {
216. // 识别成功
217. recognitionStatus.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>' + data.message + '</div>';
219. // 显示结果
220. resultName.textContent = data.user.name;
221. resultId.textContent = '学号: ' + data.user.student_id;
222. resultTime.textContent = '考勤时间: ' + new Date().toLocaleString();
223. recognitionResult.classList.remove('d-none');
225. // 更新按钮状态
226. capturePhotoBtn.classList.add('d-none');
227. retryButton.classList.remove('d-none');
229. // 绘制人脸框
230. drawFaceBox(true, data.user.name);
232. // 移除脉冲效果
233. webcamVideo.classList.remove('pulse');
234. } else {
235. // 识别失败
236. recognitionStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>' + data.message + '</div>';
238. // 绘制未知人脸框
239. drawFaceBox(false);
240. }
241. })
242. .catch(error => {
243. console.error('Error:', error);
244. isProcessing = false;
245. faceOverlay.innerHTML = '';
246. recognitionStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>服务器错误，请稍后重试</div>';
247. });
248. });
250. // 重新识别
251. retryButton.addEventListener('click', function() {
252. recognitionResult.classList.add('d-none');
253. capturePhotoBtn.classList.remove('d-none');
254. retryButton.classList.add('d-none');
255. faceOverlay.innerHTML = '';
256. recognitionStatus.innerHTML = '<div class="alert alert-secondary"><i class="fas fa-info-circle me-2"></i>请面向摄像头，准备重新识别</div>';
258. // 添加脉冲效果
259. webcamVideo.classList.add('pulse');
260. });
262. // 绘制人脸框
263. function drawFaceBox(isRecognized, name) {
264. // 模拟人脸位置
265. const videoWidth = webcamVideo.videoWidth;
266. const videoHeight = webcamVideo.videoHeight;
267. const scale = webcamVideo.offsetWidth / videoWidth;
269. // 人脸框位置（居中）
270. const faceWidth = videoWidth * 0.4;
271. const faceHeight = videoHeight * 0.5;
272. const faceLeft = (videoWidth - faceWidth) / 2;
273. const faceTop = (videoHeight - faceHeight) / 2;
275. // 创建人脸框元素
276. const faceBox = document.createElement('div');
277. faceBox.className = 'face-box' + (isRecognized ? '' : ' unknown-face');
278. faceBox.style.left = (faceLeft * scale) + 'px';
279. faceBox.style.top = (faceTop * scale) + 'px';
280. faceBox.style.width = (faceWidth * scale) + 'px';
281. faceBox.style.height = (faceHeight * scale) + 'px';
283. // 添加标签
284. const faceLabel = document.createElement('div');
285. faceLabel.className = 'face-label';
286. faceLabel.textContent = isRecognized ? name : '未识别';
287. faceBox.appendChild(faceLabel);
289. faceOverlay.appendChild(faceBox);
290. }
292. // 页面卸载时停止摄像头
293. window.addEventListener('beforeunload', function() {
294. if (stream) {
295. stream.getTracks().forEach(track => track.stop());
296. }
297. });
298. </script>
299. {% endblock %}

复制代码

templates\face_registration.html

1. {% extends 'base.html' %}
3. {% block title %}人脸注册 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-10">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-camera me-2"></i>人脸注册</h4>
11. </div>
12. <div class="card-body">
13. <div class="row">
14. <div class="col-md-6">
15. <div class="card mb-4">
16. <div class="card-header bg-light">
17. <h5 class="mb-0">上传照片</h5>
18. </div>
19. <div class="card-body">
20. <form method="POST" action="{{ url_for('face_registration') }}" enctype="multipart/form-data">
21. <div class="mb-3">
22. <label for="face_image" class="form-label">选择照片</label>
23. <input class="form-control" type="file" id="face_image" name="face_image" accept="image/jpeg,image/png,image/jpg" required="">
24. <div class="form-text">请上传清晰的正面照片，确保光线充足，面部无遮挡</div>
25. </div>
26. <div class="mb-3">
27. <div id="image-preview" class="text-center d-none">
28. <img id="preview-img" src="#" alt="预览图" class="img-fluid rounded mb-2" style="max-height: 300px;">
29. <button type="button" id="clear-preview" class="btn btn-sm btn-outline-danger">
30. <i class="fas fa-times"></i> 清除
31. </button>
32. </div>
33. </div>
34. <div class="d-grid">
35. <button type="submit" class="btn btn-primary">
36. <i class="fas fa-upload me-2"></i>上传并注册
37. </button>
38. </div>
39. </form>
40. </div>
41. </div>
42. </div>
43. <div class="col-md-6">
44. <div class="card">
45. <div class="card-header bg-light">
46. <h5 class="mb-0">使用摄像头</h5>
47. </div>
48. <div class="card-body">
49. <div class="text-center mb-3">
50. <div id="camera-container">
51. <video id="webcam" autoplay="" playsinline="" width="100%" class="rounded"></video>
52. <canvas id="canvas" class="d-none"></canvas>
53. </div>
54. <div id="captured-container" class="d-none">
55. <img id="captured-image" src="#" alt="已拍摄照片" class="img-fluid rounded mb-2">
56. </div>
57. </div>
58. <div class="d-grid gap-2">
59. <button id="start-camera" class="btn btn-info">
60. <i class="fas fa-video me-2"></i>打开摄像头
61. </button>
62. <button id="capture-photo" class="btn btn-primary d-none">
63. <i class="fas fa-camera me-2"></i>拍摄照片
64. </button>
65. <button id="retake-photo" class="btn btn-outline-secondary d-none">
66. <i class="fas fa-redo me-2"></i>重新拍摄
67. </button>
68. <button id="save-photo" class="btn btn-success d-none">
69. <i class="fas fa-save me-2"></i>保存并注册
70. </button>
71. </div>
72. <div id="webcam-status" class="mt-2 text-center"></div>
73. </div>
74. </div>
75. </div>
76. </div>
77. </div>
78. <div class="card-footer">
79. <div class="alert alert-info mb-0">
80. <h5><i class="fas fa-info-circle me-2"></i>人脸注册说明</h5>
81. <ul>
82. <li>请确保面部清晰可见，无遮挡物（如口罩、墨镜等）</li>
83. <li>保持自然表情，正面面对摄像头或照片中心</li>
84. <li>避免强烈的侧光或背光，确保光线均匀</li>
85. <li>注册成功后，您可以使用人脸识别功能进行考勤</li>
86. <li>如遇注册失败，请尝试调整光线或姿势后重新尝试</li>
87. </ul>
88. </div>
89. </div>
90. </div>
91. </div>
92. </div>
93. {% endblock %}
95. {% block extra_js %}
96. <script>
97. // 照片上传预览
98. document.getElementById('face_image').addEventListener('change', function(e) {
99. const file = e.target.files[0];
100. if (file) {
101. const reader = new FileReader();
102. reader.onload = function(event) {
103. const previewImg = document.getElementById('preview-img');
104. previewImg.src = event.target.result;
105. document.getElementById('image-preview').classList.remove('d-none');
106. };
107. reader.readAsDataURL(file);
108. }
109. });
111. document.getElementById('clear-preview').addEventListener('click', function() {
112. document.getElementById('face_image').value = '';
113. document.getElementById('image-preview').classList.add('d-none');
114. });
116. // 摄像头功能
117. const startCameraBtn = document.getElementById('start-camera');
118. const capturePhotoBtn = document.getElementById('capture-photo');
119. const retakePhotoBtn = document.getElementById('retake-photo');
120. const savePhotoBtn = document.getElementById('save-photo');
121. const webcamVideo = document.getElementById('webcam');
122. const canvas = document.getElementById('canvas');
123. const capturedImage = document.getElementById('captured-image');
124. const webcamContainer = document.getElementById('camera-container');
125. const capturedContainer = document.getElementById('captured-container');
126. const webcamStatus = document.getElementById('webcam-status');
128. let stream = null;
130. // 启动摄像头
131. startCameraBtn.addEventListener('click', async function() {
132. try {
133. stream = await navigator.mediaDevices.getUserMedia({
134. video: {
135. width: { ideal: 640 },
136. height: { ideal: 480 },
137. facingMode: 'user'
138. }
139. });
140. webcamVideo.srcObject = stream;
142. startCameraBtn.classList.add('d-none');
143. capturePhotoBtn.classList.remove('d-none');
144. webcamStatus.innerHTML = '<span class="text-success">摄像头已启动</span>';
145. } catch (err) {
146. console.error('摄像头访问失败:', err);
147. webcamStatus.innerHTML = '<span class="text-danger">无法访问摄像头: ' + err.message + '</span>';
148. }
149. });
151. // 拍摄照片
152. capturePhotoBtn.addEventListener('click', function() {
153. canvas.width = webcamVideo.videoWidth;
154. canvas.height = webcamVideo.videoHeight;
155. const ctx = canvas.getContext('2d');
156. ctx.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
158. capturedImage.src = canvas.toDataURL('image/jpeg');
160. webcamContainer.classList.add('d-none');
161. capturedContainer.classList.remove('d-none');
162. capturePhotoBtn.classList.add('d-none');
163. retakePhotoBtn.classList.remove('d-none');
164. savePhotoBtn.classList.remove('d-none');
165. });
167. // 重新拍摄
168. retakePhotoBtn.addEventListener('click', function() {
169. webcamContainer.classList.remove('d-none');
170. capturedContainer.classList.add('d-none');
171. capturePhotoBtn.classList.remove('d-none');
172. retakePhotoBtn.classList.add('d-none');
173. savePhotoBtn.classList.add('d-none');
174. });
176. // 保存照片并注册
177. savePhotoBtn.addEventListener('click', function() {
178. const imageData = capturedImage.src;
180. // 显示加载状态
181. savePhotoBtn.disabled = true;
182. savePhotoBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
184. // 发送到服务器
185. fetch('{{ url_for("webcam_registration") }}', {
186. method: 'POST',
187. headers: {
188. 'Content-Type': 'application/x-www-form-urlencoded',
189. },
190. body: 'image_data=' + encodeURIComponent(imageData)
191. })
192. .then(response => response.json())
193. .then(data => {
194. if (data.success) {
195. // 注册成功
196. webcamStatus.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
198. // 停止摄像头
199. if (stream) {
200. stream.getTracks().forEach(track => track.stop());
201. }
203. // 3秒后跳转到控制面板
204. setTimeout(() => {
205. window.location.href = '{{ url_for("dashboard") }}';
206. }, 3000);
207. } else {
208. // 注册失败
209. webcamStatus.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
210. savePhotoBtn.disabled = false;
211. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
213. // 重置为拍摄状态
214. setTimeout(() => {
215. retakePhotoBtn.click();
216. }, 2000);
217. }
218. })
219. .catch(error => {
220. console.error('Error:', error);
221. webcamStatus.innerHTML = '<div class="alert alert-danger">服务器错误，请稍后重试</div>';
222. savePhotoBtn.disabled = false;
223. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
224. });
225. });
227. // 页面卸载时停止摄像头
228. window.addEventListener('beforeunload', function() {
229. if (stream) {
230. stream.getTracks().forEach(track => track.stop());
231. }
232. });
233. </script>
234. {% endblock %}

复制代码

templates\face_registration_admin.html

1. {% extends 'base.html' %}
3. {% block title %}管理员人脸注册 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-8">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-camera me-2"></i>为用户注册人脸数据</h4>
11. </div>
12. <div class="card-body">
13. <div class="alert alert-info mb-4">
14. <h5 class="mb-2"><i class="fas fa-info-circle me-2"></i>用户信息</h5>
15. <div class="row">
16. <div class="col-md-6">
17. <p><strong>学号：</strong> {{ user.student_id }}</p>
18. <p><strong>姓名：</strong> {{ user.name }}</p>
19. </div>
20. <div class="col-md-6">
21. <p><strong>邮箱：</strong> {{ user.email }}</p>
22. <p><strong>注册日期：</strong> {{ user.registration_date }}</p>
23. </div>
24. </div>
25. </div>
27. <div class="row">
28. <div class="col-md-6">
29. <div class="card mb-4">
30. <div class="card-header bg-light">
31. <h5 class="mb-0">上传照片</h5>
32. </div>
33. <div class="card-body">
34. <form method="POST" action="{{ url_for('face_registration_admin', user_id=user.id) }}" enctype="multipart/form-data">
35. <div class="mb-3">
36. <label for="face_image" class="form-label">选择照片</label>
37. <input class="form-control" type="file" id="face_image" name="face_image" accept="image/jpeg,image/png,image/jpg" required="">
38. <div class="form-text">请上传清晰的正面照片，确保光线充足，面部无遮挡</div>
39. </div>
40. <div class="mb-3">
41. <div id="image-preview" class="text-center d-none">
42. <img id="preview-img" src="#" alt="预览图" class="img-fluid rounded mb-2" style="max-height: 300px;">
43. <button type="button" id="clear-preview" class="btn btn-sm btn-outline-danger">
44. <i class="fas fa-times"></i> 清除
45. </button>
46. </div>
47. </div>
48. <div class="d-grid">
49. <button type="submit" class="btn btn-primary">
50. <i class="fas fa-upload me-2"></i>上传并注册
51. </button>
52. </div>
53. </form>
54. </div>
55. </div>
56. </div>
57. <div class="col-md-6">
58. <div class="card">
59. <div class="card-header bg-light">
60. <h5 class="mb-0">使用摄像头</h5>
61. </div>
62. <div class="card-body">
63. <div class="text-center mb-3">
64. <div id="camera-container">
65. <video id="webcam" autoplay="" playsinline="" width="100%" class="rounded"></video>
66. <canvas id="canvas" class="d-none"></canvas>
67. </div>
68. <div id="captured-container" class="d-none">
69. <img id="captured-image" src="#" alt="已拍摄照片" class="img-fluid rounded mb-2">
70. </div>
71. </div>
72. <div class="d-grid gap-2">
73. <button id="start-camera" class="btn btn-info">
74. <i class="fas fa-video me-2"></i>打开摄像头
75. </button>
76. <button id="capture-photo" class="btn btn-primary d-none">
77. <i class="fas fa-camera me-2"></i>拍摄照片
78. </button>
79. <button id="retake-photo" class="btn btn-outline-secondary d-none">
80. <i class="fas fa-redo me-2"></i>重新拍摄
81. </button>
82. <button id="save-photo" class="btn btn-success d-none">
83. <i class="fas fa-save me-2"></i>保存并注册
84. </button>
85. </div>
86. <div id="webcam-status" class="mt-2 text-center"></div>
87. </div>
88. </div>
89. </div>
90. </div>
91. </div>
92. <div class="card-footer">
93. <div class="row">
94. <div class="col-md-6">
95. <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-outline-secondary">
96. <i class="fas fa-arrow-left me-1"></i>返回用户编辑
97. </a>
98. </div>
99. <div class="col-md-6 text-md-end mt-2 mt-md-0">
100. <a href="{{ url_for('user_management') }}" class="btn btn-outline-primary">
101. <i class="fas fa-users me-1"></i>返回用户列表
102. </a>
103. </div>
104. </div>
105. </div>
106. </div>
107. </div>
108. </div>
109. {% endblock %}
111. {% block extra_js %}
112. <script>
113. // 照片上传预览
114. document.getElementById('face_image').addEventListener('change', function(e) {
115. const file = e.target.files[0];
116. if (file) {
117. const reader = new FileReader();
118. reader.onload = function(event) {
119. const previewImg = document.getElementById('preview-img');
120. previewImg.src = event.target.result;
121. document.getElementById('image-preview').classList.remove('d-none');
122. };
123. reader.readAsDataURL(file);
124. }
125. });
127. document.getElementById('clear-preview').addEventListener('click', function() {
128. document.getElementById('face_image').value = '';
129. document.getElementById('image-preview').classList.add('d-none');
130. });
132. // 摄像头功能
133. const startCameraBtn = document.getElementById('start-camera');
134. const capturePhotoBtn = document.getElementById('capture-photo');
135. const retakePhotoBtn = document.getElementById('retake-photo');
136. const savePhotoBtn = document.getElementById('save-photo');
137. const webcamVideo = document.getElementById('webcam');
138. const canvas = document.getElementById('canvas');
139. const capturedImage = document.getElementById('captured-image');
140. const webcamContainer = document.getElementById('camera-container');
141. const capturedContainer = document.getElementById('captured-container');
142. const webcamStatus = document.getElementById('webcam-status');
144. let stream = null;
146. // 启动摄像头
147. startCameraBtn.addEventListener('click', async function() {
148. try {
149. stream = await navigator.mediaDevices.getUserMedia({
150. video: {
151. width: { ideal: 640 },
152. height: { ideal: 480 },
153. facingMode: 'user'
154. }
155. });
156. webcamVideo.srcObject = stream;
158. startCameraBtn.classList.add('d-none');
159. capturePhotoBtn.classList.remove('d-none');
160. webcamStatus.innerHTML = '<span class="text-success">摄像头已启动</span>';
161. } catch (err) {
162. console.error('摄像头访问失败:', err);
163. webcamStatus.innerHTML = '<span class="text-danger">无法访问摄像头: ' + err.message + '</span>';
164. }
165. });
167. // 拍摄照片
168. capturePhotoBtn.addEventListener('click', function() {
169. canvas.width = webcamVideo.videoWidth;
170. canvas.height = webcamVideo.videoHeight;
171. const ctx = canvas.getContext('2d');
172. ctx.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
174. capturedImage.src = canvas.toDataURL('image/jpeg');
176. webcamContainer.classList.add('d-none');
177. capturedContainer.classList.remove('d-none');
178. capturePhotoBtn.classList.add('d-none');
179. retakePhotoBtn.classList.remove('d-none');
180. savePhotoBtn.classList.remove('d-none');
181. });
183. // 重新拍摄
184. retakePhotoBtn.addEventListener('click', function() {
185. webcamContainer.classList.remove('d-none');
186. capturedContainer.classList.add('d-none');
187. capturePhotoBtn.classList.remove('d-none');
188. retakePhotoBtn.classList.add('d-none');
189. savePhotoBtn.classList.add('d-none');
190. });
192. // 保存照片并注册
193. savePhotoBtn.addEventListener('click', function() {
194. const imageData = capturedImage.src;
196. // 显示加载状态
197. savePhotoBtn.disabled = true;
198. savePhotoBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
200. // 发送到服务器
201. fetch('{{ url_for("webcam_registration") }}', {
202. method: 'POST',
203. headers: {
204. 'Content-Type': 'application/x-www-form-urlencoded',
205. },
206. body: 'image_data=' + encodeURIComponent(imageData) + '&user_id={{ user.id }}'
207. })
208. .then(response => response.json())
209. .then(data => {
210. if (data.success) {
211. // 注册成功
212. webcamStatus.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
214. // 停止摄像头
215. if (stream) {
216. stream.getTracks().forEach(track => track.stop());
217. }
219. // 3秒后跳转到用户编辑页面
220. setTimeout(() => {
221. window.location.href = '{{ url_for("edit_user", user_id=user.id) }}';
222. }, 3000);
223. } else {
224. // 注册失败
225. webcamStatus.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
226. savePhotoBtn.disabled = false;
227. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
229. // 重置为拍摄状态
230. setTimeout(() => {
231. retakePhotoBtn.click();
232. }, 2000);
233. }
234. })
235. .catch(error => {
236. console.error('Error:', error);
237. webcamStatus.innerHTML = '<div class="alert alert-danger">服务器错误，请稍后重试</div>';
238. savePhotoBtn.disabled = false;
239. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
240. });
241. });
243. // 页面卸载时停止摄像头
244. window.addEventListener('beforeunload', function() {
245. if (stream) {
246. stream.getTracks().forEach(track => track.stop());
247. }
248. });
249. </script>
250. {% endblock %}

复制代码

templates\index.html

1. {% extends 'base.html' %}
3. {% block title %}首页 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row align-items-center">
7. <div class="col-lg-6">
8. <h1 class="display-4 fw-bold mb-4">智能校园考勤系统</h1>
9. <p class="lead mb-4">基于深度学习的人脸识别技术，为校园考勤带来全新体验。告别传统签到方式，实现快速、准确、高效的智能考勤管理。</p>
10. <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4">
11. {% if session.get('user_id') %}
12. <a href="{{ url_for('face_recognition_attendance') }}" class="btn btn-primary btn-lg px-4 me-md-2">开始考勤</a>
13. <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary btn-lg px-4">控制面板</a>
14. {% else %}
15. <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg px-4 me-md-2">登录系统</a>
16. <a href="{{ url_for('register') }}" class="btn btn-outline-secondary btn-lg px-4">注册账号</a>
17. {% endif %}
18. </div>
19. </div>
20. <div class="col-lg-6">
21. <img src="https://source.unsplash.com/random/600x400/?face,technology" class="img-fluid rounded shadow" alt="人脸识别技术">
22. </div>
23. </div>
25. <div class="row mt-5 pt-5">
26. <div class="col-12 text-center">
27. <h2 class="mb-4">系统特点</h2>
28. </div>
29. </div>
31. <div class="row g-4 py-3">
32. <div class="col-md-4">
33. <div class="card h-100 shadow-sm">
34. <div class="card-body text-center">
35. <i class="fas fa-bolt text-primary fa-3x mb-3"></i>
36. <h3 class="card-title">快速识别</h3>
37. <p class="card-text">采用先进的深度学习算法，实现毫秒级人脸识别，大幅提高考勤效率。</p>
38. </div>
39. </div>
40. </div>
41. <div class="col-md-4">
42. <div class="card h-100 shadow-sm">
43. <div class="card-body text-center">
44. <i class="fas fa-shield-alt text-primary fa-3x mb-3"></i>
45. <h3 class="card-title">安全可靠</h3>
46. <p class="card-text">人脸特征加密存储，确保用户隐私安全，防止冒名顶替，提高考勤准确性。</p>
47. </div>
48. </div>
49. </div>
50. <div class="col-md-4">
51. <div class="card h-100 shadow-sm">
52. <div class="card-body text-center">
53. <i class="fas fa-chart-line text-primary fa-3x mb-3"></i>
54. <h3 class="card-title">数据分析</h3>
55. <p class="card-text">自动生成考勤统计报表，提供直观的数据可视化，辅助教学管理决策。</p>
56. </div>
57. </div>
58. </div>
59. </div>
61. <div class="row mt-5 pt-3">
62. <div class="col-12 text-center">
63. <h2 class="mb-4">使用流程</h2>
64. </div>
65. </div>
67. <div class="row">
68. <div class="col-12">
69. <div class="steps">
70. <div class="step-item">
71. <div class="step-number">1</div>
72. <div class="step-content">
73. <h4>注册账号</h4>
74. <p>创建个人账号，填写基本信息</p>
75. </div>
76. </div>
77. <div class="step-item">
78. <div class="step-number">2</div>
79. <div class="step-content">
80. <h4>人脸录入</h4>
81. <p>上传照片或使用摄像头采集人脸数据</p>
82. </div>
83. </div>
84. <div class="step-item">
85. <div class="step-number">3</div>
86. <div class="step-content">
87. <h4>日常考勤</h4>
88. <p>通过人脸识别快速完成签到签退</p>
89. </div>
90. </div>
91. <div class="step-item">
92. <div class="step-number">4</div>
93. <div class="step-content">
94. <h4>查看记录</h4>
95. <p>随时查看个人考勤记录和统计数据</p>
96. </div>
97. </div>
98. </div>
99. </div>
100. </div>
101. {% endblock %}
103. {% block extra_css %}
104. <style>
105. .steps {
106. display: flex;
107. justify-content: space-between;
108. margin: 2rem 0;
109. position: relative;
110. }
112. .steps:before {
113. content: '';
114. position: absolute;
115. top: 30px;
116. left: 0;
117. right: 0;
118. height: 2px;
119. background: #e9ecef;
120. z-index: -1;
121. }
123. .step-item {
124. text-align: center;
125. flex: 1;
126. position: relative;
127. }
129. .step-number {
130. width: 60px;
131. height: 60px;
132. border-radius: 50%;
133. background: #0d6efd;
134. color: white;
135. font-size: 1.5rem;
136. font-weight: bold;
137. display: flex;
138. align-items: center;
139. justify-content: center;
140. margin: 0 auto 1rem;
141. }
143. .step-content h4 {
144. margin-bottom: 0.5rem;
145. }
147. .step-content p {
148. color: #6c757d;
149. }
150. </style>
151. {% endblock %}

复制代码

templates\login.html

1. {% extends 'base.html' %}
3. {% block title %}登录 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-6">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-sign-in-alt me-2"></i>用户登录</h4>
11. </div>
12. <div class="card-body">
13. <form method="POST" action="{{ url_for('login') }}">
14. <div class="mb-3">
15. <label for="student_id" class="form-label">学号</label>
16. <div class="input-group">
17. <span class="input-group-text"><i class="fas fa-id-card"></i></span>
18. <input type="text" class="form-control" id="student_id" name="student_id" required="" autofocus="">
19. </div>
20. </div>
21. <div class="mb-3">
22. <label for="password" class="form-label">密码</label>
23. <div class="input-group">
24. <span class="input-group-text"><i class="fas fa-lock"></i></span>
25. <input type="password" class="form-control" id="password" name="password" required="">
26. </div>
27. </div>
28. <div class="d-grid gap-2">
29. <button type="submit" class="btn btn-primary">登录</button>
30. </div>
31. </form>
32. </div>
33. <div class="card-footer text-center">
34. <p class="mb-0">还没有账号？ <a href="{{ url_for('register') }}">立即注册</a></p>
35. </div>
36. </div>
38. <div class="card mt-4 shadow">
39. <div class="card-header bg-info text-white">
40. <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>人脸识别登录</h5>
41. </div>
42. <div class="card-body text-center">
43. <p>您也可以使用人脸识别功能直接考勤</p>
44. <a href="{{ url_for('face_recognition_attendance') }}" class="btn btn-info">
45. <i class="fas fa-camera me-2"></i>人脸识别考勤
46. </a>
47. </div>
48. </div>
49. </div>
50. </div>
51. {% endblock %}

复制代码

templates\register.html

1. {% extends 'base.html' %}
3. {% block title %}注册 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-8">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-user-plus me-2"></i>用户注册</h4>
11. </div>
12. <div class="card-body">
13. <form method="POST" action="{{ url_for('register') }}">
14. <div class="row">
15. <div class="col-md-6 mb-3">
16. <label for="student_id" class="form-label">学号 <span class="text-danger">*</span></label>
17. <div class="input-group">
18. <span class="input-group-text"><i class="fas fa-id-card"></i></span>
19. <input type="text" class="form-control" id="student_id" name="student_id" required="" autofocus="">
20. </div>
21. <div class="form-text">请输入您的学号，将作为登录账号使用</div>
22. </div>
23. <div class="col-md-6 mb-3">
24. <label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
25. <div class="input-group">
26. <span class="input-group-text"><i class="fas fa-user"></i></span>
27. <input type="text" class="form-control" id="name" name="name" required="">
28. </div>
29. </div>
30. </div>
32. <div class="mb-3">
33. <label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
34. <div class="input-group">
35. <span class="input-group-text"><i class="fas fa-envelope"></i></span>
36. <input type="email" class="form-control" id="email" name="email" required="">
37. </div>
38. <div class="form-text">请输入有效的电子邮箱，用于接收系统通知</div>
39. </div>
41. <div class="row">
42. <div class="col-md-6 mb-3">
43. <label for="password" class="form-label">密码 <span class="text-danger">*</span></label>
44. <div class="input-group">
45. <span class="input-group-text"><i class="fas fa-lock"></i></span>
46. <input type="password" class="form-control" id="password" name="password" required="">
47. </div>
48. <div class="form-text">密码长度至少为6位，包含字母和数字</div>
49. </div>
50. <div class="col-md-6 mb-3">
51. <label for="confirm_password" class="form-label">确认密码 <span class="text-danger">*</span></label>
52. <div class="input-group">
53. <span class="input-group-text"><i class="fas fa-lock"></i></span>
54. <input type="password" class="form-control" id="confirm_password" name="confirm_password" required="">
55. </div>
56. <div class="form-text">请再次输入密码进行确认</div>
57. </div>
58. </div>
60. <div class="mb-3 form-check">
61. <input type="checkbox" class="form-check-input" id="terms" required="">
62. <label class="form-check-label" for="terms">我已阅读并同意 <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">用户协议</a> 和 <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">隐私政策</a></label>
63. </div>
65. <div class="d-grid gap-2">
66. <button type="submit" class="btn btn-primary btn-lg">注册账号</button>
67. </div>
68. </form>
69. </div>
70. <div class="card-footer text-center">
71. <p class="mb-0">已有账号？ <a href="{{ url_for('login') }}">立即登录</a></p>
72. </div>
73. </div>
74. </div>
75. </div>
77. <!-- Terms Modal -->
78. <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
79. <div class="modal-dialog modal-lg">
80. <div class="modal-content">
81. <div class="modal-header">
82. <h5 class="modal-title" id="termsModalLabel">用户协议</h5>
83. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
84. </div>
85. <div class="modal-body">
86. <h5>校园人脸识别考勤系统用户协议</h5>
87. <p>欢迎使用校园人脸识别考勤系统。请仔细阅读以下条款，注册即表示您同意接受本协议的所有条款。</p>
89. <h6>1. 服务说明</h6>
90. <p>校园人脸识别考勤系统（以下简称"本系统"）是一款基于深度学习的人脸识别考勤系统，为用户提供自动化考勤服务。</p>
92. <h6>2. 用户注册与账号安全</h6>
93. <p>2.1 用户在注册时需要提供真实、准确、完整的个人资料。<br>
94. 2.2 用户应妥善保管账号和密码，因账号和密码泄露导致的一切损失由用户自行承担。<br>
95. 2.3 用户注册成功后，需要上传本人的人脸数据用于识别。</p>
97. <h6>3. 用户行为规范</h6>
98. <p>3.1 用户不得利用本系统进行任何违法或不当的活动。<br>
99. 3.2 用户不得尝试破解、篡改或干扰本系统的正常运行。<br>
100. 3.3 用户不得上传非本人的人脸数据，或尝试冒充他人进行考勤。</p>
102. <h6>4. 隐私保护</h6>
103. <p>4.1 本系统重视用户隐私保护，收集的个人信息和人脸数据仅用于考勤目的。<br>
104. 4.2 未经用户同意，本系统不会向第三方披露用户个人信息。<br>
105. 4.3 详细隐私政策请参阅《隐私政策》。</p>
107. <h6>5. 免责声明</h6>
108. <p>5.1 本系统不保证服务不会中断，对系统的及时性、安全性、准确性也不作保证。<br>
109. 5.2 因网络状况、通讯线路、第三方网站或管理部门的要求等任何原因而导致的服务中断或其他缺陷，本系统不承担任何责任。</p>
111. <h6>6. 协议修改</h6>
112. <p>本系统有权在必要时修改本协议条款，修改后的协议一旦公布即代替原协议。用户可在本系统查阅最新版协议条款。</p>
114. <h6>7. 适用法律</h6>
115. <p>本协议的订立、执行和解释及争议的解决均应适用中国法律。</p>
116. </div>
117. <div class="modal-footer">
118. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
119. </div>
120. </div>
121. </div>
122. </div>
124. <!-- Privacy Modal -->
125. <div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" aria-hidden="true">
126. <div class="modal-dialog modal-lg">
127. <div class="modal-content">
128. <div class="modal-header">
129. <h5 class="modal-title" id="privacyModalLabel">隐私政策</h5>
130. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
131. </div>
132. <div class="modal-body">
133. <h5>校园人脸识别考勤系统隐私政策</h5>
134. <p>本隐私政策说明了我们如何收集、使用、存储和保护您的个人信息。请在使用本系统前仔细阅读本政策。</p>
136. <h6>1. 信息收集</h6>
137. <p>1.1 基本信息：我们收集您的学号、姓名、电子邮箱等基本信息。<br>
138. 1.2 人脸数据：我们收集您的人脸图像并提取特征向量用于身份识别。<br>
139. 1.3 考勤记录：我们记录您的考勤时间和考勤状态。</p>
141. <h6>2. 信息使用</h6>
142. <p>2.1 您的个人信息和人脸数据仅用于身份验证和考勤记录目的。<br>
143. 2.2 我们不会将您的个人信息用于与考勤无关的其他目的。<br>
144. 2.3 未经您的明确许可，我们不会向任何第三方提供您的个人信息。</p>
146. <h6>3. 信息存储与保护</h6>
147. <p>3.1 您的人脸特征数据以加密形式存储在我们的数据库中。<br>
148. 3.2 我们采取适当的技术和组织措施来保护您的个人信息不被未经授权的访问、使用或泄露。<br>
149. 3.3 我们定期审查我们的信息收集、存储和处理实践，以防止未经授权的访问和使用。</p>
151. <h6>4. 信息保留</h6>
152. <p>4.1 我们仅在必要的时间内保留您的个人信息，以实现本政策中所述的目的。<br>
153. 4.2 当您不再使用本系统时，您可以要求我们删除您的个人信息和人脸数据。</p>
155. <h6>5. 您的权利</h6>
156. <p>5.1 您有权访问、更正或删除您的个人信息。<br>
157. 5.2 您有权随时撤回您对收集和使用您个人信息的同意。<br>
158. 5.3 如需行使上述权利，请联系系统管理员。</p>
160. <h6>6. 政策更新</h6>
161. <p>我们可能会不时更新本隐私政策。任何重大变更都会通过电子邮件或系统通知的形式通知您。</p>
163. <h6>7. 联系我们</h6>
164. <p>如果您对本隐私政策有任何疑问或建议，请联系系统管理员。</p>
165. </div>
166. <div class="modal-footer">
167. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
168. </div>
169. </div>
170. </div>
171. </div>
172. {% endblock %}
174. {% block extra_js %}
175. <script>
176. // 密码一致性验证
177. document.getElementById('confirm_password').addEventListener('input', function() {
178. const password = document.getElementById('password').value;
179. const confirmPassword = this.value;
181. if (password !== confirmPassword) {
182. this.setCustomValidity('两次输入的密码不一致');
183. } else {
184. this.setCustomValidity('');
185. }
186. });
188. // 密码强度验证
189. document.getElementById('password').addEventListener('input', function() {
190. const password = this.value;
191. const hasLetter = /[a-zA-Z]/.test(password);
192. const hasNumber = /[0-9]/.test(password);
193. const isLongEnough = password.length >= 6;
195. if (!hasLetter || !hasNumber || !isLongEnough) {
196. this.setCustomValidity('密码必须至少包含6个字符，包括字母和数字');
197. } else {
198. this.setCustomValidity('');
199. }
200. });
201. </script>
202. {% endblock %}

复制代码

templates\user_management.html

1. {% extends 'base.html' %}
3. {% block title %}用户管理 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="card shadow">
7. <div class="card-header bg-primary text-white">
8. <h4 class="mb-0"><i class="fas fa-users-cog me-2"></i>用户管理</h4>
9. </div>
10. <div class="card-body">
11. <div class="row mb-4">
12. <div class="col-md-6">
13. <form method="GET" action="{{ url_for('user_management') }}" class="d-flex">
14. <input type="text" class="form-control me-2" name="search" placeholder="搜索学号或姓名" value="{{ search_query }}">
15. <button type="submit" class="btn btn-primary">
16. <i class="fas fa-search me-1"></i>搜索
17. </button>
18. </form>
19. </div>
20. <div class="col-md-6 text-md-end mt-3 mt-md-0">
21. <a href="{{ url_for('register') }}" class="btn btn-success">
22. <i class="fas fa-user-plus me-1"></i>添加用户
23. </a>
24. </div>
25. </div>
27. {% if users %}
28. <div class="table-responsive">
30. {% for user in users %}
32. {% endfor %}
33. <table class="table table-hover table-striped">
34. <thead class="table-light">
35. <tr>
36. <th>学号</th>
37. <th>姓名</th>
38. <th>邮箱</th>
39. <th>注册日期</th>
40. <th>人脸数据</th>
41. <th>操作</th>
42. </tr>
43. </thead>
44. <tbody><tr>
45. <td>{{ user.student_id }}</td>
46. <td>{{ user.name }}</td>
47. <td>{{ user.email }}</td>
48. <td>{{ user.registration_date }}</td>
49. <td>
50. {% if user.has_face_data %}
51. <span class="badge bg-success">已注册</span>
52. {% else %}
53. <span class="badge bg-warning">未注册</span>
54. {% endif %}
55. </td>
56. <td>
57. <div class="btn-group btn-group-sm">
58. <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-outline-primary">
59. <i class="fas fa-edit"></i>
60. </a>
61. <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ user.id }}">
62. <i class="fas fa-trash-alt"></i>
63. </button>
64. {% if not user.has_face_data %}
65. <a href="{{ url_for('face_registration_admin', user_id=user.id) }}" class="btn btn-outline-success">
66. <i class="fas fa-camera"></i>
67. </a>
68. {% endif %}
69. </div>
71. <!-- Delete Modal -->
72. <div class="modal fade" id="deleteModal{{ user.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ user.id }}" aria-hidden="true">
73. <div class="modal-dialog">
74. <div class="modal-content">
75. <div class="modal-header">
76. <h5 class="modal-title" id="deleteModalLabel{{ user.id }}">确认删除</h5>
77. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
78. </div>
79. <div class="modal-body">
80. <p>确定要删除用户 <strong>{{ user.name }}</strong> ({{ user.student_id }}) 吗？</p>
81. <p class="text-danger">此操作不可逆，用户的所有数据（包括考勤记录和人脸数据）将被永久删除。</p>
82. </div>
83. <div class="modal-footer">
84. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
85. <form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST" style="display: inline;">
86. <button type="submit" class="btn btn-danger">确认删除</button>
87. </form>
88. </div>
89. </div>
90. </div>
91. </div>
92. </td>
93. </tr></tbody>
94. </table>
95. </div>
97. <!-- Pagination -->
98. {% if total_pages > 1 %}
99. <nav aria-label="Page navigation">
100. <ul class="pagination justify-content-center">
101. <li class="page-item {{ 'disabled' if current_page == 1 else '' }}">
102. <a class="page-link" href="{{ url_for('user_management', page=current_page-1, search=search_query) }}" aria-label="Previous">
103. <span aria-hidden="true">«</span>
104. </a>
105. </li>
107. {% for i in range(1, total_pages + 1) %}
108. <li class="page-item {{ 'active' if i == current_page else '' }}">
109. <a class="page-link" href="{{ url_for('user_management', page=i, search=search_query) }}">{{ i }}</a>
110. </li>
111. {% endfor %}
113. <li class="page-item {{ 'disabled' if current_page == total_pages else '' }}">
114. <a class="page-link" href="{{ url_for('user_management', page=current_page+1, search=search_query) }}" aria-label="Next">
115. <span aria-hidden="true">»</span>
116. </a>
117. </li>
118. </ul>
119. </nav>
120. {% endif %}
121. {% else %}
122. <div class="alert alert-info">
123. <i class="fas fa-info-circle me-2"></i>没有找到用户记录
124. </div>
125. {% endif %}
126. </div>
127. <div class="card-footer">
128. <div class="row">
129. <div class="col-md-6">
130. <button class="btn btn-outline-primary" onclick="window.print()">
131. <i class="fas fa-print me-1"></i>打印用户列表
132. </button>
133. </div>
134. <div class="col-md-6 text-md-end mt-2 mt-md-0">
135. <a href="#" class="btn btn-outline-success" id="exportBtn">
136. <i class="fas fa-file-excel me-1"></i>导出Excel
137. </a>
138. </div>
139. </div>
140. </div>
141. </div>
142. {% endblock %}
144. {% block extra_js %}
145. <script>
146. // 导出Excel功能
147. document.getElementById('exportBtn').addEventListener('click', function(e) {
148. e.preventDefault();
149. alert('导出功能将在完整版中提供');
150. });
151. </script>
152. {% endblock %}

复制代码

templates\webcam_registration.html

1. {% extends 'base.html' %}
3. {% block title %}摄像头人脸注册 - 校园人脸识别考勤系统{% endblock %}
5. {% block content %}
6. <div class="row justify-content-center">
7. <div class="col-md-8">
8. <div class="card shadow">
9. <div class="card-header bg-primary text-white">
10. <h4 class="mb-0"><i class="fas fa-camera me-2"></i>摄像头人脸注册</h4>
11. </div>
12. <div class="card-body">
13. <div class="text-center mb-4">
14. <h5 class="mb-3">请面向摄像头，确保光线充足，面部清晰可见</h5>
15. <div class="alert alert-info">
16. <i class="fas fa-info-circle me-2"></i>请保持自然表情，正面面对摄像头
17. </div>
18. </div>
20. <div class="row">
21. <div class="col-md-8 mx-auto">
22. <div id="camera-container" class="position-relative">
23. <video id="webcam" autoplay="" playsinline="" width="100%" class="rounded border"></video>
24. <div id="face-overlay" class="position-absolute top-0 start-0 w-100 h-100"></div>
25. <canvas id="canvas" class="d-none"></canvas>
26. </div>
28. <div id="captured-container" class="d-none text-center mt-3">
29. <img id="captured-image" src="#" alt="已拍摄照片" class="img-fluid rounded border" style="max-height: 300px;">
30. </div>
32. <div id="registration-status" class="text-center mt-3">
33. <div class="alert alert-secondary">
34. <i class="fas fa-info-circle me-2"></i>请点击下方按钮启动摄像头
35. </div>
36. </div>
37. </div>
38. </div>
40. <div class="row mt-4">
41. <div class="col-md-8 mx-auto">
42. <div class="d-grid gap-2">
43. <button id="start-camera" class="btn btn-primary">
44. <i class="fas fa-video me-2"></i>启动摄像头
45. </button>
46. <button id="capture-photo" class="btn btn-success d-none">
47. <i class="fas fa-camera me-2"></i>拍摄照片
48. </button>
49. <button id="retake-photo" class="btn btn-outline-secondary d-none">
50. <i class="fas fa-redo me-2"></i>重新拍摄
51. </button>
52. <button id="save-photo" class="btn btn-primary d-none">
53. <i class="fas fa-save me-2"></i>保存并注册
54. </button>
55. </div>
56. </div>
57. </div>
58. </div>
59. <div class="card-footer">
60. <div class="row">
61. <div class="col-md-6">
62. <a href="{{ url_for('face_registration') }}" class="btn btn-outline-secondary">
63. <i class="fas fa-arrow-left me-1"></i>返回上传方式
64. </a>
65. </div>
66. <div class="col-md-6 text-md-end mt-2 mt-md-0">
67. <a href="{{ url_for('dashboard') }}" class="btn btn-outline-primary">
68. <i class="fas fa-home me-1"></i>返回控制面板
69. </a>
70. </div>
71. </div>
72. </div>
73. </div>
74. </div>
75. </div>
76. {% endblock %}
78. {% block extra_css %}
79. <style>
80. #camera-container {
81. max-width: 640px;
82. margin: 0 auto;
83. border-radius: 0.25rem;
84. overflow: hidden;
85. }
87. #face-overlay {
88. pointer-events: none;
89. }
91. .face-box {
92. position: absolute;
93. border: 2px solid #28a745;
94. border-radius: 4px;
95. }
97. .face-label {
98. position: absolute;
99. background-color: rgba(40, 167, 69, 0.8);
100. color: white;
101. padding: 2px 6px;
102. border-radius: 2px;
103. font-size: 12px;
104. top: -20px;
105. left: 0;
106. }
108. .processing-indicator {
109. position: absolute;
110. top: 50%;
111. left: 50%;
112. transform: translate(-50%, -50%);
113. background-color: rgba(0, 0, 0, 0.7);
114. color: white;
115. padding: 10px 20px;
116. border-radius: 4px;
117. font-size: 14px;
118. }
120. @keyframes pulse {
121. 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
122. 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
123. 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
124. }
126. .pulse {
127. animation: pulse 1.5s infinite;
128. }
129. </style>
130. {% endblock %}
132. {% block extra_js %}
133. <script>
134. const startCameraBtn = document.getElementById('start-camera');
135. const capturePhotoBtn = document.getElementById('capture-photo');
136. const retakePhotoBtn = document.getElementById('retake-photo');
137. const savePhotoBtn = document.getElementById('save-photo');
138. const webcamVideo = document.getElementById('webcam');
139. const canvas = document.getElementById('canvas');
140. const capturedImage = document.getElementById('captured-image');
141. const cameraContainer = document.getElementById('camera-container');
142. const capturedContainer = document.getElementById('captured-container');
143. const faceOverlay = document.getElementById('face-overlay');
144. const registrationStatus = document.getElementById('registration-status');
146. let stream = null;
148. // 启动摄像头
149. startCameraBtn.addEventListener('click', async function() {
150. try {
151. stream = await navigator.mediaDevices.getUserMedia({
152. video: {
153. width: { ideal: 640 },
154. height: { ideal: 480 },
155. facingMode: 'user'
156. }
157. });
158. webcamVideo.srcObject = stream;
160. startCameraBtn.classList.add('d-none');
161. capturePhotoBtn.classList.remove('d-none');
162. registrationStatus.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>摄像头已启动，请面向摄像头</div>';
164. // 添加脉冲效果
165. webcamVideo.classList.add('pulse');
167. // 检测人脸
168. detectFace();
169. } catch (err) {
170. console.error('摄像头访问失败:', err);
171. registrationStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>无法访问摄像头: ' + err.message + '</div>';
172. }
173. });
175. // 模拟人脸检测
176. function detectFace() {
177. // 这里仅作为UI示例，实际人脸检测应在服务器端进行
178. setTimeout(() => {
179. if (stream && stream.active) {
180. const videoWidth = webcamVideo.videoWidth;
181. const videoHeight = webcamVideo.videoHeight;
182. const scale = webcamVideo.offsetWidth / videoWidth;
184. // 人脸框位置（居中）
185. const faceWidth = videoWidth * 0.4;
186. const faceHeight = videoHeight * 0.5;
187. const faceLeft = (videoWidth - faceWidth) / 2;
188. const faceTop = (videoHeight - faceHeight) / 2;
190. // 创建人脸框元素
191. const faceBox = document.createElement('div');
192. faceBox.className = 'face-box';
193. faceBox.style.left = (faceLeft * scale) + 'px';
194. faceBox.style.top = (faceTop * scale) + 'px';
195. faceBox.style.width = (faceWidth * scale) + 'px';
196. faceBox.style.height = (faceHeight * scale) + 'px';
198. faceOverlay.innerHTML = '';
199. faceOverlay.appendChild(faceBox);
201. registrationStatus.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>检测到人脸，可以进行拍摄</div>';
202. }
203. }, 1500);
204. }
206. // 拍摄照片
207. capturePhotoBtn.addEventListener('click', function() {
208. canvas.width = webcamVideo.videoWidth;
209. canvas.height = webcamVideo.videoHeight;
210. const ctx = canvas.getContext('2d');
211. ctx.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
213. capturedImage.src = canvas.toDataURL('image/jpeg');
215. cameraContainer.classList.add('d-none');
216. capturedContainer.classList.remove('d-none');
217. capturePhotoBtn.classList.add('d-none');
218. retakePhotoBtn.classList.remove('d-none');
219. savePhotoBtn.classList.remove('d-none');
221. registrationStatus.innerHTML = '<div class="alert alert-info"><i class="fas fa-info-circle me-2"></i>请确认照片清晰可见，如不满意可重新拍摄</div>';
222. });
224. // 重新拍摄
225. retakePhotoBtn.addEventListener('click', function() {
226. cameraContainer.classList.remove('d-none');
227. capturedContainer.classList.add('d-none');
228. capturePhotoBtn.classList.remove('d-none');
229. retakePhotoBtn.classList.add('d-none');
230. savePhotoBtn.classList.add('d-none');
231. faceOverlay.innerHTML = '';
233. registrationStatus.innerHTML = '<div class="alert alert-secondary"><i class="fas fa-info-circle me-2"></i>请重新面向摄像头</div>';
235. // 重新检测人脸
236. detectFace();
237. });
239. // 保存照片并注册
240. savePhotoBtn.addEventListener('click', function() {
241. const imageData = capturedImage.src;
243. // 显示加载状态
244. savePhotoBtn.disabled = true;
245. savePhotoBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
247. // 发送到服务器
248. fetch('{{ url_for("webcam_registration") }}', {
249. method: 'POST',
250. headers: {
251. 'Content-Type': 'application/x-www-form-urlencoded',
252. },
253. body: 'image_data=' + encodeURIComponent(imageData)
254. })
255. .then(response => response.json())
256. .then(data => {
257. if (data.success) {
258. // 注册成功
259. registrationStatus.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>' + data.message + '</div>';
261. // 停止摄像头
262. if (stream) {
263. stream.getTracks().forEach(track => track.stop());
264. }
266. // 禁用所有按钮
267. retakePhotoBtn.disabled = true;
268. savePhotoBtn.disabled = true;
270. // 3秒后跳转到控制面板
271. setTimeout(() => {
272. window.location.href = '{{ url_for("dashboard") }}';
273. }, 3000);
274. } else {
275. // 注册失败
276. registrationStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>' + data.message + '</div>';
277. savePhotoBtn.disabled = false;
278. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
280. // 重置为拍摄状态
281. setTimeout(() => {
282. retakePhotoBtn.click();
283. }, 2000);
284. }
285. })
286. .catch(error => {
287. console.error('Error:', error);
288. registrationStatus.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>服务器错误，请稍后重试</div>';
289. savePhotoBtn.disabled = false;
290. savePhotoBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存并注册';
291. });
292. });
294. // 页面卸载时停止摄像头
295. window.addEventListener('beforeunload', function() {
296. if (stream) {
297. stream.getTracks().forEach(track => track.stop());
298. }
299. });
300. </script>
301. {% endblock %}

复制代码