基于深度学习CNN网络 mini-xception网络实现构建一个完备的人脸心情检测/ - qidao123.com技术社区-IT企服评测·应用市场

face_expression_recognition/
├── data/
│ └── fer2013.csv
├── models/
│ └── mini_xception.h5
├── src/
│ ├── train.py # 训练脚本
│ ├── predict.py # 预测脚本
│ ├── utils.py # 工具函数
│ ├── app.py # Flask应用入口
│ └── ui_app.py # PyQt5 UI应用入口
├── README.md # 项目说明文档
└── requirements.txt # 依赖项

复制代码

pip install tensorflow opencv-python pyqt5 pandas matplotlib scikit-learn

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Expression Recognition</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
.video-feed {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Upload Face Image</h1>
<form id="upload-form" enctype="multipart/form-data">
<input type="file" id="file-input" name="file" accept="image/*" required>
<br><br>
<button type="submit">Predict</button>
</form>
<div class="result" id="result"></div>
<h1>Camera Feed</h1>
<button onclick="startVideo()">Start Video</button>
<button onclick="stopVideo()">Stop Video</button>
<div class="video-feed">
<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" style="display:none;"></canvas>
</div>
</div>
<script>
document.getElementById('upload-form').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('/predict-image', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerText = `Prediction: ${data.prediction}`;
})
.catch(error => console.error('Error:', error));
});
let videoStream;
async function startVideo() {
try {
videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
const videoElement = document.getElementById('video');
videoElement.srcObject = videoStream;
videoElement.play();
setInterval(captureAndPredict, 1000); // Capture and predict every second
} catch (error) {
console.error('Error accessing camera:', error);
}
}
function stopVideo() {
if (videoStream && videoStream.getTracks().length > 0) {
videoStream.getTracks()[0].stop();
const videoElement = document.getElementById('video');
videoElement.srcObject = null;
}
}
async function captureAndPredict() {
const videoElement = document.getElementById('video');
const canvasElement = document.getElementById('canvas');
const context = canvasElement.getContext('2d');
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
const imageData = canvasElement.toDataURL('image/png');
const blob = await fetch(imageData).then(res => res.blob());
const formData = new FormData();
formData.append('file', blob, 'captured.png');
fetch('/predict-image', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Prediction:', data.prediction);
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

复制代码