# 需求文档

## 1. 应用概述

### 1.1 应用名称
CNN交互式学习平台

### 1.2 应用描述
一款面向深度学习初学者的卷积神经网络（CNN）可视化交互学习平台，通过三个递进式学习任务（手写数字识别、猫狗局部识别、多动物识别），帮助用户直观理解CNN的完整流程。用户可通过交互方式逐步完成每个环节的计算过程，并实时查看程序性信息与支持性信息。完成所有任务后，用户可通过拖拽绘图方式回顾CNN整体概念。

## 2. 用户与使用场景

### 2.1 目标用户
- 深度学习初学者
- 计算机视觉课程学生
- 对CNN原理感兴趣的技术爱好者

### 2.2 核心使用场景
- 课堂教学演示CNN工作流程
- 自学者通过交互操作理解CNN各层计算逻辑
- 快速验证CNN参数变化对输出结果的影响
- 通过拖拽绘图回顾CNN整体概念结构

## 3. 页面结构与功能说明

### 3.1 整体结构
```
├── 欢迎页面（Landing Page）
│   ├── 平台标题
│   ├── 平台简介/副标题
│   └── 开始学习按钮
├── 主学习界面
│   ├── 左侧任务栏
│   │   ├── 学习任务列表（任务1:手写数字识别、任务2:猫狗局部识别、任务3:多动物识别）
│   │   └── CNN整体回顾（所有任务完成后显示）
│   ├── 右侧内容区
│   │   ├── 顶部步骤栏（步骤节点）
│   │   ├── 中间交互主区域（步骤页面/回顾画布）
│   │   ├── 底部信息区（程序性信息 + 支持性信息）
│   │   └── 教学代理角色（右下角浮动，可拖拽、可暂停）
```

### 3.2 欢迎页面（Landing Page）
**功能说明**
- 展示平台标题:CNN交互式学习平台
- 展示平台简介/副标题:通过可视化交互方式，轻松理解卷积神经网络的工作原理
- 展示开始学习按钮
- 点击开始学习按钮后，跳转至主学习界面（/learn路由）
- 页面包含CNN相关视觉元素（如网络层级示意图、动效等）
- 页面设计视觉吸引人，符合教育类应用风格

### 3.3 左侧任务栏
**功能说明**
- 展示3个学习任务选项:任务1（手写数字识别）、任务2（猫狗局部识别）、任务3（多动物识别）
- 所有任务完成后，任务栏底部显示「CNN整体回顾」选项
- 点击任务项切换激活状态，高亮显示当前任务
- 切换任务后，顶部步骤栏、中间交互区、底部信息区内容自动更新为对应任务的内容
- 点击「CNN整体回顾」后，顶部步骤栏隐藏，中间交互区显示回顾画布，底部信息区显示回顾指引
- 切换任务时，当前播放的语音自动停止

### 3.4 顶部步骤栏
**功能说明**
- 任务1步骤节点:输入层、卷积层、激活层、降采样层、全连接层、输出层（共6个）
- 任务2步骤节点:数据读取、卷积层、激活函数、池化层、特征展平、全连接层、输出层（共7个）
- 任务3步骤节点:数据读取、卷积层、激活函数、池化层、特征展平、全连接层、输出层（共7个）
- 点击步骤节点直接跳转至对应步骤
- 当前激活步骤高亮显示
- 步骤节点之间以连接线连接，形成流程图效果
- 步骤节点采用圆形图标设计，激活状态与未激活状态有明显视觉区分
- 进入「CNN整体回顾」时，步骤栏隐藏

### 3.5 教学代理角色
**功能说明**
- 位置:右下角浮动区域
- 形象设计:可爱有活力的教师形象，使用CSS/SVG/emoji实现，不依赖外部图片
- 可拖拽:用户可拖拽角色至页面任意位置，避免遮挡关键内容
- 语音控制:点击角色可暂停/继续当前播放的语音讲解
- 状态显示:
  + 播放中:角色呈现讲话动画效果
  + 暂停中:角色呈现静止状态
  + 无语音:角色呈现默认状态
- 切换步骤或任务时，当前播放的语音自动停止，角色恢复默认状态

### 3.6 中间交互主区域

#### 3.6.1 任务1:手写数字识别

##### 3.6.1.1 步骤1:输入层
**功能说明**
- 展示手写画板（200×200黑色背景）
- 用户可在画板上手写数字（白色笔迹）
- 画板下方提供矩阵尺寸选择器:
  + 可选4×4或8×8（默认8×8）
  + 选择后影响后续所有步骤的矩阵尺寸
- 画板下方提供控制按钮:
  + 清除画板:清空当前手写内容
  + 识别数字:将手写内容转换为像素矩阵
- 点击识别数字后，右侧展示像素矩阵（尺寸根据选择器设置为4×4或8×8，每个格子显示灰度值-1.0至1.0）
- 像素矩阵显示需与手写数字的形状和位置精确匹配，确保识别准确性
- 像素矩阵可点击单个格子查看具体数值
- 提示文案:选择矩阵尺寸，在画板上手写一个数字（0-9），点击识别数字按钮生成像素矩阵

**语音讲解**
- 触发时机:用户点击识别数字按钮后，像素矩阵生成完毕时自动播放
- 讲解内容:手写数字已转换为像素矩阵，每个格子代表该位置的灰度值，-1为黑色，1为白色，中间值代表不同的灰度
- 时长:不超过8秒

##### 3.6.1.2 步骤2:卷积层
**功能说明**
- 展示三联结构:Input（输入矩阵）→ Kernel（卷积核）→ Output（输出特征图），三个方块横向排列在一条线上，完整显示
- Input区域:
  + 网格显示，尺寸根据步骤1选择的矩阵尺寸（4×4或8×8），每个格子显示灰度值
  + 鼠标悬停时，对应卷积核覆盖区域高亮显示
  + 当前卷积核覆盖区域以黄色边框标识
- Kernel区域:
  + 显示卷积核权重矩阵
  + 每个权重值以数字形式展示
  + 卷积核尺寸根据参数设置动态调整
  + 权重编辑功能:
    * 点击权重值进入编辑模式
    * 输入框显示当前权重值
    * 输入新值后按回车或点击确认按钮保存
    * 权重值范围:-1.0至1.0，保留2位小数
    * 编辑后自动重新计算输出结果
  + 快捷操作按钮:
    * 重置权重:恢复卷积核默认权重
    * 随机权重:生成随机权重值
- Output区域:
  + 网格显示卷积计算结果
  + 当前计算位置高亮显示
  + 鼠标悬停可查看具体数值
- 参数控制面板:
  + 卷积核大小:可选3×3、5×5（默认3×3）
  + 步长（Stride）:可选1、2（默认1）
  + 填充（Padding）:可选0、1（默认0）
  + 参数调整后，自动重新计算输出尺寸并更新Output区域
- 交互控制:
  + 播放按钮:自动演示卷积核在输入上滑动的完整过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置卷积核位置至起始点
  + 速度滑块:调整自动演示速度（慢速/中速/快速）
  + 手动计算模式按钮:切换至手动计算模式
- 手动计算模式:
  + 点击手动计算模式按钮后，进入手动计算流程
  + 系统展示当前卷积核位置覆盖的输入区域值与卷积核权重值
  + 在Output区域对应位置显示输入框，等待用户填写计算结果
  + 用户需手动计算:输入区域值 × 卷积核权重，并将所有乘积求和
  + 用户在输入框中填写计算结果后，点击提交按钮
  + 系统自动校验答案:
    * 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（完整计算式子），卷积核自动移动至下一位置
    * 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程（完整计算式子），用户可重新填写或点击下一步继续
  + 完成所有位置的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
  + 手动计算模式下，可随时点击退出手动计算按钮返回自动演示模式
