# CNN_Training_View

**Repository Path**: Ryne/CNN_Training_View

## Basic Information

- **Project Name**: CNN_Training_View
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-26
- **Last Updated**: 2026-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CNN Training View

🧠 交互式卷积神经网络教学可视化平台

一个通过 3D 可视化帮助深度学习初学者理解 CNN 工作原理的项目。支持在浏览器中自定义网络架构、选择数据集、在真实 PyTorch 后端上训练，并实时观察每一层的激活变化。

## 功能特性

### 🔍 卷积层可视化
观察卷积核如何在输入特征图上滑动，理解特征提取过程。
- 可调节输入尺寸、卷积核尺寸、步长
- 动态动画展示卷积运算

### 📊 池化层动画
Max Pooling 降采样的动态演示。
- 高亮显示池化窗口内最大值位置
- 对比输入输出尺寸变化

### 🗂 数据集选择
内置 4 个经典图像分类数据集，由后端通过 `torchvision` 自动下载并缓存：
- **MNIST** — 手写数字识别 (28×28 灰度, 10 类)
- **Fashion-MNIST** — 时尚商品分类 (28×28 灰度, 10 类)
- **CIFAR-10** — 物体识别 (32×32 RGB, 10 类)
- **CIFAR-100** — 细粒度物体识别 (32×32 RGB, 100 类)

### 🧩 网络结构编辑
以可视化方式搭建自己的 CNN：
- 拖拽增删卷积层 / 池化层 / 全连接层（基于 `@dnd-kit`）
- 实时计算并展示每一层输出的 shape
- 对不合法的结构（例如通道数不匹配、尺寸缩减到 0）提前提示

### ⚡ 训练过程追踪
实时观察模型训练过程中的指标变化。
- 损失曲线和准确率曲线（`recharts`）
- 网络层激活状态 3D 可视化
- 可调节学习率、批量大小、优化器、epoch 数等超参数
- 支持按 epoch 单步训练或批量训练

### 🔮 推理面板
- 对数据集中的测试样本或用户上传图像运行推理
- 查看每一类的预测概率分布

## 技术栈

**前端:**
- React 18 + TypeScript + Vite
- Three.js + `@react-three/fiber` + `@react-three/drei` (3D 可视化)
- Zustand (状态管理)
- React Router (路由)
- `@dnd-kit` (拖拽式网络编辑)
- Recharts (训练曲线)
- Lucide React (图标)
- Vitest + Testing Library (单元测试)

**后端:**
- Python FastAPI + Uvicorn
- PyTorch (神经网络 + 多 GPU 调度)
- torchvision (数据集)
- 按 `tenant_id` 的多租户会话，支持并发训练与自动缓存回收

## 快速开始

### 环境要求

- Node.js ≥ 18
- Python ≥ 3.10
- （可选）支持 CUDA 的 GPU；若无 GPU 会自动回退到 CPU

### 一键启动 (推荐)

```bash
# 安装前端依赖 + 后端 Python 依赖，然后并行启动前后端
npm install && npm start
```

> 一键启动会同时运行:
> - 前端: http://localhost:3000
> - 后端 API: http://localhost:8000

### 独立启动

```bash
# 安装前端依赖
npm install

# 安装后端依赖
pip install -r backend/requirements.txt

# 单独启动前端 (http://localhost:3000)
npm run dev

# 单独启动后端 (http://localhost:8000)
npm run backend
```

### 运行测试

```bash
npm test              # 监听模式
npm run test:coverage # 生成覆盖率报告
npm run test:ui       # Vitest 交互式 UI
```

### 生产构建

```bash
npm run build    # tsc + vite build
npm run preview  # 本地预览生产构建
```

## API 端点

所有接口以 `http://localhost:8000` 为根地址，使用 JSON 作为交换格式，并以 `tenant_id` 区分不同会话。

| 方法 | 路径 | 说明 |
| --- | --- | --- |
| `GET` | `/api/health` | 健康检查 |
| `GET` | `/api/datasets` | 列出所有可用数据集 |
| `GET` | `/api/datasets/{name}/info` | 获取数据集描述信息 |
| `GET` | `/api/datasets/{name}/default-network` | 获取该数据集的推荐网络结构 |
| `GET` | `/api/datasets/{name}/samples` | 获取数据集样本用于可视化 |
| `POST` | `/api/model/create` | 为租户创建 CNN 模型 |
| `GET` | `/api/model/summary/{tenant_id}` | 获取当前模型结构与训练历史 |
| `DELETE` | `/api/model/{tenant_id}` | 删除租户的模型 |
| `POST` | `/api/train` | 训练一个 epoch |
| `POST` | `/api/train/batch` | 训练多个 epoch |
| `POST` | `/api/inference` | 对输入样本执行推理 |
| `GET` | `/api/gpu/stats` | 每块 GPU 的内存与负载统计 |
| `GET` | `/api/cache/stats` | 当前租户缓存统计 |
| `POST` | `/api/cache/cleanup` | 手动清理空闲租户 |

## 项目结构

```
CNN_Training_View/
├── src/
│   ├── components/            # React 组件
│   │   ├── DatasetSelector.tsx    # 数据集选择
│   │   ├── NetworkConfig.tsx      # CNN 架构编辑器
│   │   ├── TrainingPanel.tsx      # 训练控制面板
│   │   ├── InferencePanel.tsx     # 推理面板
│   │   ├── LossChart.tsx          # 损失/准确率曲线
│   │   ├── NetworkGraph.tsx       # 网络结构图
│   │   ├── Layout.tsx             # 全局布局
│   │   └── ErrorBoundary.tsx      # 错误边界
│   ├── pages/                 # 页面组件
│   │   ├── HomePage.tsx           # 首页
│   │   ├── ConvolutionPage.tsx    # 卷积层页面
│   │   ├── PoolingPage.tsx        # 池化层页面
│   │   └── TrainingPage.tsx       # 训练过程页面
│   ├── three/                 # Three.js 3D 场景
│   │   ├── ConvolutionScene.tsx
│   │   ├── PoolingScene.tsx
│   │   └── TrainingScene.tsx
│   ├── store/                 # Zustand 状态
│   │   └── cnnStore.ts
│   ├── utils/                 # 工具函数
│   │   └── layerUtils.ts
│   ├── types/                 # TypeScript 类型定义
│   └── test/                  # 单元测试
├── backend/
│   ├── main.py                # FastAPI 应用（模型、训练、推理、多租户调度）
│   ├── requirements.txt
│   └── data/                  # torchvision 数据集缓存（自动下载）
├── index.html
├── package.json
├── vite.config.ts
└── vitest.config.ts
```

## License

MIT