文章目录一、项目背景与目标二、整体设计思路1.数据加载与模型训练2.推理与情绪映射3.前端交互与Emoji生成三、数据集与预处理四、CNN模型架构五、Emoji映射与显示六、前端界面设计与交互逻辑1. 组件构成2. 交互流程3. 前端渲染技术4. 异常处理七、运行结果示例八、总结与改进方向一、项目背景与目标在情感计算与人机交互领域面部表情识别FER是重要研究方向。本项目的目标是构建一个简单、可运行的情绪识别Emoji生成器——用户上传一张人脸图片系统通过卷积神经网络CNN预测其情绪7类并自动显示一个对应的大号Emoji让情绪反馈直观、有趣。本项目使用Kaggle平台上的msambare/fer2013数据集包含训练/测试图片及英文标签基于TensorFlow/Keras训练轻量级CNN模型并利用ipywidgets搭建交互式前端界面最终在Kaggle Notebook中可直接运行。二、整体设计思路整个系统分为三个核心模块数据加载与模型训练支持两种数据格式优先查找fer2013.csvCSV格式若不存在则自动从train/子目录按类别英文名组织加载图片使用image_dataset_from_directory。定义EMOTIONS中文与CLASS_NAMES_EN英文严格对应顺序确保模型输出索引与中文标签一致。CNN结构3层卷积池化Dropout防止过拟合输出7类Softmax。模型训练后保存至/kaggle/working/emotion_cnn.h5下次运行直接加载避免重复训练。推理与情绪映射输入图片转为灰度48x48归一化后输入模型取最大概率的索引映射到中文情绪。简单人脸裁剪目前为固定区域实际可结合人脸检测器提升效果但本项目作为演示保留占位。前端交互与Emoji生成使用ipywidgets构建下拉菜单选择测试图片、预测按钮、进度条和状态标签。预测结果通过IPython.display.HTML渲染以Flex布局展示四部分原图、情绪文本、人脸裁剪、Emoji字号100px。无需外部API完全离线运行。三、数据集与预处理数据集msambare/fer2013Kaggle包含train/和test/子目录每个子目录下按情绪类别angry,disgust,fear,happy,neutral,sad,surprise存放图片。预处理所有图片统一缩放到48x48像素转为灰度图像素值归一化到[0,1]。训练/验证划分从训练集划分20%作为验证集validation_split0.2使用image_dataset_from_directory自动批量化。四、CNN模型架构model models.Sequential([ layers.Conv2D(32, (3,3), activationrelu, input_shape(48,48,1)), layers.MaxPooling2D((2,2)), layers.Conv2D(64, (3,3), activationrelu), layers.MaxPooling2D((2,2)), layers.Conv2D(128, (3,3), activationrelu), layers.MaxPooling2D((2,2)), layers.Flatten(), layers.Dropout(0.5), layers.Dense(128, activationrelu), layers.Dense(7, activationsoftmax) ])五、Emoji映射与显示为每种情绪指定一个代表性EmojiEMOJI_MAP { 愤怒: , 厌恶: , 恐惧: , 开心: , 平静: , 悲伤: , 惊讶: }推理得到情绪后直接映射为Emoji字符并在前端以超大字号100px展示增强视觉反馈。六、前端界面设计与交互逻辑1. 组件构成下拉选择框Dropdown列出数据集路径下所有图片文件名用户选择待测试图片。预测按钮Button触发推理流程。进度条IntProgress与状态标签Label反馈处理进度。输出区域Output用于动态渲染HTML结果。2. 交互流程用户从下拉框选择一张图片。点击“预测情绪”按钮。后端执行读取图片 - 预处理 - 模型推理 - 获取情绪和Emoji。前端更新进度条至100%输出区域清空并重新渲染四格布局。3. 前端渲染技术使用IPython.display.HTML直接嵌入Base64编码的图片原图和人脸及Emoji字符。采用Flex容器实现响应式布局适应不同屏幕宽度。核心前端代码片段display(HTML(f div styledisplay:flex; flex-wrap:wrap; gap:20px; padding:10px; border:1px solid #ddd; border-radius:8px; div styletext-align:center; h3 原图/h3 img srcdata:image/png;base64,{orig_b64} stylemax-width:300px; /div div styletext-align:center; min-width:200px; h3 情绪/h3 div stylefont-size:24px; background:#f0f8ff; border-radius:8px; padding:20px; {emotion_text} /div /div div styletext-align:center; h3 人脸/h3 img srcdata:image/png;base64,{face_b64} stylemax-width:150px; /div div styletext-align:center; h3 Emoji/h3 div stylefont-size:100px; line-height:1.2; {emoji_char} /div /div /div ))4. 异常处理若模型加载失败或预测出错自动降级为随机选择情绪保证界面可用。空选或无效图片时有提示信息七、运行结果示例八、总结本项目成功构建了一个从数据到模型的端到端情绪识别演示应用并设计了友好的交互界面。其优点包括轻量化模型小训练快适合快速验证。可移植所有代码在Kaggle Notebook中即开即用无需额外部署。直观反馈用Emoji替代复杂图片生成降低用户理解成本。