- 实时显示:
  + 当前卷积核位置坐标
  + 当前计算过程（输入区域值 × 卷积核权重 = 输出值）
  + 输出尺寸:O = (I - K + 2P) / S + 1
  + 计算公式展示区域
- 卷积核可通过拖拽或点击Input区域直接定位
- 每次移动后，Output区域对应格子高亮，显示计算结果

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:卷积核在输入矩阵上滑动，每次覆盖一个区域，将区域内的值与卷积核权重相乘后求和，得到输出特征图中的一个值。卷积核越大，提取的特征范围越广，可以捕捉更复杂的模式
- 时长:不超过8秒

**语音错误提示**
- 触发时机:手动计算模式下，用户提交错误答案时播放
- 提示内容:计算错误，请重新检查
- 时长:不超过3秒

##### 3.6.1.3 步骤3:激活层
**功能说明**
- 展示激活前后对比:Input（卷积层输出）→ Output（ReLU激活后输出）
- Input区域:
  + 网格显示卷积层的输出，每个格子显示数值
- Output区域:
  + 网格显示ReLU激活后的结果，每个格子显示数值
  + 负值变为0，正值保持不变
- 交互控制:
  + 播放按钮:自动演示激活过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置激活状态
  + 速度滑块:调整演示速度
  + 手动计算模式按钮:切换至手动计算模式
- 手动计算模式:
  + 点击手动计算模式按钮后，进入手动计算流程
  + 系统展示Input区域的当前元素值
  + 在Output区域对应位置显示输入框，等待用户填写激活后的结果
  + 用户需手动计算:对当前元素值应用ReLU函数，即max(0,x)
  + 用户在输入框中填写计算结果后，点击提交按钮
  + 系统自动校验答案:
    * 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（如:-0.5 → max(0,-0.5) = 0），自动移动至下一元素
    * 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程，用户可重新填写或点击下一步继续
  + 完成所有元素的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
  + 手动计算模式下，可随时点击退出手动计算按钮返回自动演示模式
- 实时显示激活计算过程（如:-0.5 → 0，0.8 → 0.8）
- 提示文案:ReLU激活函数对每个元素取max(0,x)，引入非线性

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:ReLU激活函数将所有负值变为0，正值保持不变，这样为神经网络引入非线性特性，使模型能够学习和表达复杂的非线性关系
- 时长:不超过8秒

**语音错误提示**
- 触发时机:手动计算模式下，用户提交错误答案时播放
- 提示内容:激活计算错误，请重新检查
- 时长:不超过3秒

##### 3.6.1.4 步骤4:降采样层
**功能说明**
- 展示池化前后对比:Input（激活层输出）→ Output（池化后输出）
- Input区域:
  + 网格显示激活层的输出
  + 2×2池化区域以虚线框标识
  + 每个格子显示数值
  + 鼠标悬停可查看当前2×2区域的所有值
- Output区域:
  + 网格显示池化后的结果
  + 当前计算位置高亮
- 交互控制:
  + 播放按钮:自动演示池化过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置池化状态
  + 速度滑块:调整演示速度
  + 手动计算模式按钮:切换至手动计算模式
- 手动计算模式:
  + 点击手动计算模式按钮后，进入手动计算流程
  + 系统展示当前2×2池化区域的所有值
  + 在Output区域对应位置显示输入框，等待用户填写池化结果
  + 用户需手动计算:从当前2×2区域中找出最大值
  + 用户在输入框中填写计算结果后，点击提交按钮
  + 系统自动校验答案:
    * 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（如:[0.1,0.9,0.7,0.3] → max = 0.9），自动移动至下一区域
    * 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程，用户可重新填写或点击下一步继续
  + 完成所有区域的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
  + 手动计算模式下，可随时点击退出手动计算按钮返回自动演示模式
- 点击Input区域的2×2区块，标记最大值（绿色背景+绿色边框）
- 系统自动计算当前2×2区块的最大值，并更新Output区域对应位置
- 实时显示池化计算过程（如:[0.1,0.9,0.7,0.3] → 0.9）
- 快捷按钮:
  + 一键完成池化:自动标记所有区块的最大值
  + 重置池化状态:清除所有标记
- 提示文案:点击每个2×2区域的最大值，完成最大池化
- 维度说明:显示池化前后的维度变化

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:最大池化从每个2×2区域中选取最大值作为输出，这样可以降低特征图的尺寸，保留最显著的特征，同时减少计算量和参数数量
- 时长:不超过8秒

**语音错误提示**
- 触发时机:手动计算模式下，用户提交错误答案时播放
- 提示内容:池化计算错误，请重新检查
- 时长:不超过3秒

##### 3.6.1.5 步骤5:全连接层
**功能说明**
- 展示特征展平与全连接结构:二维特征图 → 一维向量 → 全连接节点
- 二维特征图:网格显示降采样层输出，每个格子显示序号
- 一维向量:横向排列，完整显示所有元素，体现展平成一维的效果
- 全连接节点:若干个圆形节点，垂直排列
- 点击二维特征图的格子，格子变为绿色背景，一维向量对应位置高亮（紫色背景）
- 连接线:一维向量与全连接节点之间的灰色细线（部分连线）
- 实时显示当前点击进度（如:当前点击:20/总数）
- 快捷按钮:
  + 一键完成展平:自动按行优先顺序点击所有格子（带动画效果）
  + 重置展平状态:清除所有点击状态
- 提示文案:按从左到右、从上到下顺序点击，完成特征展平
- 展平顺序说明:行优先（从上到下，从左到右）
- CNN层级连线拖拽组件:
  + 展示CNN各层级结构图（输入层、卷积层、激活层、池化层、展平层、全连接层、输出层）
  + 各层级以方块形式展示，垂直排列
  + 用户可拖拽连线箭头，将各层级按正确顺序连接
  + 连线正确时，箭头变为绿色，连线错误时，箭头变为红色
  + 完成所有连线后，显示完成提示
  + 提供重置按钮，清除所有连线

**语音讲解**
- 触发时机:用户点击一键完成展平按钮，展平动画播放完毕后自动播放
- 讲解内容:二维特征图按行优先顺序展平成一维向量，然后与全连接层的神经元相连，为最终的分类任务做准备
- 时长:不超过8秒

##### 3.6.1.6 步骤6:输出层
**功能说明**
- 展示识别结果:输入节点（全连接层输出）→ 连接线 → 输出节点（10个数字0-9）
- 内容大小适配整个画面，不需要上下滑动即可显示完全
- 输入节点:若干个灰色圆形节点，垂直排列，完整显示所有节点
- 输出节点:10个彩色圆形节点，垂直排列，显示数字0-9（每个数字不同颜色）
- 连接线:输入输出节点之间的灰色细线（部分连线，避免过密）
- 交互逻辑:
  + 点击输入节点:切换选中状态（蓝色高亮+放大），可多选
  + 点击输出节点:切换选中状态（对应颜色高亮+放大），单选
  + 选中节点后，对应连接线高亮（蓝色加粗）
- 匹配度计算:
  + 公式:（选中特征数/总特征数）×（数字匹配分/最高分）× 100%
  + 实时显示匹配度、选中特征数、数字匹配分
- 识别结果:
  + 匹配度≥50%:显示选中的数字（带脉冲动画）
  + 匹配度<50%:显示「未识别」
