From b3069d47432df82588f7e65b245eb91b96b745c0 Mon Sep 17 00:00:00 2001 From: yuyu5333 <77156718+yuyu5333@users.noreply.github.com> Date: Wed, 17 Dec 2025 16:52:43 +0800 Subject: [PATCH] Delete README_web.md --- README_web.md | 87 --------------------------------------------------- 1 file changed, 87 deletions(-) delete mode 100644 README_web.md diff --git a/README_web.md b/README_web.md deleted file mode 100644 index 4ca3bd5..0000000 --- a/README_web.md +++ /dev/null @@ -1,87 +0,0 @@ -## 总览 -- 目标:将当前单文件 `static/js/script.js` 的所有逻辑拆分为职责清晰的 ES Modules,并在不改变既有后端接口的前提下,优化交互与视觉表现,使界面更专业、易用。 -- 范围:仅前端(HTML/CSS/JS),保持与后端 `train_web_ui.py` 的 REST 接口兼容;可选提供后端小幅辅助(如 SSE)但不作为本次必须项。 - -## 现状拆解 -- 导航与标签:`openTab`、页面切换与进程/日志刷新(script.js:2–29, 23–29)。 -- 训练类型联动与默认值:`train_type` 变更、分区显隐与各类型默认填充(script.js:32–154)。 -- 轮询与请求:带超时/重试的 `fetchWithTimeoutAndRetry`(script.js:200–248),进程状态轮询 `startProcessPolling`/`checkProcessStatusChanges`(script.js:182–199, 251–279)。 -- 进程列表与项更新:`loadProcesses`/`updateProcessItem`/`addProcessItemToGroup`(script.js:467–667, 357–465)。 -- SwanLab:链接检测/打开(script.js:282–355)。 -- 日志查看:进程日志自动刷新与容器滚动(script.js:669–788),日志文件列表/查看/删除(script.js:1126–1462)。 -- 全局通知与确认:`showNotification`/`showConfirmDialog`(script.js:790–885)。 -- 训练表单提交:数据整形、模式分支、启动训练后切到“训练进程”(script.js:1052–1124)。 - -## 拆分方案(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.js(script.js:2–29)。 - - 类型联动与默认值 → train/form.js(script.js:32–154, 1052–1124)。 - - `fetchWithTimeoutAndRetry` → services/apiClient.js(script.js:200–248)。 - - 轮询相关 → processes/list.js(script.js:182–199, 251–279)。 - - 进程项增/改/组折叠 → processes/list.js(script.js:357–667, 467–602)。 - - SwanLab → processes/list.js + services(script.js:282–355)。 - - 进程日志 → processes/logs.js(script.js:669–788)。 - - 通知/确认 → ui/notify.js, ui/dialog.js(script.js:790–885)。 - - 进程停止/删除 → processes/list.js + services(script.js:887–1050)。 - - 日志文件列表/操作 → logfiles/list.js(script.js:1126–1462)。 - -## 加载与初始化 -- 在 `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` 引用完成快速回滚。 \ No newline at end of file