学生端界面 - EmotionReco

这是EmotionReco项目的学生端界面，基于Next.js 14和Tailwind CSS构建。

功能特性

• 🎥 摄像头访问和视频流显示
• 📊 实时专注度状态监测
• 🎨 现代化的响应式UI设计
• 🔒 本地数据处理，保护隐私
• ⚡ 基于Next.js的高性能架构

技术栈

• 框架: Next.js 14 (App Router)
• 样式: Tailwind CSS
• 语言: TypeScript
• UI组件: React
• 包管理: npm

开发环境设置

安装依赖

npm install

启动开发服务器

npm run dev

应用将在 http://localhost:3001 启动。

构建生产版本

npm run build
npm run start

项目结构

student-interface/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 主页面
│   └── globals.css        # 全局样式
├── components/            # React组件
│   ├── Header.tsx         # 页面头部
│   ├── CameraSection.tsx  # 摄像头区域
│   └── StatusDisplay.tsx  # 状态显示
├── package.json           # 项目配置
├── tailwind.config.js     # Tailwind配置
└── tsconfig.json          # TypeScript配置

主要组件

CameraSection

• 摄像头访问和控制
• 视频流显示
• 启动/停止功能

StatusDisplay

• 实时状态显示
• 置信度指示
• 统计信息
• 错误处理

Header

• 应用标题和描述
• 品牌标识

后续开发计划

• 集成AI检测模型
• 实现WebSocket实时通信
• 添加数据统计功能
• 优化性能和用户体验
• 添加设置和配置选项

注意事项

• 需要HTTPS环境才能访问摄像头（开发环境除外）
• 确保浏览器支持WebRTC和getUserMedia API
• 建议使用现代浏览器（Chrome、Firefox、Safari、Edge）