- 数字匹配分数条:
  + 展示10个数字的匹配分（根据手写输入自动计算）
  + 进度条+滑块+数值显示
  + 手写数字对应的分数最高
- 匹配成功原因说明:
  + 在识别结果下方展示匹配成功原因说明卡片
  + 卡片内容:全连接层将提取的特征与每个数字的特征模板进行匹配，计算相似度。选中的特征越多，且与目标数字的特征模板越接近，匹配度越高。当匹配度达到50%以上时，系统判定识别成功
  + 卡片可折叠，默认展开
- 提示文案:点击左侧特征节点和右侧数字节点进行匹配，系统会计算匹配度并显示识别结果
- 标签说明:输入节点（全连接层特征）、输出节点（数字0-9）

**语音讲解**
- 触发时机:识别结果首次显示时（匹配度≥50%且显示数字时）自动播放
- 讲解内容:全连接层将提取的特征映射到10个输出节点，每个节点代表一个数字类别。通过计算特征与各数字模板的相似度，匹配度最高的数字就是最终的识别结果
- 时长:不超过8秒

#### 3.6.2 任务2:猫狗局部识别

##### 3.6.2.1 步骤1:数据读取
**功能说明**
- 展示局部图像加载区域（图像尺寸不超过200×200）
- 用户可选择预设的猫或狗的同一局部图像（如耳朵、眼睛等）
- 图像加载后，右侧展示像素矩阵（统一尺寸为8×8，每个格子显示归一化后的像素值-1.0至1.0）
- 像素矩阵可点击单个格子查看具体数值
- 提示文案:选择一张猫或狗的局部图像，系统将自动归一化为8×8像素矩阵

**语音讲解**
- 触发时机:用户选择图像后，像素矩阵生成完毕时自动播放
- 讲解内容:图像已转换为8×8像素矩阵，每个格子代表归一化后的像素值，范围在-1到1之间，便于神经网络处理
- 时长:不超过8秒

##### 3.6.2.2 步骤2:卷积层
**功能说明**
- 展示三联结构:Input（8×8输入）→ Kernel（卷积核）→ Output（输出特征图），三个方块横向排列在一条线上，完整显示
- Input区域:
  + 8×8网格显示，每个格子显示归一化像素值
  + 鼠标悬停时，对应卷积核覆盖区域高亮显示
  + 当前卷积核覆盖区域以黄色边框标识
- Kernel区域:
  + 显示卷积核权重矩阵
  + 每个权重值以数字形式展示
  + 卷积核尺寸根据参数设置动态调整
  + 权重编辑功能:
    * 点击权重值进入编辑模式
    * 输入框显示当前权重值
    * 输入新值后按回车或点击确认按钮保存
    * 权重值范围:-1.0至1.0，保留2位小数
    * 编辑后自动重新计算输出结果
  + 快捷操作按钮:
    * 重置权重:恢复卷积核默认权重
    * 随机权重:生成随机权重值
- Output区域:
  + 网格显示卷积计算结果
  + 当前计算位置高亮显示
  + 鼠标悬停可查看具体数值
- 参数控制面板:
  + 卷积核大小:可选3×3、5×5（默认3×3）
  + 步长（Stride）:可选1、2（默认1）
  + 填充（Padding）:可选0、1（默认0）
  + 参数调整后，自动重新计算输出尺寸并更新Output区域
- 交互控制:
  + 播放按钮:自动演示卷积核在输入上滑动的完整过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置卷积核位置至起始点
  + 速度滑块:调整自动演示速度（慢速/中速/快速）
- 实时显示:
  + 当前卷积核位置坐标
  + 当前计算过程（输入区域值 × 卷积核权重 = 输出值）
  + 输出尺寸:O = (I - K + 2P) / S + 1
  + 计算公式展示区域
- 卷积核可通过拖拽或点击Input区域直接定位
- 每次移动后，Output区域对应格子高亮，显示计算结果

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:卷积核在输入图像上滑动，提取局部特征。每次卷积操作将输入区域与卷积核权重相乘求和，得到输出特征图中的一个值，这些特征用于后续的分类任务
- 时长:不超过8秒

##### 3.6.2.3 步骤3:激活函数
**功能说明**
- 展示激活前后对比:Input（卷积层输出）→ Output（ReLU激活后输出）
- Input区域:
  + 网格显示卷积层的输出，每个格子显示数值
- Output区域:
  + 网格显示ReLU激活后的结果，每个格子显示数值
  + 负值变为0，正值保持不变
- 交互控制:
  + 播放按钮:自动演示激活过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置激活状态
  + 速度滑块:调整演示速度
  + 手动计算模式按钮:切换至手动计算模式
- 手动计算模式:
  + 点击手动计算模式按钮后，进入手动计算流程
  + 系统展示Input区域的当前元素值
  + 在Output区域对应位置显示输入框，等待用户填写激活后的结果
  + 用户需手动计算:对当前元素值应用ReLU函数，即max(0,x)
  + 用户在输入框中填写计算结果后，点击提交按钮
  + 系统自动校验答案:
    * 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（如:-0.5 → max(0,-0.5) = 0），自动移动至下一元素
    * 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程，用户可重新填写或点击下一步继续
  + 完成所有元素的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
  + 手动计算模式下，可随时点击退出手动计算按钮返回自动演示模式
- 实时显示激活计算过程（如:-0.5 → 0，0.8 → 0.8）
- 提示文案:ReLU激活函数对每个元素取max(0,x)，引入非线性

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:ReLU激活函数将所有负值变为0，正值保持不变，这样为神经网络引入非线性特性，使模型能够学习和表达复杂的非线性关系
- 时长:不超过8秒

**语音错误提示**
- 触发时机:手动计算模式下，用户提交错误答案时播放
- 提示内容:激活计算错误，请重新检查
- 时长:不超过3秒

##### 3.6.2.4 步骤4:池化层
**功能说明**
- 展示池化前后对比:Input（激活层输出）→ Output（池化后输出）
- Input区域:
  + 网格显示激活层的输出
  + 2×2池化区域以虚线框标识
  + 每个格子显示数值
  + 鼠标悬停可查看当前2×2区域的所有值
- Output区域:
  + 网格显示池化后的结果
  + 当前计算位置高亮
- 交互控制:
  + 播放按钮:自动演示池化过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置池化状态
  + 速度滑块:调整演示速度
- 点击Input区域的2×2区块，标记最大值（绿色背景+绿色边框）
- 系统自动计算当前2×2区块的最大值，并更新Output区域对应位置
- 实时显示池化计算过程
- 快捷按钮:
  + 一键完成池化:自动标记所有区块的最大值
  + 重置池化状态:清除所有标记
- 提示文案:使用2×2窗口，步幅2，输出维度减半
- 维度说明:显示池化前后的维度变化

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:最大池化从每个2×2区域中选取最大值作为输出，这样可以降低特征图的尺寸，保留最关键的特征，同时减少计算量
- 时长:不超过8秒

##### 3.6.2.5 步骤5:特征展平
**功能说明**
- 展示特征展平结构:二维特征图 → 一维向量
- 二维特征图:网格显示池化层输出，每个格子显示序号
- 一维向量:横向排列，完整显示所有元素，体现展平成一维的效果
- 点击二维特征图的格子，格子变为绿色背景，一维向量对应位置高亮（紫色背景）
- 实时显示当前点击进度
- 快捷按钮:
  + 一键完成展平:自动按行优先顺序点击所有格子（带动画效果）
  + 重置展平状态:清除所有点击状态
