Skip to content

Commit 4132437

Browse files
JavaZerooJavaZeroo
committed
Init
0 parents  commit 4132437

22 files changed

+5621
-0
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
build-and-deploy:
11+
runs-on: ubuntu-latest
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
steps:
18+
- name: Checkout
19+
uses: actions/checkout@v4
20+
21+
- name: Setup Node.js
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: '18'
25+
cache: 'npm'
26+
27+
- name: Install dependencies
28+
run: npm ci
29+
30+
- name: Build
31+
run: npm run build
32+
33+
- name: Setup Pages
34+
uses: actions/configure-pages@v4
35+
36+
- name: Upload artifact
37+
uses: actions/upload-pages-artifact@v3
38+
with:
39+
path: './dist'
40+
41+
- name: Deploy to GitHub Pages
42+
id: deployment
43+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Environment variables
27+
.env
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# Cache directories
34+
.cache
35+
.parcel-cache
36+
.vite
37+
.rollup.cache
38+
39+
# Coverage directory used by tools like istanbul
40+
coverage/
41+
*.lcov
42+
43+
# ESLint cache
44+
.eslintcache
45+
46+
# Temporary folders
47+
tmp/
48+
temp/
49+
50+
# OS generated files
51+
Thumbs.db
52+
ehthumbs.db
53+
54+
# Optional npm cache directory
55+
.npm
56+
57+
# Yarn Integrity file
58+
.yarn-integrity
59+
60+
# Build info
61+
*.tsbuildinfo
62+

