diff --git a/README.md b/README.md index b799318..b3bba84 100644 --- a/README.md +++ b/README.md @@ -1,227 +1,70 @@ -# 🚀 ML Log Analyzer - -一个现代化的在线工具，专门用于分析和可视化大模型训练日志中的损失函数（Loss）和梯度范数（Grad Norm）数据。支持多种日志格式，提供智能解析、多图表同步显示和高级对比分析功能。 +# ML Log Analyzer 🚀 [![GitHub Pages](https://img.shields.io/badge/GitHub-Pages-green)](https://log.javazero.top/) -[![License](https://img.shields.io/badge/License-MIT-blue)](#license) +[![License](https://img.shields.io/badge/License-MIT-blue)](LICENSE) [![React](https://img.shields.io/badge/React-19.1.0-blue)](https://reactjs.org/) [![Vite](https://img.shields.io/badge/Vite-6.3.5-green)](https://vitejs.dev/) -## 🌟 在线使用 - -**直接访问**: [https://log.javazero.top/](https://log.javazero.top/) - -无需安装，打开即用！支持所有现代浏览器。 - -## ✨ 核心功能 - -### 📁 **智能文件上传** -- **🎯 全页面拖拽**：将日志文件拖拽到页面任意位置即可上传 -- **📊 多文件支持**：同时上传和分析多个训练日志文件 -- **📝 格式兼容**：支持所有文本格式文件（`.log`、`.txt`、无后缀等） -- **⚡ 即时解析**：文件上传后立即开始解析和可视化 +一个现代化的在线工具，帮助您分析和可视化机器学习训练日志中的损失函数和梯度范数。 +支持多种日志格式，提供智能解析、同步图表和对比分析等高级功能。 -### 🔍 **强大的数据解析系统** -- **🎨 关键词匹配**（默认模式）：智能识别日志中的关键字，自动提取数值 - - Loss: `loss:` → 自动查找后续数字 - - Grad Norm: `norm:` → 自动提取梯度范数值 -- **⚙️ 正则表达式模式**：支持复杂的自定义匹配规则 -- **🤖 智能推荐**：系统自动分析日志格式并推荐最佳解析方式 -- **🔬 多格式支持**：JSON、键值对、数组、科学计数法等多种日志格式 -- **🎯 独立配置**：每个文件可单独配置解析规则 +## 在线体验 🌐 -### 📊 **高级可视化图表** -- **🔄 多图表同步**：鼠标hover时，所有图表同步显示相同步骤的数据点 -- **🎯 精确定位**：hover时显示实心圆点，精确指示当前训练步骤 -- **⚡ 零延迟响应**：所有交互效果即时响应，无动画延迟 -- **📏 可调整尺寸**：图表高度可以自由调整，适应不同分析需求 -- **🎨 动态布局**：根据显示的图表数量自动调整布局（单列/双列） +访问 [https://log.javazero.top/](https://log.javazero.top/) 即可使用，无需安装。 -### 🔬 **深度对比分析** -当选择2个文件时，系统提供专业的对比分析： -- **📈 Normal模式**: 原始差值分析 (File2 - File1) -- **📊 Absolute模式**: 绝对差值分析 |File2 - File1| -- **📉 Relative模式**: 相对差值百分比分析 -- **📋 统计指标**: 详细的平均误差（normal）、平均误差（absolute）、相对误差（normal）、平均相对误差（absolute） -- **⚖️ 基准线设置**: 可配置相对误差和绝对误差的基准线 +## 主要特性 -### �️ **灵活的显示控制** -- **👁️ 图表切换**：独立控制Loss函数和Grad Norm图表的显示 -- **📁 文件管理**：支持文件启用/禁用，灵活控制参与分析的数据 -- **📊 数据范围**：支持设置分析的起始和结束位置，专注特定训练阶段 -- **🔄 实时更新**：所有配置修改后图表立即更新 +- 🚀 **多文件上传**：全页面拖拽即可上传多个日志文件并独立配置解析规则。 +- 🔍 **智能解析**：关键字匹配和正则表达式两种模式，自动识别常见日志格式。 +- 📝 **自定义指标**：可自由添加关键字或正则，自定义需要解析的日志字段，并提供常用预设。 +- 📈 **同步图表**：多个图表之间鼠标悬停同步显示相同训练步骤的数据。 +- 🔬 **对比分析**：提供 Normal、Absolute、Relative 等多种差值模式，并计算统计指标。 +- 🎛️ **灵活展示**：可独立启用或禁用文件和图表，支持调整数据范围与图表尺寸，图表高度可拖拽调整。 +- ⚡ **易用特性**：支持匹配预览、智能推荐解析规则，图表 Shift+拖动可快速缩放。 -### 🎨 **现代化用户界面** -- **📱 响应式设计**：完美适配桌面、平板和手机设备 -- **🌈 直观交互**：清晰的视觉反馈和用户引导 -- **♿ 无障碍支持**：完整的键盘导航和屏幕阅读器支持 -- **🎯 用户友好**：简洁明了的操作流程，零学习成本 +## 快速上手 ⚡ -## 🛠️ 技术栈 +1. 将训练日志文件拖拽到页面任意位置。 +2. 在弹出的配置面板中选择解析方式（关键字或正则），并可添加自定义指标。 +3. 查看自动生成的图表，必要时可上传第二个文件进行对比分析。 +4. 调整图表显示或数据范围以获得更精确的结果。 -- **前端框架**: React 19.1.0 -- **构建工具**: Vite 6.3.5 -- **样式框架**: Tailwind CSS 4.1.10 -- **图表库**: Chart.js + react-chartjs-2 -- **图标**: Lucide React -- **开发语言**: JavaScript (ES6+) -- **部署方式**: GitHub Actions + GitHub Pages +## 部署 -## 🚀 部署说明 +### GitHub Pages -本项目采用 GitHub Actions 自动化部署到 GitHub Pages，每次推送到主分支时自动构建和部署。 +本仓库已配置 GitHub Actions，推送到主分支会自动构建并部署到 GitHub Pages。 +Fork 仓库后开启 GitHub Pages 即可自动部署。 -如需 fork 此项目进行自定义开发： +### Vercel -1. Fork 本仓库到你的 GitHub 账户 -2. 在仓库设置中启用 GitHub Pages -3. 选择 GitHub Actions 作为部署源 -4. 推送代码时将自动触发构建和部署 -5. 部署完成后，可在 `Deploy to GitHub Pages` 工作流中下载自动生成的 `dist.zip` 以进行本地部署 - -### 使用 Vercel 部署 - -如果想要快速体验，可以点击下方按钮一键部署： +也可以一键部署到 Vercel： [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/JavaZeroo/log-parser) -项目也支持部署到 [Vercel](https://vercel.com)。仓库已包含 `vercel.json` 配置文件，默认使用 `@vercel/static-build` 构建站点并将 `dist` 目录作为输出。部署步骤如下： - -1. 安装 Vercel CLI：`npm i -g vercel` -2. 在项目根目录运行 `vercel`，根据提示完成初始化 -3. 之后每次 `git push` 都会自动触发构建并部署到 Vercel - -## 📝 使用指南 - -### 🎯 快速上手 -1. **📂 上传文件**: 拖拽训练日志文件到页面任意位置 -2. **🔍 选择解析方式**: - - **关键词匹配**（推荐）：直接使用 `loss:` 和 `norm:` 关键字 - - **正则表达式**：自定义复杂的匹配规则 -3. **📊 查看图表**: 系统自动解析并生成交互式图表 -4. **⚖️ 对比分析**: 上传两个文件时自动启用高级对比功能 -5. **🎛️ 调整显示**: 控制图表显示选项和数据范围 - -### 🔧 高级功能 -- **📁 文件独立配置**: 每个文件可单独设置解析规则和数据范围 -- **🔄 多图表同步**: hover任意图表时，所有相关图表同步显示 -- **📏 图表调整**: 拖拽调整图表高度，适应不同分析需求 -- **📋 统计分析**: 自动计算并显示详细的统计指标 - -## 📊 支持的日志格式 - -### 🎯 关键词匹配模式（推荐） -支持多种常见的训练日志格式： - -```bash -# 标准格式 -loss: 0.1234 -norm: [1.5678] - -# JSON 格式 -{"loss": 0.1234, "norm": 1.5678} - -# 数组格式 -loss [0.1234] -norm: [1.5678] - -# 科学计数法 -loss: 1.234e-4 -norm: 1.5678E+0 - -# MindFormers 格式 -Step 100: loss=0.1234 norm=1.5678 -``` - -### ⚙️ 正则表达式模式 -对于特殊格式的日志，可以使用自定义正则表达式： - -```bash -# 默认正则 -Loss: loss:\\s*([\\d.eE+-]+) -Grad Norm: grad[\\s_]norm:\\s*([\\d.eE+-]+) - -# 自定义示例 -train_loss:\\s*([\\d.eE+-]+) -gradient_norm:\\s*([\\d.eE+-]+) -``` - -## 🔧 功能特色 - -### 🎯 智能解析系统 -- **关键词匹配**: 默认模式，智能识别常见训练日志格式 -- **智能推荐**: 自动分析日志结构，推荐最佳解析方式 -- **多格式支持**: 兼容JSON、键值对、数组、科学计数法等格式 -- **实时预览**: 解析结果实时预览，包含数值、行号、原文信息 - -### 📊 高级可视化 -- **同步显示**: 多图表联动，hover时同步显示相同训练步骤 -- **精确定位**: 实心圆点精确标识当前hover位置 -- **即时响应**: 零延迟交互，所有动画已优化 -- **响应式布局**: 根据图表数量自动调整单列/双列布局 - -### 🔬 专业对比分析 -- **四种对比模式**: 平均误差（normal）、平均误差（absolute）、相对误差（normal）、平均相对误差（absolute） -- **统计指标**: 平均误差（normal）、平均误差（absolute）、相对误差（normal）、平均相对误差（absolute） -- **基准线设置**: 可配置对比基准线，突出显示显著差异 -- **差值可视化**: 专门的差值图表，清晰展示训练差异 - -### 🎛️ 灵活控制 -- **文件管理**: 支持文件启用/禁用、删除、重命名 -- **独立配置**: 每个文件可单独设置解析规则和数据范围 -- **全局同步**: 全局解析配置可一键应用到所有文件 -- **数据范围**: 支持设置分析的起始和结束步骤 - -## 📦 项目结构 +## 项目结构 🗂 ``` src/ -├── components/ # React 组件 -│ ├── Header.jsx # 页面头部（已清空） -│ ├── FileUpload.jsx # 文件上传组件 -│ ├── FileList.jsx # 文件列表管理 -│ ├── RegexControls.jsx # 解析规则控制 -│ ├── ComparisonControls.jsx # 对比模式控制 -│ ├── ChartContainer.jsx # 图表容器和同步控制 -│ ├── ResizablePanel.jsx # 可调整尺寸的图表面板 -│ └── FileConfigModal.jsx # 文件配置弹窗 -├── App.jsx # 主应用组件 -├── main.jsx # 应用入口 -└── index.css # 全局样式和无障碍支持 +├── components/ # 主要 React 组件 +├── assets/ # 静态资源 +├── utils/ # 工具函数 +├── App.jsx # 应用入口组件 +└── main.jsx # 渲染入口 ``` -## 🤝 贡献 - -欢迎贡献代码和提出建议！ - -### 如何贡献 -1. Fork 本仓库 -2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) -3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) -4. 推送到分支 (`git push origin feature/AmazingFeature`) -5. 打开一个 Pull Request - -### 报告问题 -如果您发现任何问题或有功能建议，请在 [Issues](https://github.com/JavaZeroo/log-parser/issues) 页面提交。 - -## 📄 许可证 - -本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。 - -## 🙏 致谢 - -感谢以下开源项目的支持： +## 贡献 🙌 -- [Chart.js](https://www.chartjs.org/) - 强大的图表库，提供高性能可视化 -- [React](https://reactjs.org/) - 现代化的用户界面库 -- [Vite](https://vitejs.dev/) - 快速的前端构建工具 -- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的CSS框架 -- [Lucide](https://lucide.dev/) - 美观一致的图标库 +欢迎通过 Pull Request 提交代码或提出建议。 ---- +## 许可证 📄 -## ⭐ 支持项目 +项目基于 [MIT](LICENSE) 协议发布。 -如果这个工具对您的机器学习项目有帮助，请给它一个 ⭐ ！ +## 鸣谢 🙏 -您的支持是我们持续改进的动力。 +- [Chart.js](https://www.chartjs.org/) +- [React](https://reactjs.org/) +- [Vite](https://vitejs.dev/) +- [Tailwind CSS](https://tailwindcss.com/) +- [Lucide](https://lucide.dev/)