- 提示文案:按从左到右、从上到下顺序点击，完成特征展平
- 展平顺序说明:行优先（从上到下，从左到右）

**语音讲解**
- 触发时机:用户点击一键完成展平按钮，展平动画播放完毕后自动播放
- 讲解内容:二维特征图按行优先顺序展平成一维向量，为全连接层的分类任务做准备
- 时长:不超过8秒

##### 3.6.2.6 步骤6:全连接层
**功能说明**
- 展示全连接结构:一维向量 → 全连接节点（2个神经元:Cat、Dog）
- 一维向量:横向排列，完整显示所有元素
- 全连接节点:2个圆形节点，垂直排列，分别标注Cat、Dog
- 连接线:一维向量与全连接节点之间的灰色细线（部分连线）
- 交互逻辑:
  + 点击一维向量元素:切换选中状态（蓝色高亮），可多选
  + 点击全连接节点:切换选中状态（对应颜色高亮），单选
  + 选中节点后，对应连接线高亮（蓝色加粗）
- 实时显示选中特征数

##### 3.6.2.7 步骤7:输出层
**功能说明**
- 展示识别结果:全连接节点（Cat、Dog）→ Softmax概率输出
- 全连接节点:2个彩色圆形节点，垂直排列，分别标注Cat、Dog
- 概率输出:
  + 展示Cat、Dog的概率值（进度条+数值显示）
  + 概率值之和为100%
  + 概率大的即为预测结果
- 识别结果:
  + 显示预测类别（Cat或Dog）
  + 带脉冲动画效果
- 匹配成功原因说明:
  + 在识别结果下方展示匹配成功原因说明卡片
  + 卡片内容:全连接层将提取的特征与Cat、Dog的特征模板进行匹配，计算相似度。Softmax函数将输出转换为概率分布，概率最高的类别就是预测结果
  + 卡片可折叠，默认展开
- 提示文案:Softmax计算两个概率值，概率大的即为预测结果

**语音讲解**
- 触发时机:识别结果首次显示时（概率计算完成并显示预测类别时）自动播放
- 讲解内容:Softmax函数将全连接层的输出转换为概率分布，通过计算特征与Cat、Dog类别模板的相似度，概率最高的类别就是模型的预测结果
- 时长:不超过8秒

#### 3.6.3 任务3:多动物识别

##### 3.6.3.1 步骤1:数据读取
**功能说明**
- 展示图像加载区域（图像尺寸不超过200×200）
- 用户可上传或选择预设的动物图像（猫、狗、鸟、鹿等）
- 图像加载后，右侧展示像素矩阵（统一尺寸为8×8，每个格子显示标准化后的像素值-1.0至1.0）
- 像素矩阵可点击单个格子查看具体数值
- 提示文案:上传或选择一张动物图像，系统将自动标准化为8×8像素矩阵

**语音讲解**
- 触发时机:用户上传或选择图像后，像素矩阵生成完毕时自动播放
- 讲解内容:动物图像已转换为8×8像素矩阵，每个格子代表标准化后的像素值，范围在-1到1之间，便于神经网络处理
- 时长:不超过8秒

##### 3.6.3.2 步骤2:卷积层
**功能说明**
- 图像/可视化区域自适应扩大，确保用户可清晰查看卷积操作细节
- 展示三联结构:Input（8×8输入）→ Kernel（卷积核）→ Output（输出特征图），三个方块横向排列在一条线上，完整显示
- Input区域:
  + 8×8网格显示，每个格子显示标准化像素值
  + 鼠标悬停时，对应卷积核覆盖区域高亮显示
  + 当前卷积核覆盖区域以黄色边框标识
- Kernel区域:
  + 显示卷积核权重矩阵
  + 每个权重值以数字形式展示
  + 卷积核尺寸根据参数设置动态调整
  + 每个卷积核类型提供浮动窗口说明:
    * 鼠标悬停在卷积核上时，显示浮动窗口
    * 浮动窗口内容包括:卷积核类型名称、作用说明、适用场景
    * 示例:边缘检测卷积核（用于检测图像中的边缘特征，适用于识别物体轮廓）、模糊卷积核（用于平滑图像，减少噪声）等
  + 权重编辑功能:
    * 点击权重值进入编辑模式
    * 输入框显示当前权重值
    * 输入新值后按回车或点击确认按钮保存
    * 权重值范围:-1.0至1.0，保留2位小数
    * 编辑后自动重新计算输出结果
  + 快捷操作按钮:
    * 重置权重:恢复卷积核默认权重
    * 随机权重:生成随机权重值
- Output区域:
  + 网格显示卷积计算结果
  + 当前计算位置高亮显示
  + 鼠标悬停可查看具体数值
- 参数控制面板:
  + 卷积核大小:可选3×3、5×5（默认3×3）
  + 步长（Stride）:可选1、2（默认1）
  + 填充（Padding）:可选0、1（默认0）
  + 参数调整后，自动重新计算输出尺寸并更新Output区域
- 交互控制:
  + 播放按钮:自动演示卷积核在输入上滑动的完整过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置卷积核位置至起始点
  + 速度滑块:调整自动演示速度（慢速/中速/快速）
- 实时显示:
  + 当前卷积核位置坐标
  + 当前计算过程（输入区域值 × 卷积核权重 = 输出值）
  + 输出尺寸:O = (I - K + 2P) / S + 1
  + 计算公式展示区域
- 卷积核可通过拖拽或点击Input区域直接定位
- 每次移动后，Output区域对应格子高亮，显示计算结果
- 前置知识说明:
  + 在卷积层展示区域上方，提供前置知识说明卡片
  + 卡片内容:不同卷积核类型会提取不同的特征，例如边缘检测卷积核提取边缘信息，模糊卷积核平滑图像，锐化卷积核增强细节。选择合适的卷积核类型可以提高模型对特定特征的识别能力，从而影响最终的分类结果
  + 卡片可折叠，默认展开

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:卷积核在输入图像上滑动，提取局部特征。不同类型的卷积核可以提取不同的特征，如边缘、纹理等，这些特征对于识别不同的动物类别非常重要
- 时长:不超过8秒

##### 3.6.3.3 步骤3:激活函数
**功能说明**
- 展示激活前后对比:Input（卷积层输出）→ Output（ReLU激活后输出）
- Input区域:
  + 网格显示卷积层的输出，每个格子显示数值
- Output区域:
  + 网格显示ReLU激活后的结果，每个格子显示数值
  + 负值变为0，正值保持不变
- 实时显示激活计算过程（如:-0.5 → 0，0.8 → 0.8）
- 提示文案:ReLU激活函数对每个元素取max(0,x)，引入非线性

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:ReLU激活函数将所有负值变为0，正值保持不变，这样为神经网络引入非线性特性，使模型能够学习和表达复杂的非线性关系
- 时长:不超过8秒

##### 3.6.3.4 步骤4:池化层
**功能说明**
- 展示池化前后对比:Input（激活层输出）→ Output（池化后输出）
- Input区域:
  + 网格显示激活层的输出
  + 2×2池化区域以虚线框标识
  + 每个格子显示数值
  + 鼠标悬停可查看当前2×2区域的所有值
- Output区域:
  + 网格显示池化后的结果
  + 当前计算位置高亮
- 交互控制:
  + 播放按钮:自动演示池化过程
  + 暂停按钮:暂停自动演示
  + 重置按钮:重置池化状态
  + 速度滑块:调整演示速度