‎README.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# 🚀 大模型日志分析工具
2+
3+
一个现代化的 React + Vite 应用，用于分析和可视化大模型训练日志中的损失函数（Loss）和梯度范数（Grad Norm）数据。
4+
5+
[![GitHub Pages](https://img.shields.io/badge/GitHub-Pages-green)](https://blog.javazero.top/compare_tool/)
6+
[![License](https://img.shields.io/badge/License-MIT-blue)](#license)
7+
[![React](https://img.shields.io/badge/React-19.1.0-blue)](https://reactjs.org/)
8+
[![Vite](https://img.shields.io/badge/Vite-6.3.5-green)](https://vitejs.dev/)
9+
10+
## 🌟 在线使用
11+
12+
**直接访问**: [https://blog.javazero.top/compare_tool/](https://blog.javazero.top/compare_tool/)
13+
14+
## ✨ 功能特性
15+
16+
### 📁 **文件上传**
17+
- **拖拽上传**：将日志文件直接拖拽到网页上即可上传
18+
- **多文件支持**：同时上传和分析多个日志文件
19+
- **格式支持**：支持 `.log` 和 `.txt` 格式的文本文件
20+
21+
### 🔍 **数据解析**
22+
- **正则表达式匹配**：使用自定义正则表达式提取Loss和Grad Norm数据
23+
- **默认模式**：提供默认的匹配规则 `loss:\\s*([\\d.]+)` 和 `grad norm:\\s*([\\d.]+)`
24+
- **实时重解析**：修改正则表达式后可以重新解析所有文件
25+
26+
### 📊 **TensorBoard样式可视化**
27+
- **原始数据**: 低透明度显示真实波动
28+
- **平滑曲线**: 移动平均显示趋势（可选）
29+
- **智能布局**: 响应式设计，适配不同屏幕尺寸
30+
- **交互式图表**: 基于 Chart.js 的高性能图表渲染
31+
32+
### 🔬 **对比分析**
33+
当选择2个文件时，提供专门的对比图表和统计指标：
34+
- **Normal**: 原始差值 (File2 - File1)
35+
- **Absolute**: 绝对差值 |File2 - File1|
36+
- **Relative**: 相对差值百分比
37+
- **统计指标**: Mean Error (ME) 和 Mean Square Error (MSE)
38+
39+
### 🎨 **现代化界面**
40+
- **Tailwind CSS**: 现代化的响应式设计
41+
- **直观操作**: 简洁清晰的用户界面
42+
- **实时反馈**: 即时的数据更新和图表渲染
43+
44+
## 🛠️ 技术栈
45+
46+
- **前端框架**: React 19.1.0
47+
- **构建工具**: Vite 6.3.5
48+
- **样式框架**: Tailwind CSS 4.1.10
49+
- **图表库**: Chart.js + react-chartjs-2
50+
- **图标**: Lucide React
51+
- **开发语言**: JavaScript (ES6+)
52+
53+
## 🚀 快速开始
54+
55+
### 方法1: 在线使用 (推荐)
56+
直接访问 GitHub Pages 部署的版本，无需任何安装。
57+
58+
### 方法2: 本地开发
59+
60+
```bash
61+
# 克隆仓库
62+
git clone https://github.com/JavaZeroo/compare_tool.git
63+
cd compare_tool
64+
65+
# 安装依赖
66+
npm install
67+
68+
# 启动开发服务器
69+
npm run dev
70+
71+
# 构建生产版本
72+
npm run build
73+
74+
# 预览生产版本
75+
npm run preview
76+
```
77+
78+
## 📝 使用方法
79+
80+
1. **上传文件**: 拖拽或选择 `.log`/`.txt` 文件
81+
2. **配置正则**: 根据日志格式调整正则表达式（可选）
82+
3. **查看图表**: 系统自动解析并生成可视化图表
83+
4. **对比分析**: 上传两个文件时可进行详细对比
84+
5. **调整显示**: 控制数据点和平滑曲线的显示
85+
86+
## 📊 支持的日志格式
87+
88+
工具支持包含以下格式的训练日志：
89+
90+
```
91+
loss: 0.1234
92+
grad norm: 1.5678
93+
```
94+
95+
您可以通过修改正则表达式来适配其他格式。
96+
97+
## 🔧 自定义配置
98+
99+
### 正则表达式
100+
- **Loss**: `loss:\\s*([\\d.]+)`
101+
- **Grad Norm**: `grad norm:\\s*([\\d.]+)`
102+
103+
### 显示选项
104+
- 显示/隐藏原始数据点
105+
- 启用/禁用平滑曲线
106+
- 多种对比模式选择
107+
108+
## 📦 项目结构
109+
110+
```
111+
src/
112+
├── components/ # React 组件
113+
│ ├── Header.jsx # 页面头部
114+
│ ├── FileUpload.jsx # 文件上传
115+
│ ├── FileList.jsx # 文件列表
116+
│ ├── RegexControls.jsx # 正则控制
117+
│ ├── ComparisonControls.jsx # 对比控制
118+
│ └── ChartContainer.jsx # 图表容器
119+
├── App.jsx # 主应用组件
120+
├── main.jsx # 应用入口
121+
└── index.css # 全局样式
122+
```
123+
124+
## 🤝 贡献
125+
126+
欢迎贡献代码！请查看 [Contributing Guidelines](CONTRIBUTING.md) 了解详情。
127+
128+
## 📄 许可证
129+
130+
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
131+
132+
## 🙏 致谢
133+
134+
- [Chart.js](https://www.chartjs.org/) - 强大的图表库
135+
- [React](https://reactjs.org/) - 用户界面库
136+
- [Vite](https://vitejs.dev/) - 快速的构建工具
137+
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的CSS框架
138+
- [Lucide](https://lucide.dev/) - 美观的图标库
139+
140+
---
141+
142+
如果这个工具对您有帮助，请给它一个 ⭐ ！

‎eslint.config.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
6+
export default [
7+
{ ignores: ['dist'] },
8+
{
9+
files: ['**/*.{js,jsx}'],
10+
languageOptions: {
11+
ecmaVersion: 2020,
12+
globals: globals.browser,
13+
parserOptions: {
14+
ecmaVersion: 'latest',
15+
ecmaFeatures: { jsx: true },
16+
sourceType: 'module',
17+
},
18+
},
19+
plugins: {
20+
'react-hooks': reactHooks,
21+
'react-refresh': reactRefresh,
22+
},
23+
rules: {
24+
...js.configs.recommended.rules,
25+
...reactHooks.configs.recommended.rules,
26+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27+
'react-refresh/only-export-components': [
28+
'warn',
29+
{ allowConstantExport: true },
30+
],
31+
},
32+
},
33+
]

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>大模型日志分析工具 - ML Log Analyzer</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)