Delete README_web.md

This commit is contained in:
yuyu5333 2025-12-17 16:52:43 +08:00 committed by GitHub
parent 0ebf835006
commit b3069d4743
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,87 +0,0 @@
## 总览
- 目标:将当前单文件 `static/js/script.js` 的所有逻辑拆分为职责清晰的 ES Modules并在不改变既有后端接口的前提下优化交互与视觉表现使界面更专业、易用。
- 范围仅前端HTML/CSS/JS保持与后端 `train_web_ui.py` 的 REST 接口兼容;可选提供后端小幅辅助(如 SSE但不作为本次必须项。
## 现状拆解
- 导航与标签:`openTab`、页面切换与进程/日志刷新script.js:229, 2329
- 训练类型联动与默认值:`train_type` 变更、分区显隐与各类型默认填充script.js:32154
- 轮询与请求:带超时/重试的 `fetchWithTimeoutAndRetry`script.js:200248进程状态轮询 `startProcessPolling`/`checkProcessStatusChanges`script.js:182199, 251279
- 进程列表与项更新:`loadProcesses`/`updateProcessItem`/`addProcessItemToGroup`script.js:467667, 357465
- SwanLab链接检测/打开script.js:282355
- 日志查看进程日志自动刷新与容器滚动script.js:669788日志文件列表/查看/删除script.js:11261462
- 全局通知与确认:`showNotification`/`showConfirmDialog`script.js:790885
- 训练表单提交数据整形、模式分支、启动训练后切到“训练进程”script.js:10521124
## 拆分方案ES Modules
- 采用原生 ES Modules无需打包器`index.html` 将单一脚本替换为入口 `app.js`type="module"),其余模块按需 import。
- 目录结构(`static/js/`
- `app.js`:应用入口,初始化标签、轮询、首屏加载。
- `services/apiClient.js``fetchWithTimeoutAndRetry` 与接口封装(`getProcesses`/`getLogs`/`startTrain`/`stop`/`deleteProcess`/`getLogFiles`/`getLogFileContent`/`deleteLogFile`)。
- `ui/tabs.js``openTab` 与标签选中态管理、切换后触发对应加载。
- `ui/notify.js``showNotification`success/error/info
- `ui/dialog.js``showConfirmDialog`/`closeDialog`。
- `train/form.js`:训练类型显隐与默认值、`submit` 整形与发起训练;合并现有 `index.html` 内联 GPU 选择器联动。
- `processes/list.js``loadProcesses`、分组折叠/展开、`updateProcessItem`、状态 chip 与操作按钮逻辑(含 SwanLab
- `processes/logs.js`:进程日志区域展开/关闭、自动刷新定时器管理(`logTimers`)、`refreshLog`/`loadLogContent`。
- `logfiles/list.js`:日志文件分组、查看全文、删除项与分组高度更新。
- `utils/dom.js`:通用 dom/help 方法(`qs`/`qsa`/`el`/`setVisible`/`setText` 等)。
- 现有函数到模块的映射:
- `openTab` → ui/tabs.jsscript.js:229
- 类型联动与默认值 → train/form.jsscript.js:32154, 10521124
- `fetchWithTimeoutAndRetry` → services/apiClient.jsscript.js:200248
- 轮询相关 → processes/list.jsscript.js:182199, 251279
- 进程项增/改/组折叠 → processes/list.jsscript.js:357667, 467602
- SwanLab → processes/list.js + servicesscript.js:282355
- 进程日志 → processes/logs.jsscript.js:669788
- 通知/确认 → ui/notify.js, ui/dialog.jsscript.js:790885
- 进程停止/删除 → processes/list.js + servicesscript.js:8871050
- 日志文件列表/操作 → logfiles/list.jsscript.js:11261462
## 加载与初始化
- 在 `app.js`
- 绑定 tab 切换,首屏激活“开始训练”。
- 初始化训练表单默认值与 GPU 选择器显隐。
- 启动进程状态轮询,只在“训练进程”栏激活;离开时清理定时器与日志定时器。
- 首次进入“训练进程”时触发 `loadProcesses`,进入“日志文件”触发 `loadLogFiles`
## 交互优化
- 表单
- 必填项校验与错误提示;失焦即时校验;数值范围与格式(学习率、小数、正整数)。
- 将“强化学习参数”块 Default 折叠,仅在选择 DPO/PPO 展开;提供字段级 tooltip问号提示
- 训练命令预览:在提交前显示将要执行的命令(只读文本),便于核对。
- 记忆最近一次配置localStorage一键恢复。
- 进程列表
- 顶部筛选:按训练类型/状态过滤;关键字搜索(按时间/类型)。
- 操作区对齐与悬停提示SwanLab 按钮仅在链接可用时亮显,否则显示“生成中”。
- 进程项采用更明显的层次:标题(时间)、副标题(类型),右侧状态 chip按钮组固定顺序。
- 自适应展开动画与内容高度回流优化,减少抖动。
- 日志查看
- 自动滚动可开关(“跟随最新”开/关);复制按钮;加载失败重试入口。
- 大文件懒加载:初次只读尾部 N 行,支持“加载更多历史”。
## 视觉美化
- 主题变量:在 `style.css` 顶部引入 CSS 变量(背景、主色、强调色、阴影、圆角),统一渐变与阴影。
- 表单栅格更稳定的两列到单列响应式断点标签与控件对齐hint 文案灰度提升。
- 状态 chip统一尺寸/色阶,添加图标(运行/停止/错误/完成)。
- 按钮规范:主次区分、禁用态与加载态;滚动条与日志容器对比度优化。
- Header 与 Tabs粘性头部、Tab 选中态对比更明显;移动端竖排布局间距优化。
## 兼容性与无后端改动原则
- 保持与现有接口一致:`/train`、`/processes`、`/logs/:id`、`/stop/:id`、`/delete/:id`、`/logfiles`、`/logfile-content/:filename`、`/delete-logfile/:filename`(见 train_web_ui.py
- 轮询频率保持 5s可配置进程日志刷新 1s仅在“运行中”且展开时。
## 可选增强(后端协作,非必须)
- SSE/WS 实时日志:新增 `/logs/stream/:id`,前端以 EventSource/WS 订阅;减少轮询负载与延迟。
- 进程持久化与重启恢复优化:后端提供简易查询缓存 API前端减少初始闪烁。
## 交付内容
- 新的 JS 模块文件(上述结构),`index.html` 改为 `type="module"` 入口加载;移除旧 `script.js` 引用。
- 更新后的 `style.css`(保留既有风格,加入变量与状态样式优化)。
- 无后端接口变更;提供 README 片段说明模块职责与使用(如需要)。
## 验收与回滚
- 功能对比清单:
- 单卡/多卡 Pretrain/SFT/LoRA/DPO/PPO 启动
- 进程列表与状态变更、SwanLab 链接打开
- 进程日志展开/自动刷新、日志文件列表/查看/删除
- 若出现问题,可通过 `index.html` 切回旧 `script.js` 引用完成快速回滚。