- 点击Input区域的2×2区块，标记最大值（绿色背景+绿色边框）
- 系统自动计算当前2×2区块的最大值，并更新Output区域对应位置
- 实时显示池化计算过程
- 快捷按钮:
  + 一键完成池化:自动标记所有区块的最大值
  + 重置池化状态:清除所有标记
- 提示文案:使用2×2窗口，步幅2，输出维度减半
- 维度说明:显示池化前后的维度变化

**语音讲解**
- 触发时机:用户首次点击播放按钮开始自动演示时播放
- 讲解内容:最大池化从每个2×2区域中选取最大值作为输出，这样可以降低特征图的尺寸，保留最关键的特征，同时减少计算量
- 时长:不超过8秒

##### 3.6.3.5 步骤5:特征展平
**功能说明**
- 展示特征展平结构:二维特征图 → 一维向量
- 二维特征图:网格显示池化层输出，每个格子显示序号
- 一维向量:横向排列，完整显示所有元素，体现展平成一维的效果
- 手动展平模式:
  + 点击手动展平模式按钮后，进入手动展平流程
  + 系统提示用户按行优先顺序（从上到下，从左到右）点击二维特征图的格子
  + 用户点击格子后，格子变为绿色背景，一维向量对应位置高亮（紫色背景）
  + 系统自动校验点击顺序:
    * 顺序正确:格子保持绿色背景，一维向量对应位置保持紫色高亮，继续等待下一个点击
    * 顺序错误:格子变为红色背景，播放语音错误提示，提示用户重新点击正确的格子
  + 实时显示当前点击进度（如:当前点击:5/总数）
  + 完成所有格子的点击后，显示完成提示，可点击查看完整结果按钮查看一维向量的完整展平结果
  + 手动展平模式下，可随时点击退出手动展平按钮返回自动模式
- 快捷按钮:
  + 一键完成展平:自动按行优先顺序点击所有格子（带动画效果）
  + 重置展平状态:清除所有点击状态
- 提示文案:按从左到右、从上到下顺序点击，完成特征展平
- 展平顺序说明:行优先（从上到下，从左到右）

**语音讲解**
- 触发时机:用户点击一键完成展平按钮，展平动画播放完毕后自动播放
- 讲解内容:二维特征图按行优先顺序展平成一维向量，为全连接层的分类任务做准备
- 时长:不超过8秒

**语音错误提示**
- 触发时机:手动展平模式下，用户点击顺序错误时播放
- 提示内容:展平顺序错误，请按行优先顺序点击
- 时长:不超过3秒

##### 3.6.3.6 步骤6:全连接层
**功能说明**
- 展示全连接结构:一维向量 → 全连接节点（10个神经元，对应10类动物）
- 一维向量:横向排列，完整显示所有元素
- 全连接节点:10个圆形节点，垂直排列，分别标注10类动物名称
- 连接线:一维向量与全连接节点之间的灰色细线（部分连线）
- 交互逻辑:
  + 点击一维向量元素:切换选中状态（蓝色高亮），可多选
  + 点击全连接节点:切换选中状态（对应颜色高亮），单选
  + 选中节点后，对应连接线高亮（蓝色加粗）
- 实时显示选中特征数

##### 3.6.3.7 步骤7:输出层
**功能说明**
- 展示识别结果:全连接节点（10类动物）→ Softmax概率输出
- 全连接节点:10个彩色圆形节点，垂直排列，分别标注10类动物名称
- 概率输出:
  + 展示10类动物的概率值（进度条+数值显示）
  + 概率值之和为100%
  + 概率大的即为预测结果
- 识别结果:
  + 显示预测类别（动物名称）
  + 带脉冲动画效果
- 匹配成功原因说明:
  + 在识别结果下方展示匹配成功原因说明卡片
  + 卡片内容:全连接层将提取的特征与10类动物的特征模板进行匹配，计算相似度。Softmax函数将输出转换为概率分布，概率最高的类别就是预测结果
  + 卡片可折叠，默认展开
- 提示文案:Softmax计算10类概率，概率大的即为预测结果

**语音讲解**
- 触发时机:识别结果首次显示时（概率计算完成并显示预测类别时）自动播放
- 讲解内容:Softmax函数将全连接层的输出转换为概率分布，通过计算特征与10类动物模板的相似度，概率最高的类别就是模型的预测结果
- 时长:不超过8秒

#### 3.6.4 CNN整体回顾

**功能说明**
- 所有任务完成后，左侧任务栏底部显示「CNN整体回顾」选项
- 点击「CNN整体回顾」后，进入回顾画布
- 回顾画布分为两个区域:节点池（左侧）、画布区域（右侧）
- 节点池:
  + 展示CNN各层级的关键概念节点（输入层、卷积层、激活层、池化层、展平层、全连接层、输出层、步长、填充等）
  + 每个节点以文字方块形式展示
  + 节点可拖拽至画布区域
- 画布区域:
  + 用户可将节点池中的节点拖拽至画布区域
  + 用户可在画布区域自由摆放节点位置
  + 用户可通过拖拽连线箭头，将节点按逻辑/因果关系连接
  + 连线箭头起点为节点边缘，终点为另一节点边缘
  + 连线正确时，箭头变为绿色
  + 连线错误时，箭头变为红色
  + 用户可删除已连接的箭头
- 参考答案:
  + 完整CNN流程图连线说明:
    * 输入层 → 卷积层
    * 卷积层 → 激活层
    * 激活层 → 池化层
    * 池化层 → 展平层
    * 展平层 → 全连接层
    * 全连接层 → 输出层
    * 步长 → 卷积层（步长是卷积层的参数）
    * 填充 → 卷积层（填充是卷积层的参数）
  + 用户可点击查看参考答案按钮，展开完整连线说明
- 交互控制:
  + 重置按钮:清除画布区域所有节点和连线，恢复初始状态
  + 提交按钮:提交当前构建的概念图，系统自动校验连线正确性
  + 查看参考答案按钮:展开完整连线说明
  + 校验结果:显示正确连线数量、错误连线数量、完成度百分比
- 提示文案:拖拽节点至画布区域，通过连线箭头构建CNN的逻辑/因果图，回顾整体学习过程
- 底部信息区:
  + 程序性信息:展示拖拽绘图的操作指引
  + 支持性信息:展示CNN整体流程的原理说明

### 3.7 底部信息区
**功能说明**
- 左侧卡片:程序性信息（怎么做）
  + 展示当前步骤的操作指引
  + 内容随任务与步骤切换自动更新
- 右侧卡片:支持性信息（为什么）
  + 展示当前步骤的原理说明
  + 内容随任务与步骤切换自动更新
- 信息区固定高度160px，内容过多时垂直滚动

### 3.8 全局UI色彩与形状优化
**功能说明**
- 色彩方案:采用现代、有教育感的配色，提升视觉美感与情感效价
- 圆角设计:卡片、按钮、输入框等元素采用圆角设计，增强亲和力
- 卡片阴影:卡片元素添加阴影效果，增强层次感
- 渐变效果:适当使用渐变色，提升视觉吸引力
- 布局结构:保持侧边栏+步骤栏+主内容区+信息区的整体布局不变

### 3.9 字体自适应规则
**功能说明**
- 全站字体大小根据页面宽度自适应调整
- 页面宽度增加时，字体相应放大
- 页面宽度减少时，字体相应缩小
- 字体大小调整范围:最小12px，最大20px
- 字体调整需保持页面布局协调，避免文字溢出或过度拥挤

### 3.10 路由说明
- 根路径（/）:欢迎页面
- 主学习界面路径（/learn）:CNN主学习界面

