# 美味好生活

**Repository Path**: sang-jianglei/delicious-and-good-life

## Basic Information

- **Project Name**: 美味好生活
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-07
- **Last Updated**: 2025-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 美味生活 - 人脸识别登录

## 功能特性

### 人脸识别登录
- 基于 face-api.js 的实时人脸识别
- 支持用户注册和登录
- 本地存储人脸特征数据
- 实时摄像头预览

### 使用方法

1. **启动项目**
   ```bash
   npm run dev
   ```

2. **首次使用**
   - 等待模型加载完成（页面会显示"模型加载中..."）
   - 点击"启动摄像头"按钮
   - 允许浏览器访问摄像头权限

3. **注册新用户**
   - 启动摄像头后，在输入框中输入用户名
   - 将脸部对准摄像头圆圈内
   - 点击"注册新用户"按钮
   - 系统会提取人脸特征并保存

4. **人脸登录**
   - 启动摄像头后，点击"开始识别"按钮
   - 将脸部对准摄像头圆圈内
   - 系统会自动识别已注册的用户

### 技术实现

- **前端框架**: React + TypeScript
- **人脸识别**: face-api.js
- **模型文件**: 存储在 `public/weights/` 目录
- **数据存储**: localStorage

### 文件结构

```
src/
├── faceDetection.ts          # 人脸识别核心逻辑
├── LYH/
│   ├── Login.tsx            # 登录页面组件
│   └── Login.css            # 登录页面样式
public/
└── weights/                 # 人脸识别模型文件
```

### 注意事项

1. **浏览器兼容性**: 需要支持 WebRTC 的现代浏览器
2. **摄像头权限**: 首次使用需要允许摄像头访问权限
3. **模型加载**: 首次加载可能需要一些时间，请耐心等待
4. **识别精度**: 识别阈值设置为 0.5，可根据需要调整

### 开发说明

- 人脸特征数据存储在浏览器的 localStorage 中
- 模型文件较大，首次加载需要时间
- 支持实时摄像头预览和识别
- 包含完整的错误处理和用户反馈

### 故障排除

1. **摄像头无法启动**: 检查浏览器权限设置
2. **模型加载失败**: 检查网络连接和模型文件
3. **识别不准确**: 调整光线条件或重新注册
4. **页面无响应**: 刷新页面重新加载模型