# PPO training process

**Repository Path**: kill-life/ppo-training-process

## Basic Information

- **Project Name**: PPO training process
- **Description**: PPO流程可视化
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-02
- **Last Updated**: 2026-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PPO 训练流程可视化工具

这是一个用于可视化 PPO（Proximal Policy Optimization）强化学习训练过程的 React 应用程序。该应用展示了大语言模型（LLM）强化学习训练的核心流程，特别是 Actor-Critic 框架的工作机制。

## 项目概述

本项目旨在帮助理解 PPO 算法的训练流程，特别是：

- **Actor-Critic 框架**：展示策略网络（Actor）和价值网络（Critic）如何协同工作
- **训练流程可视化**：通过动画和图表展示 PPO 训练的七个核心步骤
- **数据流追踪**：可视化数据包在不同组件间的流动过程

## 功能特性

- **交互式流程图**：动态展示 PPO 训练的完整流程
- **动画演示**：实时显示数据包在各节点间的流动
- **详细步骤说明**：点击任一步骤查看其详细描述
- **进度指示器**：显示当前训练流程的位置
- **响应式设计**：适配不同屏幕尺寸

## PPO 训练流程详解

该应用可视化了以下七个关键步骤：

1. **生成阶段**（Rollout）：Actor LLM 与环境交互生成回答
2. **奖励计算**（Reward Computation）：奖励函数计算标量奖励
3. **价值评估**（Critic 模型）：评估输出质量，缓解奖励稀疏问题
4. **优势计算**（Advantage Estimation）：决定奖励或惩罚的核心信号
5. **策略优化**（Actor Update）：更新 Actor 生成更优回答
6. **Critic 更新**（Value Function Update）：提升估值质量
7. **循环迭代**（Iterative RL Loop）：持续改进策略

## 技术栈

- **前端框架**: [React](https://react.dev/) (v19.2.0)
- **语言**: [TypeScript](https://www.typescriptlang.org/)
- **构建工具**: [Vite](https://vitejs.dev/)
- **UI 组件库**: [Radix UI Primitives](https://www.radix-ui.com/)
- **动画效果**: [Framer Motion](https://www.framer.com/motion/)
- **图表库**: [Recharts](https://recharts.org/)
- **图标**: [Lucide React](https://lucide.dev/)
- **样式**: [Tailwind CSS](https://tailwindcss.com/)

## 安装与运行

### 环境要求

- Node.js 18 或更高版本
- npm 或 yarn 包管理器

### 安装步骤

1. 克隆项目到本地：

```bash
git clone <your-repository-url>
cd ppo-training-process
```

2. 安装依赖：

```bash
npm install
```

3. 启动开发服务器：

```bash
npm run dev
```

4. 在浏览器中打开 [http://localhost:5173](http://localhost:5173) 查看应用

## 项目结构

```
src/
├── components/          # 可复用组件
│   ├── ui/             # UI 组件库
│   └── PPOFlowDiagram.tsx # 主流程图组件
├── hooks/              # 自定义 hooks
├── lib/                # 工具函数
├── App.tsx             # 应用主入口
├── index.css           # 全局样式
└── main.tsx            # 应用启动文件
```

## 开发设置

### 开发模式

```bash
npm run dev
```

这将在开发模式下启动应用，并启用热重载功能。

### 构建生产版本

```bash
npm run build
```

构建完成后，可在 `dist/` 目录找到生产版本文件。

### 预览生产构建

```bash
npm run preview
```

预览生产构建的应用。

### 代码检查

```bash
npm run lint
```

检查代码是否符合 ESLint 规范。

## 组件说明

### PPOFlowDiagram

这是应用的主要组件，负责渲染整个 PPO 训练流程。它包含：

- 交互式流程图，展示各个训练步骤
- 动画系统，可视化数据包的流动
- 控制面板，包含播放/暂停和重置按钮
- 侧边栏，显示当前选中步骤的详细信息

## 环境变量

该项目不使用环境变量。

## 贡献指南

欢迎提交 Pull Request 来改进这个项目！在提交之前，请确保：

1. 代码已通过 ESLint 检查
2. 添加了适当的测试（如果适用）
3. 更新了相关文档

## 许可证

MIT License

## 致谢

- [React](https://react.dev/) - 用户界面库
- [Vite](https://vitejs.dev/) - 构建工具
- [Framer Motion](https://www.framer.com/motion/) - 动画库
- [Radix UI](https://www.radix-ui.com/) - 无障碍组件原语
- [Lucide](https://lucide.dev/) - 图标集