## 4. 业务规则与逻辑

### 4.1 欢迎页面跳转规则
- 点击开始学习按钮后，跳转至主学习界面（/learn路由）
- 跳转后自动进入任务1的第一个步骤

### 4.2 任务切换规则
- 任务范围:任务1、任务2、任务3、CNN整体回顾
- 切换方式:点击左侧任务栏的任务项
- 切换后自动重置当前任务的所有步骤状态
- 切换后自动跳转至当前任务的第一个步骤
- 切换后自动滚动至页面顶部
- 切换任务时，当前播放的语音自动停止
- 进入「CNN整体回顾」时，顶部步骤栏隐藏，中间交互区显示回顾画布

### 4.3 步骤切换规则
- 任务1步骤范围:1-6
- 任务2步骤范围:1-7
- 任务3步骤范围:1-7
- 切换方式:点击顶部步骤栏的步骤节点
- 切换后自动滚动至页面顶部
- 步骤切换时保存当前步骤的交互状态
- 切换步骤时，当前播放的语音自动停止

### 4.4 语音讲解规则
- 语音讲解时长不超过8秒
- 语音讲解在关键位置触发，具体触发时机见各步骤功能说明中的语音讲解部分
- 语音讲解内容需与当前步骤的功能与原理相匹配
- 语音播放期间，用户可正常进行交互操作
- 语音播放完毕后自动停止，不循环播放
- 语音风格要求:贴近人声，语速适中偏快，表达自然流畅，避免过于机械的AI语音效果
- 语音讲解播放过程中切换步骤，当前语音自动停止，进入新步骤后根据触发时机决定是否播放新步骤的语音讲解
- 语音讲解播放过程中切换任务，当前语音自动停止，进入新任务后根据触发时机决定是否播放新任务第一个步骤的语音讲解
- 语音讲解内容突出重点，减少冗余表达，直接说明核心概念与作用

### 4.5 语音错误提示规则
- 触发时机:手动计算模式或手动展平模式下，用户提交错误答案或点击顺序错误时播放
- 提示内容:根据错误类型播放对应提示（如:计算错误，请重新检查；池化计算错误，请重新检查；激活计算错误，请重新检查；展平顺序错误，请按行优先顺序点击）
- 时长:不超过3秒
- 语音风格:简洁明确，语速适中

### 4.6 教学代理角色规则
- 位置:右下角浮动区域，可拖拽至页面任意位置
- 拖拽功能:用户可按住角色拖拽，释放后固定在新位置
- 语音控制:点击角色可暂停或继续当前播放的语音讲解
- 状态显示:
  + 播放中:角色呈现讲话动画效果
  + 暂停中:角色呈现静止状态
  + 无语音:角色呈现默认状态
- 切换步骤或任务时，当前播放的语音自动停止，角色恢复默认状态

### 4.7 手写输入规则（任务1）
- 画板尺寸:200×200像素
- 笔迹颜色:白色
- 背景颜色:黑色
- 矩阵尺寸选择:4×4或8×8（默认8×8）
- 识别后转换为对应尺寸的像素矩阵
- 每个像素值范围:-1.0至1.0（-1.0为黑色，1.0为白色）
- 矩阵尺寸选择后，影响后续所有步骤的矩阵尺寸
- 像素值归一化规则:确保输出包含正值与负值，避免所有值均为正值
- 像素矩阵显示需与手写数字的形状和位置精确匹配，确保识别准确性

### 4.8 图像加载规则（任务2、任务3）
- 任务2图像尺寸:不超过200×200像素
- 任务2图像类型:猫或狗的同一局部（如耳朵、眼睛等）
- 任务2图像加载后统一转换为8×8像素矩阵
- 任务3图像尺寸:不超过200×200像素
- 任务3图像加载后统一转换为8×8像素矩阵
- 每个像素值归一化或标准化至[-1,1]范围
- 像素值归一化规则:确保输出包含正值与负值，避免所有值均为正值

### 4.9 卷积层参数规则（任务1、任务2、任务3）
- 任务1卷积核大小:3×3或5×5
- 任务2、任务3卷积核大小:3×3或5×5
- 步长:1或2
- 填充:0或1
- 参数调整后，自动重新计算输出尺寸:O = (I - K + 2P) / S + 1
- 卷积核移动边界限制:根据输入尺寸、卷积核大小、步长、填充计算有效移动范围
- 自动演示模式:
  + 卷积核按步长从左到右、从上到下依次滑动
  + 每次移动后暂停显示计算过程
  + 可通过速度滑块调整演示速度
- 手动模式（仅任务1）:
  + 可通过拖拽或点击Input区域直接定位卷积核
  + 每次定位后自动更新计算过程和输出结果

### 4.10 卷积核权重编辑规则（任务1、任务2、任务3）
- 权重值范围:-1.0至1.0
- 权重值保留2位小数
- 编辑方式:点击权重值进入编辑模式，输入新值后按回车或点击确认保存
- 编辑后立即重新计算输出结果，更新Output区域显示
- 重置权重:恢复卷积核默认权重值
- 随机权重:在-1.0至1.0范围内生成随机权重值
- 权重编辑不影响卷积核大小、步长、填充等参数设置
- 权重编辑后，计算过程展示区域实时更新，显示新权重参与的计算

### 4.11 手动计算模式规则（任务1卷积层）
- 进入方式:点击手动计算模式按钮
- 计算流程:
  + 系统展示当前卷积核位置覆盖的输入区域值与卷积核权重值
  + 用户需手动计算:输入区域值 × 卷积核权重，并将所有乘积求和
  + 用户在Output区域对应位置的输入框中填写计算结果
  + 点击提交按钮后，系统自动校验答案
- 答案校验:
  + 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（完整计算式子，如:0.2×0.5 + 0.3×0.8 + 0.1×(-0.3) + 0.4×0.6 = 0.67），卷积核自动移动至下一位置
  + 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程（完整计算式子），用户可重新填写或点击下一步继续
- 完成提示:完成所有位置的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
- 退出方式:点击退出手动计算按钮返回自动演示模式
- 手动计算模式下，卷积核位置由系统自动控制，用户无法手动拖拽或点击定位

### 4.12 手动计算模式规则（任务1、任务2激活层）
- 进入方式:点击手动计算模式按钮
- 计算流程:
  + 系统展示Input区域的当前元素值
  + 用户需手动计算:对当前元素值应用ReLU函数，即max(0,x)
  + 用户在Output区域对应位置的输入框中填写计算结果
  + 点击提交按钮后，系统自动校验答案
- 答案校验:
  + 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（如:-0.5 → max(0,-0.5) = 0），自动移动至下一元素
  + 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程，用户可重新填写或点击下一步继续
- 完成提示:完成所有元素的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
- 退出方式:点击退出手动计算按钮返回自动演示模式

### 4.13 手动计算模式规则（任务1池化层）
- 进入方式:点击手动计算模式按钮
- 计算流程:
  + 系统展示当前2×2池化区域的所有值
  + 用户需手动计算:从当前2×2区域中找出最大值
  + 用户在Output区域对应位置的输入框中填写计算结果
  + 点击提交按钮后，系统自动校验答案
- 答案校验:
  + 答案正确:输入框变为绿色边框，显示正确提示，同时显示正确的计算过程（如:[0.1,0.9,0.7,0.3] → max = 0.9），自动移动至下一区域
  + 答案错误:输入框变为红色边框，播放语音错误提示，同时显示正确答案及正确的计算过程，用户可重新填写或点击下一步继续
