基于HTML+CSS构建界面的人脸表情识别系统（有完整代码，可做为毕业设计）

TC_zyq

已于 2024-05-21 10:42:03 修改

阅读量1.8k

点赞数 12

分类专栏： Demo 文章标签： html python flask 深度学习 keras

于 2022-10-30 21:43:46 首次发布

本文链接：https://blog.csdn.net/qq_45087676/article/details/127589954

版权

Demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基于Python Flask+HTML构建界面的人脸表情识别系统（有完整代码，可作为毕业设计，其他的识别系统也可实现）

这是本科期间发表的某SCI二区论文中的部分内容，深度学习框架使用的Keras，该文仅放了基于Fer2013数据集（数据集可以找我要）上训练得到的人脸表情分类模型，这里主要是加载高精度的表情分类模型的进一步应用，通过Flask框架+HTML+CSS构建前端界面将表情分类模型应用到其中。整个内容可用于毕业设计。

使用的HTML+CSS构建的界面如下图所示：

登录界面：
在这里插入图片描述

界面代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Login</title>
    <style>
       * {
              margin: 0;
              padding: 0;
        }
        html {
              height: 100%;
        }
	body {
		background-color: #8ea4f8;
		background-image: url("static/bg1.jpg");
		background-repeat: no-repeat;
		background-size: cover; //背景图适应屏幕
	}
	.login_box {
		width: 400px;
		height: 400px;
		background-color: #fff;
		margin: auto;
		margin-top: 150px;
		border-radius: 5px;
		overflow: hidden;
	}
	.title {
		text-align: center;
		font-size: 28px;
		color: #000;
		margin-top: 80px;
		margin-bottom: 10px;
		letter-spacing: 3px;
		font-family: sans-serif;
	}
	.input_box {
		width: 300px;
		height: 30px;
		width: 300px;
		height: 40px;
		padding-left: 10px;
		margin-top: 20px;
		margin-left: 50px;
	}
	.button_box {
		width: 300px;
		height: 35px;
		width: 300px;
		height: 40px;
		margin-top: 20px;
		margin-left: 50px;
		border-radius: 5px;
		background-color: #64a9d9;
		cursor: pointer;
		color: #fff;
	}
      </style>
</head>

<body>
<form action="/login" method="POST">
	<div class="login_box">
		<h1 class="title">欢迎登录</h1>
		  <input class="input_box" type="text" name="username" placeholder="用户名"><br/>
		  <input class="input_box" type="password" name="pwd" placeholder="密码"><br/>
		<input class="button_box" type="submit"  value="登录"><br/>
        {{msg}}
	</div>
   </form>
</body>
</html>

因为使用了Flask框架，网址端口设置为默认app.run(debug=True)运行主程序后，通过访问http://127.0.0.1:5000/网址（该网址只限于自身电脑的浏览器打开，要想让同一局域网下的其他电脑打开，如此设置app.run(host="0.0.0.0",port=5000)，然后通过网络的ip地址访问，如我的ip为http://10.16.84.164:/5000/，如想让不同局域网的人访问，就应该部署到服务器上）。
在登录界面输入用户名：TC_zyq 密码：123456 登录后就会跳转到表情识别系统操作界面。
静态界面：
在这里插入图片描述

动态界面：

desktop 2022-10-30 20-30-28

跳转到表情识别系统界面后，选择待测图片，提交后即可进行识别了，结果如下：
在这里插入图片描述

最后，通过Flask+HTML+CSS构建的界面实现表情识别，当然还可通过PyQt5实现界面的实现。以上的所有代码和资料，包括数据集的预处理、模型的训练、Flask+HTML构建的界面代码、多个表情数据集和分类模型等全部项目代码资料都是完全可以成功运行的。拿来作为毕业设计完全够了，当然分类算法肯定得有自己的创新啦。仅供参考（写代码不易！有偿！），（也可利用PyQt5实现界面，不同的系统也可实现，且可按你的需求改功能）。本人qq：1920555109，平时不常看博客，有需要可联系。