- 完成提示:完成所有区域的手动计算后，显示完成提示，可点击查看完整结果按钮查看Output区域的完整计算结果
- 退出方式:点击退出手动计算按钮返回自动演示模式

### 4.14 手动展平模式规则（任务3）
- 进入方式:点击手动展平模式按钮
- 展平流程:
  + 系统提示用户按行优先顺序（从上到下，从左到右）点击二维特征图的格子
  + 用户点击格子后，格子变为绿色背景，一维向量对应位置高亮（紫色背景）
  + 系统自动校验点击顺序:
    * 顺序正确:格子保持绿色背景，一维向量对应位置保持紫色高亮，继续等待下一个点击
    * 顺序错误:格子变为红色背景，播放语音错误提示，提示用户重新点击正确的格子
  + 实时显示当前点击进度（如:当前点击:5/总数）
- 完成提示:完成所有格子的点击后，显示完成提示，可点击查看完整结果按钮查看一维向量的完整展平结果
- 退出方式:点击退出手动展平按钮返回自动模式

### 4.15 激活函数规则（任务1、任务2、任务3）
- 激活方式:ReLU
- 计算逻辑:对每个输出元素取max(0,x)
- 负值变为0，正值保持不变

### 4.16 池化计算规则（任务1、任务2、任务3）
- 池化方式:最大池化
- 区块划分:输入特征图划分为若干个2×2区块
- 计算逻辑:取每个2×2区块内的最大值
- 输出尺寸:输入尺寸减半
- 自动演示模式:
  + 按从左到右、从上到下顺序依次标记每个2×2区块的最大值
  + 每次标记后暂停显示计算过程
  + 可通过速度滑块调整演示速度

### 4.17 展平顺序规则（任务1、任务2、任务3）
- 展平方式:行优先（从上到下，从左到右）
- 点击顺序:必须按序号顺序点击
- 一维向量:横向排列，完整显示所有元素

### 4.18 全连接匹配规则（任务1）
- 输入节点:可多选，蓝色高亮
- 输出节点:单选，对应颜色高亮
- 匹配度计算:（选中特征数/总特征数）×（数字匹配分/最高分）× 100%
- 识别判定:匹配度≥50%时显示选中数字，否则显示「未识别」
- 数字匹配分:根据手写输入自动计算，手写数字对应分数最高

### 4.19 Softmax概率计算规则（任务2、任务3）
- 计算方式:Softmax函数
- 概率值之和:100%
- 识别判定:概率大的即为预测结果

### 4.20 信息区更新规则
- 程序性信息与支持性信息随任务与步骤切换自动更新
- 任务1每个步骤包含对应的程序性信息和支持性信息
- 任务2每个步骤包含对应的程序性信息和支持性信息
- 任务3每个步骤包含对应的程序性信息和支持性信息
- CNN整体回顾包含对应的程序性信息和支持性信息

### 4.21 卷积核类型浮动窗口规则（任务3）
- 触发方式:鼠标悬停在卷积核上时显示浮动窗口
- 浮动窗口内容:
  + 卷积核类型名称
  + 作用说明
  + 适用场景
- 浮动窗口样式:半透明背景，白色文字，圆角边框
- 浮动窗口位置:卷积核上方或侧方，避免遮挡关键内容
- 鼠标移开后浮动窗口自动消失

### 4.22 前置知识说明规则（任务3）
- 展示位置:卷积层展示区域上方
- 卡片内容:不同卷积核类型会提取不同的特征，例如边缘检测卷积核提取边缘信息，模糊卷积核平滑图像，锐化卷积核增强细节。选择合适的卷积核类型可以提高模型对特定特征的识别能力，从而影响最终的分类结果
- 卡片样式:浅色背景，深色文字，圆角边框
- 卡片功能:可折叠，默认展开
- 折叠按钮:卡片右上角显示折叠/展开图标

### 4.23 匹配成功原因说明规则
- 展示位置:识别结果下方
- 卡片内容:
  + 任务1:全连接层将提取的特征与每个数字的特征模板进行匹配，计算相似度。选中的特征越多，且与目标数字的特征模板越接近，匹配度越高。当匹配度达到50%以上时，系统判定识别成功
  + 任务2:全连接层将提取的特征与Cat、Dog的特征模板进行匹配，计算相似度。Softmax函数将输出转换为概率分布，概率最高的类别就是预测结果
  + 任务3:全连接层将提取的特征与10类动物的特征模板进行匹配，计算相似度。Softmax函数将输出转换为概率分布，概率最高的类别就是预测结果
- 卡片样式:浅色背景，深色文字，圆角边框
- 卡片功能:可折叠，默认展开
- 折叠按钮:卡片右上角显示折叠/展开图标

### 4.24 CNN层级连线拖拽规则（任务1步骤5）
- 展示CNN各层级结构图（输入层、卷积层、激活层、池化层、展平层、全连接层、输出层）
- 各层级以方块形式展示，垂直排列
- 用户可拖拽连线箭头，将各层级按正确顺序连接
- 连线正确时，箭头变为绿色
- 连线错误时，箭头变为红色
- 完成所有连线后，显示完成提示
- 提供重置按钮，清除所有连线

### 4.25 CNN整体回顾规则
- 所有任务完成后，左侧任务栏底部显示「CNN整体回顾」选项
- 点击「CNN整体回顾」后，进入回顾画布
- 节点池展示CNN各层级的关键概念节点（输入层、卷积层、激活层、池化层、展平层、全连接层、输出层、步长、填充等）
- 用户可将节点拖拽至画布区域，自由摆放位置
- 用户可通过拖拽连线箭头，将节点按逻辑/因果关系连接
- 连线正确时，箭头变为绿色；连线错误时，箭头变为红色
- 用户可删除已连接的箭头
- 参考答案:
  + 完整CNN流程图连线说明:
    * 输入层 → 卷积层
    * 卷积层 → 激活层
    * 激活层 → 池化层
    * 池化层 → 展平层
    * 展平层 → 全连接层
    * 全连接层 → 输出层
    * 步长 → 卷积层（步长是卷积层的参数）
    * 填充 → 卷积层（填充是卷积层的参数）
  + 用户可点击查看参考答案按钮，展开完整连线说明
- 重置按钮:清除画布区域所有节点和连线，恢复初始状态
- 提交按钮:提交当前构建的概念图，系统自动校验连线正确性
- 查看参考答案按钮:展开完整连线说明
- 校验结果:显示正确连线数量、错误连线数量、完成度百分比

### 4.26 字体自适应规则
- 全站字体大小根据页面宽度自适应调整
- 页面宽度增加时，字体相应放大
- 页面宽度减少时，字体相应缩小
- 字体大小调整范围:最小12px，最大20px
- 字体调整需保持页面布局协调，避免文字溢出或过度拥挤

### 4.27 任务3卷积操作图像放大规则
- 任务3步骤2卷积层的图像/可视化区域自适应扩大
- 确保用户可清晰查看卷积操作细节
- 扩大后的区域需保持三联结构（Input、Kernel、Output）横向排列在一条线上，完整显示

### 4.28 全局UI色彩与形状优化规则
- 色彩方案:采用现代、有教育感的配色，提升视觉美感与情感效价
- 圆角设计:卡片、按钮、输入框等元素采用圆角设计，增强亲和力
- 卡片阴影:卡片元素添加阴影效果，增强层次感
- 渐变效果:适当使用渐变色，提升视觉吸引力
- 布局结构:保持侧边栏+步骤栏+主内容区+信息区的整体布局不变

## 5. 异常与边界情况

| 场景 | 处理方式 |
|------|----------|
| 欢迎页面点击开始学习按钮后跳转失败 | 提示跳转失败，请刷新页面重试 |
| 手写画板未输入内容直接点击识别 | 提示请先手写数字 |
| 手写内容过于简单或复杂 | 正常转换为对应尺寸矩阵，不做限制 |
| 图像加载失败 | 提示图像加载失败，请重新上传 |
| 卷积核拖拽超出边界 | 自动吸附至最近的有效位置 |
| 卷积参数调整导致输出尺寸为非整数 | 提示参数设置不合理，恢复默认参数 |
| 自动演示过程中切换步骤 | 自动暂停演示，保存当前状态 |
| 重复点击已标记的池化格子 | 无响应，保持标记状态 |
| 展平时跳过某个格子 | 允许跳过，不强制顺序 |
| 全连接层未选择节点 | 显示提示文案，匹配度为0% |
| 全连接层仅选择输入或输出节点 | 显示已选信息，匹配度为0% |
| 步骤切换时中间交互区内容过多 | 自动滚动至顶部，内容区垂直滚动 |
| 底部信息区内容过多 | 信息卡片内垂直滚动 |
| 速度滑块调整至极快速度 | 演示速度不低于50ms/步，确保可视化效果 |
| 权重值输入超出范围 | 提示权重值必须在-1.0至1.0之间，恢复原值 |
| 权重值输入非数字字符 | 提示请输入有效数字，恢复原值 |
| 权重编辑过程中切换步骤 | 自动保存已编辑的权重值 |
| 权重编辑过程中点击重置或随机按钮 | 取消当前编辑，执行重置或随机操作 |
| 任务切换时未完成当前任务 | 允许切换，不强制完成 |
| 任务切换时保存当前任务状态 | 不保存，切换后重置所有步骤状态 |
| 手动计算模式下输入框未填写直接提交 | 提示请填写计算结果 |
| 手动计算模式下输入非数字字符 | 提示请输入有效数字 |
| 手动计算模式下切换步骤 | 自动退出手动计算模式，保存当前已完成的计算结果 |
| 手动计算模式下点击退出按钮 | 返回自动演示模式，保留已完成的计算结果 |
| 语音讲解播放过程中切换步骤 | 自动停止当前语音，进入新步骤后根据触发时机决定是否播放新步骤的语音讲解 |
| 语音讲解播放过程中切换任务 | 自动停止当前语音，进入新任务后根据触发时机决定是否播放新任务第一个步骤的语音讲解 |
| 任务1矩阵尺寸选择后切换任务 | 任务1的矩阵尺寸选择不影响任务2、任务3 |
| 任务1矩阵尺寸选择后切换步骤 | 矩阵尺寸选择影响任务1的所有后续步骤 |
| 任务2选择猫或狗的不同局部 | 正常加载并转换为8×8像素矩阵 |
| 任务3卷积核浮动窗口显示时切换步骤 | 浮动窗口自动消失 |
| 任务3前置知识说明卡片折叠后切换步骤 | 卡片状态保持，不自动展开 |
| 教学代理角色拖拽至页面边缘外 | 自动吸附至页面边缘内最近位置 |
| 教学代理角色拖拽过程中切换步骤或任务 | 角色位置保持，不重置 |
| 语音播放过程中点击教学代理角色暂停 | 语音暂停，角色呈现静止状态 |
| 语音暂停后点击教学代理角色继续 | 语音继续播放，角色呈现讲话动画效果 |
| 无语音播放时点击教学代理角色 | 无响应，角色保持默认状态 |
| 手动展平模式下点击顺序错误 | 格子变为红色背景，播放语音错误提示，提示用户重新点击正确的格子 |
| 手动展平模式下切换步骤 | 自动退出手动展平模式，保存当前已完成的展平结果 |
| 手动展平模式下点击退出按钮 | 返回自动模式，保留已完成的展平结果 |
| CNN层级连线拖拽时连线超出画布 | 自动吸附至画布边缘内最近位置 |
| CNN层级连线拖拽时重复连接同一层级 | 提示不可重复连接，连线自动取消 |
| CNN整体回顾节点拖拽至画布外 | 自动吸附至画布边缘内最近位置 |
| CNN整体回顾连线箭头拖拽至画布外 | 自动吸附至画布边缘内最近位置 |
| CNN整体回顾提交时未完成所有连线 | 提示请完成所有连线后再提交 |
| CNN整体回顾重置后再次拖拽节点 | 正常拖拽，不受重置影响 |
| 页面宽度变化时字体调整过快 | 字体调整需平滑过渡，避免突兀变化 |
| 页面宽度变化时布局错乱 | 字体调整需保持页面布局协调，避免文字溢出或过度拥挤 |
| 任务3卷积操作图像放大后布局错乱 | 确保三联结构横向排列在一条线上，完整显示 |

## 6. 验收标准

1. 用户访问根路径（/）时，显示欢迎页面
2. 欢迎页面包含平台标题、平台简介/副标题、开始学习按钮
3. 点击开始学习按钮后，跳转至主学习界面（/learn路由）
4. 跳转后自动进入任务1的第一个步骤
5. 左侧任务栏可正常切换任务，当前任务高亮显示
6. 任务切换后，顶部步骤栏、中间交互区、底部信息区内容自动更新为对应任务的内容
7. 任务切换时，当前播放的语音自动停止
8. 所有任务完成后，左侧任务栏底部显示「CNN整体回顾」选项
9. 点击「CNN整体回顾」后，顶部步骤栏隐藏，中间交互区显示回顾画布
10. 教学代理角色位于右下角浮动区域，形象可爱有活力，使用CSS/SVG/emoji实现
11. 教学代理角色可拖拽至页面任意位置
12. 点击教学代理角色可暂停/继续当前播放的语音讲解
13. 教学代理角色状态显示正确（播放中呈现讲话动画/暂停中呈现静止状态/无语音呈现默认状态）
14. 切换步骤或任务时，教学代理角色恢复默认状态
15. 任务3步骤2卷积层的图像/可视化区域自适应扩大，用户可清晰查看卷积操作细节
16. 全局UI色彩方案现代、有教育感，提升视觉美感与情感效价
17. 卡片、按钮、输入框等元素采用圆角设计，增强亲和力
18. 卡片元素添加阴影效果，增强层次感
19. 适当使用渐变色，提升视觉吸引力
20. 布局结构保持侧边栏+步骤栏+主内容区+信息区不变
21. CNN整体回顾节点池包含步长、填充节点
22. CNN整体回顾参考答案包含完整连线说明，步长和填充连接到卷积层
23. 用户可点击查看参考答案按钮，展开完整连线说明

## 7. 参考文件

1. 参考网址:https://adamharley.com/nn_vis/cnn/3d.html
2. 参考网址:https://poloclub.github.io/cnn-explainer/
3. 参考图片:f2d863cb8f350f2a0f273c7e564d5642_720.jpg
4. 参考图片:image.png

## 8. 本期不实现功能

1. 池化方式切换（平均池化等）
2. 全连接层权重可视化编辑
3. 训练过程动画演示
4. 模型准确率统计
5. 学习进度保存
6. 多用户协作学习
7. 3D可视化展示
8. 卷积核权重热力图展示
9. 多通道卷积可视化
10. 批量数据处理演示
11. 顶部步骤栏的上一步/下一步按钮功能
12. 语音讲解的音量调节功能
13. 语音讲解的语速调节功能
14. 语音讲解的字幕显示功能