V3.9 重构ui.py，每个网页拆分独立文件

2026-01-12 17:24:34 +08:00
parent 938f84f1ba
commit ac9c80ed8c
27 changed files with 1896 additions and 1456 deletions
--- a/src/mvp/py/argus/ui/pages/task_new.py
+++ b/src/mvp/py/argus/ui/pages/task_new.py
@@ -0,0 +1,538 @@
+from __future__ import annotations
+
+import html
+
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+
+from ..layout.page import page
+
+
+def register(app: FastAPI) -> None:
+    @app.get("/ui/tasks/new")
+    async def ui_new_task() -> HTMLResponse:
+        ppo = """# PPO TaskSpec (YAML)
+workload: ppo  # 任务类型（必填）：ppo｜grpo｜sft
+code_path: /private/common/code/verl/verl_repo  # 代码路径（必填）：v3.0 固定使用 common 下的 verl 快照（不支持用户自定义代码）
+model_id: Qwen/Qwen2.5-0.5B-Instruct  # 基础模型（必填）：HuggingFace 模型 ID 或 /private/... 本地模型路径
+train_file: /private/common/datasets/gsm8k/train.parquet  # 训练数据（必填）：parquet 文件路径（支持 /private/common/datasets 或 /private/users/<user>/datasets）
+val_file: /private/common/datasets/gsm8k/test.parquet  # 验证数据（必填）：parquet 文件路径（VERL 侧会用来构建 val dataset，不能为 null）
+
+# nnodes: 2  # 训练节点数（可选，默认：2）
+# n_gpus_per_node: 4  # 每节点 GPU 数（可选，默认：4）
+
+# total_epochs: 1  # 总训练 epoch（可选，默认：1）
+# total_training_steps: null  # 总训练 step（可选，默认：null；不传则让 VERL 按 epochs 和数据长度自动推导）
+# save_freq: 10  # checkpoint 保存频率（step）（可选，默认：10）
+# test_freq: null  # 验证频率（step）（可选，默认：null；训练端会当成 -1=不验证）
+
+# submission_id: ""  # Ray submission_id（可选，默认空；通常由服务自动生成，无需填写）
+""".strip()
+        grpo = """# GRPO TaskSpec (YAML)
+workload: grpo  # 任务类型（必填）：ppo｜grpo｜sft（grpo 会自动启用对应的算法配置）
+code_path: /private/common/code/verl/verl_repo  # 代码路径（必填）：v3.0 固定使用 common 下的 verl 快照（不支持用户自定义代码）
+model_id: Qwen/Qwen2.5-0.5B-Instruct  # 基础模型（必填）：HuggingFace 模型 ID 或 /private/... 本地模型路径
+train_file: /private/common/datasets/gsm8k/train.parquet  # 训练数据（必填）：parquet 文件路径（支持 /private/common/datasets 或 /private/users/<user>/datasets）
+val_file: /private/common/datasets/gsm8k/test.parquet  # 验证数据（必填）：parquet 文件路径（VERL 侧会用来构建 val dataset，不能为 null）
+
+# nnodes: 2  # 训练节点数（可选，默认：2）
+# n_gpus_per_node: 4  # 每节点 GPU 数（可选，默认：4）
+
+# total_epochs: 1  # 总训练 epoch（可选，默认：1）
+# total_training_steps: null  # 总训练 step（可选，默认：null；不传则让 VERL 按 epochs 和数据长度自动推导）
+# save_freq: 10  # checkpoint 保存频率（step）（可选，默认：10）
+# test_freq: null  # 验证频率（step）（可选，默认：null；训练端会当成 -1=不验证）
+
+# submission_id: ""  # Ray submission_id（可选，默认空；通常由服务自动生成，无需填写）
+""".strip()
+        sft = """# SFT TaskSpec (YAML)
+workload: sft  # 任务类型（必填）：ppo｜grpo｜sft
+code_path: /private/common/code/verl/verl_repo  # 代码路径（必填）：v3.0 固定使用 common 下的 verl 快照（不支持用户自定义代码）
+model_id: Qwen/Qwen2.5-0.5B-Instruct  # 基础模型（必填）：HuggingFace 模型 ID 或 /private/... 本地模型路径
+train_file: /private/common/datasets/gsm8k_sft/train.parquet  # 训练数据（必填）：parquet 文件路径（支持 /private/common/datasets 或 /private/users/<user>/datasets）
+val_file: /private/common/datasets/gsm8k_sft/test.parquet  # 验证数据（必填）：parquet 文件路径（VERL 侧会用来构建 val dataset，不能为 null）
+
+# nnodes: 2  # 训练节点数（可选，默认：2；单机可设 1）
+# n_gpus_per_node: 4  # 每节点 GPU 数（可选，默认：4；单卡可设 1）
+
+# total_epochs: 1  # 总训练 epoch（可选，默认：1）
+# total_training_steps: null  # 总训练 step（可选，默认：null；不传则让 VERL 按 epochs 和数据长度自动推导）
+# save_freq: 10  # checkpoint 保存频率（step）（可选，默认：10）
+# test_freq: null  # 验证频率（step）（可选，默认：null；训练端会当成 -1=不验证）
+
+# trainer_device: cpu  # 仅 SFT 生效：driver 侧 device（可选，默认：cpu）
+# submission_id: ""  # Ray submission_id（可选，默认空；通常由服务自动生成，无需填写）
+""".strip()
+        adv = """# Advanced TaskSpec (YAML) - v3.6
+kind: advanced  # 任务类型（必填）：advanced（自定义 command）
+# 说明：平台统一按 "advanced" 做任务分类与 task_id 命名（不按 ppo/grpo/sft 细分）。
+#
+# 自定义训练命令：平台会做 $HOME 宏替换：
+# - $HOME -> /private/users/<user>
+# - $HOME/common/datasets -> /private/datasets（共享只读数据）
+# - $HOME/common/hf -> /private/hf（共享只读 HF cache）
+#
+# W&B（v3.6）：
+# - 平台会在 runtime_env 注入 WANDB_BASE_URL/WANDB_API_KEY/WANDB_DIR
+# - 以及注入以下 env，供 Advanced command 使用（无需用户手动修改 project）：
+#   - MVP_TRAINER_LOGGER: "console" 或 "[console,wandb]"
+#   - MVP_WANDB_PROJECT: "<user_id>_project"
+#   - MVP_WANDB_RUN: "<ray_submission_id>"
+#
+nnodes: 2  # 训练节点数（必填）：用于平台队列调度与资源预检查
+n_gpus_per_node: 4  # 每节点 GPU 数（必填）：用于平台队列调度与资源预检查
+
+command: |
+  PYTHONUNBUFFERED=1 \
+  python3 -m verl.trainer.main_ppo \
+    data.train_files=$HOME/common/datasets/gsm8k/train.parquet \
+    data.val_files=$HOME/common/datasets/gsm8k/test.parquet \
+    data.train_batch_size=256 \
+    data.max_prompt_length=512 \
+    data.max_response_length=512 \
+    actor_rollout_ref.model.path=Qwen/Qwen2.5-0.5B-Instruct \
+    actor_rollout_ref.actor.optim.lr=1e-6 \
+    actor_rollout_ref.actor.ppo_mini_batch_size=64 \
+    actor_rollout_ref.actor.ppo_micro_batch_size_per_gpu=4 \
+    actor_rollout_ref.rollout.name=vllm \
+    actor_rollout_ref.rollout.log_prob_micro_batch_size_per_gpu=8 \
+    actor_rollout_ref.rollout.tensor_model_parallel_size=1 \
+    actor_rollout_ref.rollout.gpu_memory_utilization=0.4 \
+    actor_rollout_ref.ref.log_prob_micro_batch_size_per_gpu=4 \
+    critic.optim.lr=1e-5 \
+    critic.model.path=Qwen/Qwen2.5-0.5B-Instruct \
+    critic.ppo_micro_batch_size_per_gpu=4 \
+    algorithm.kl_ctrl.kl_coef=0.001 \
+    trainer.logger=${MVP_TRAINER_LOGGER} \
+    trainer.project_name=${MVP_WANDB_PROJECT} \
+    trainer.experiment_name=${MVP_WANDB_RUN} \
+    trainer.val_before_train=False \
+    trainer.nnodes=2 \
+    trainer.n_gpus_per_node=4 \
+    trainer.total_epochs=1 \
+    trainer.total_training_steps=10 \
+    trainer.save_freq=10 \
+    trainer.test_freq=-1 \
+    trainer.resume_mode=disable \
+    trainer.default_local_dir=checkpoints \
+    +ray_kwargs.ray_init.address=auto \
+    hydra.run.dir=logs/hydra
+
+# 可选：自定义 reward（方式 A：直接写在 command 里）
+# command 里增加如下 overrides：
+#   custom_reward_function.path=$HOME/code/reward.py
+#   custom_reward_function.name=compute_score
+""".strip()
+        merge = """# Model Merge (YAML) - v3.5 (Advanced command)
+# 用途：将 VERL 训练产生的 FSDP 分片 checkpoint 合并为 HuggingFace 格式目录。
+#
+# 你需要把 <RAY_SUBMISSION_ID> 和 <GLOBAL_STEP> 替换成真实值：
+# - submission id：在 Tasks 详情页里看到的 `ray_submission_id`（如 mvp2-...--a01）
+# - global_step：对应 checkpoints 下的 global_step_xxx 目录（如 global_step_10）
+#
+# 注意：这里不需要 GPU，建议把 n_gpus_per_node 设为 0，这样不受训练任务占用 GPU 的影响。
+kind: advanced
+nnodes: 1
+n_gpus_per_node: 0
+
+command: |
+  python3 -m verl.model_merger merge \
+    --backend fsdp \
+    --local_dir $HOME/jobs/<RAY_SUBMISSION_ID>/checkpoints/<GLOBAL_STEP>/actor \
+    --target_dir $HOME/jobs/<RAY_SUBMISSION_ID>/checkpoints/<GLOBAL_STEP>/actor/huggingface
+""".strip()
+        evaluation = """# Evaluation (YAML) - v3.6 (Advanced command)
+# 用途：对“已生成的结果 parquet”做离线评估（基于 custom reward function），示例使用 VERL 内置 main_eval。
+#
+# 说明：
+# - 你需要准备一个包含生成 responses 的 parquet，并替换 <EVAL_PARQUET>（示例放在某个 job 目录下）。
+# - main_eval 会在 Ray 上并发计算，因此这里也用 +ray_kwargs 连接已有 Ray 集群。
+#
+kind: advanced
+nnodes: 1
+n_gpus_per_node: 0
+
+command: |
+  PYTHONUNBUFFERED=1 \
+  python3 -m verl.trainer.main_eval \
+    data.path=$HOME/jobs/<RAY_SUBMISSION_ID>/outputs/<EVAL_PARQUET>.parquet \
+    +ray_kwargs.ray_init.address=auto
+
+# 可选：指定 parquet schema（按你的 parquet 列名调整）
+#   data.response_key=responses
+#   data.data_source_key=data_source
+#   data.reward_model_key=reward_model
+#
+# 可选：自定义 reward（方式 A：用户自行提供 reward.py）
+#   custom_reward_function.path=$HOME/code/reward.py
+#   custom_reward_function.name=compute_score
+""".strip()
+        body = f"""
+<h1>New Task</h1>
+<div class="card">
+  <div class="muted">
+    Paste TaskSpec YAML and submit to API server.
+    Basic tasks require <code>code_path</code>; Advanced tasks use <code>kind: advanced</code> with a custom <code>command</code>.
+  </div>
+  <div style="height:10px"></div>
+  <div class="row">
+    <button class="btn" id="mode-yaml">YAML 模式</button>
+    <button class="btn" id="mode-form">表单模式</button>
+  </div>
+  <div style="height:10px"></div>
+
+  <div id="panel-yaml">
+  <div class="row">
+    <button class="btn" id="tpl-ppo">PPO example</button>
+    <button class="btn" id="tpl-grpo">GRPO example</button>
+    <button class="btn" id="tpl-sft">SFT example</button>
+    <button class="btn" id="tpl-adv">Advanced example</button>
+    <button class="btn" id="tpl-eval">Evaluation example</button>
+    <button class="btn" id="tpl-merge">Model merge example</button>
+  </div>
+  <div style="height:10px"></div>
+  <textarea id="yaml" rows="16">{html.escape(ppo)}</textarea>
+  </div>
+
+  <div id="panel-form" style="display:none">
+    <div class="row">
+      <div style="min-width:240px">
+        <div class="muted">模板</div>
+        <div style="height:6px"></div>
+        <select id="f-tpl" style="width:240px; padding:10px 12px; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.12);">
+          <option value="ppo">PPO</option>
+          <option value="grpo">GRPO</option>
+          <option value="sft">SFT</option>
+          <option value="advanced">Advanced</option>
+          <option value="merge">Model Merge</option>
+        </select>
+      </div>
+      <div class="muted" style="flex:1; min-width:260px">
+        表单模式会生成 TaskSpec YAML 并用同一个 API 提交；可随时切回 YAML 模式查看/编辑生成结果。
+      </div>
+    </div>
+
+    <div style="height:14px"></div>
+
+    <div id="f-basic">
+      <div class="row">
+        <div style="flex:1; min-width:260px">
+          <div class="muted">code_path</div>
+          <div style="height:6px"></div>
+          <input id="f-code-path" />
+        </div>
+        <div style="flex:1; min-width:260px">
+          <div class="muted">model_id</div>
+          <div style="height:6px"></div>
+          <input id="f-model-id" />
+        </div>
+      </div>
+      <div style="height:10px"></div>
+      <div class="row">
+        <div style="flex:1; min-width:260px">
+          <div class="muted">train_file</div>
+          <div style="height:6px"></div>
+          <input id="f-train-file" />
+        </div>
+        <div style="flex:1; min-width:260px">
+          <div class="muted">val_file</div>
+          <div style="height:6px"></div>
+          <input id="f-val-file" />
+        </div>
+      </div>
+      <div style="height:10px"></div>
+      <div class="row">
+        <div style="min-width:220px">
+          <div class="muted">nnodes</div>
+          <div style="height:6px"></div>
+          <div class="row" style="gap:8px">
+            <button class="btn" id="f-nnodes-dec">-</button>
+            <input id="f-nnodes" type="number" min="1" step="1" style="width:120px" />
+            <button class="btn" id="f-nnodes-inc">+</button>
+          </div>
+        </div>
+        <div style="min-width:240px">
+          <div class="muted">n_gpus_per_node</div>
+          <div style="height:6px"></div>
+          <div class="row" style="gap:8px">
+            <button class="btn" id="f-gpn-dec">-</button>
+            <input id="f-gpn" type="number" min="0" step="1" style="width:120px" />
+            <button class="btn" id="f-gpn-inc">+</button>
+          </div>
+        </div>
+        <div style="min-width:220px">
+          <div class="muted">total_epochs</div>
+          <div style="height:6px"></div>
+          <div class="row" style="gap:8px">
+            <button class="btn" id="f-epochs-dec">-</button>
+            <input id="f-epochs" type="number" min="1" step="1" style="width:120px" />
+            <button class="btn" id="f-epochs-inc">+</button>
+          </div>
+        </div>
+        <div style="min-width:260px">
+          <div class="muted">total_training_steps（可选）</div>
+          <div style="height:6px"></div>
+          <input id="f-steps" type="number" min="1" step="1" placeholder="留空表示不传（让 VERL 自动推导）" />
+        </div>
+      </div>
+      <div style="height:10px"></div>
+      <div class="row">
+        <div style="min-width:220px">
+          <div class="muted">save_freq</div>
+          <div style="height:6px"></div>
+          <input id="f-save-freq" type="number" min="1" step="1" style="width:160px" />
+        </div>
+        <div style="min-width:260px">
+          <div class="muted">test_freq（可选）</div>
+          <div style="height:6px"></div>
+          <input id="f-test-freq" type="number" min="1" step="1" placeholder="留空表示不传（训练端会当成 -1=不验证）" />
+        </div>
+        <div id="f-sft-device-wrap" style="min-width:260px; display:none">
+          <div class="muted">trainer_device（仅 SFT）</div>
+          <div style="height:6px"></div>
+          <select id="f-trainer-device" style="width:200px; padding:10px 12px; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.12);">
+            <option value="cpu">cpu</option>
+            <option value="cuda">cuda</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div id="f-adv" style="display:none">
+      <div class="row">
+        <div style="min-width:220px">
+          <div class="muted">nnodes</div>
+          <div style="height:6px"></div>
+          <div class="row" style="gap:8px">
+            <button class="btn" id="f-adv-nnodes-dec">-</button>
+            <input id="f-adv-nnodes" type="number" min="1" step="1" style="width:120px" />
+            <button class="btn" id="f-adv-nnodes-inc">+</button>
+          </div>
+        </div>
+        <div style="min-width:240px">
+          <div class="muted">n_gpus_per_node</div>
+          <div style="height:6px"></div>
+          <div class="row" style="gap:8px">
+            <button class="btn" id="f-adv-gpn-dec">-</button>
+            <input id="f-adv-gpn" type="number" min="0" step="1" style="width:120px" />
+            <button class="btn" id="f-adv-gpn-inc">+</button>
+          </div>
+        </div>
+      </div>
+      <div style="height:10px"></div>
+      <div class="muted">command</div>
+      <div style="height:6px"></div>
+      <textarea id="f-command" rows="10"></textarea>
+      <div style="height:10px"></div>
+      <div class="muted">
+        Tips:
+        Advanced 模式只允许执行 <code>python3 -m verl.*</code>。
+        如果你需要自定义 reward，可把 <code>reward.py</code> 上传到 <code>$HOME/code/</code> 并在 command 里引用。
+      </div>
+    </div>
+  </div>
+
+  <div style="height:10px"></div>
+  <div class="row">
+    <button class="btn" id="submit">Submit</button>
+    <a class="btn" href="/ui/tasks" style="display:inline-block">Back</a>
+  </div>
+  <div style="height:10px"></div>
+  <pre id="msg" class="muted"></pre>
+</div>
+""".strip()
+
+        tpl_ppo = ppo.replace("\n", "\\n").replace('"', '\\"')
+        tpl_grpo = grpo.replace("\n", "\\n").replace('"', '\\"')
+        tpl_sft = sft.replace("\n", "\\n").replace('"', '\\"')
+        tpl_adv = adv.replace("\n", "\\n").replace('"', '\\"')
+        tpl_eval = evaluation.replace("\n", "\\n").replace('"', '\\"')
+        tpl_merge = merge.replace("\n", "\\n").replace('"', '\\"')
+
+        script = (
+            """
+document.getElementById("nav-ray-dashboard").href = curOriginWithPort(8265);
+const yamlEl = document.getElementById("yaml");
+const msg = document.getElementById("msg");
+
+const TPL_PPO = "__TPL_PPO__";
+const TPL_GRPO = "__TPL_GRPO__";
+const TPL_SFT = "__TPL_SFT__";
+const TPL_ADV = "__TPL_ADV__";
+const TPL_EVAL = "__TPL_EVAL__";
+const TPL_MERGE = "__TPL_MERGE__";
+
+function showMode(mode) {
+  const a = document.getElementById("mode-yaml");
+  const b = document.getElementById("mode-form");
+  const py = document.getElementById("panel-yaml");
+  const pf = document.getElementById("panel-form");
+  if (mode === "yaml") {
+    a.classList.add("active"); b.classList.remove("active");
+    py.style.display = ""; pf.style.display = "none";
+  } else {
+    b.classList.add("active"); a.classList.remove("active");
+    pf.style.display = ""; py.style.display = "none";
+  }
+}
+
+function yamlQuote(v) {
+  v = String(v || "");
+  if (!v) return '""';
+  if (/^[A-Za-z0-9_./:-]+$/.test(v) && !v.includes("#")) return v;
+  return '"' + v.replaceAll("\\\\","\\\\\\\\").replaceAll('"','\\\\"') + '"';
+}
+
+function updateFormVisibility() {
+  const tpl = document.getElementById("f-tpl").value;
+  const basic = document.getElementById("f-basic");
+  const adv = document.getElementById("f-adv");
+  const sftDev = document.getElementById("f-sft-device-wrap");
+  if (tpl === "advanced" || tpl === "merge") {
+    basic.style.display = "none";
+    adv.style.display = "";
+    sftDev.style.display = "none";
+  } else {
+    basic.style.display = "";
+    adv.style.display = "none";
+    sftDev.style.display = (tpl === "sft") ? "" : "none";
+  }
+}
+
+function updatePreview() {
+  const tpl = document.getElementById("f-tpl").value;
+  if (tpl === "advanced" || tpl === "merge") {
+    const nnodes = Number(document.getElementById("f-adv-nnodes").value || "1") || 1;
+    const gpn = Number(document.getElementById("f-adv-gpn").value || "0") || 0;
+    const cmd = (document.getElementById("f-command").value || "").trimEnd();
+    const out = `kind: advanced\\n` +
+      `nnodes: ${nnodes}\\n` +
+      `n_gpus_per_node: ${gpn}\\n\\n` +
+      `command: |\\n` +
+      cmd.split("\\n").map(line => "  " + line).join("\\n") + "\\n";
+    return out;
+  }
+
+  const workload = tpl;
+  const codePath = document.getElementById("f-code-path").value || "";
+  const modelId = document.getElementById("f-model-id").value || "";
+  const trainFile = document.getElementById("f-train-file").value || "";
+  const valFile = document.getElementById("f-val-file").value || "";
+  const nnodes = Number(document.getElementById("f-nnodes").value || "2") || 2;
+  const gpn = Number(document.getElementById("f-gpn").value || "4") || 4;
+  const epochs = Number(document.getElementById("f-epochs").value || "1") || 1;
+  const steps = (document.getElementById("f-steps").value || "").trim();
+  const saveFreq = Number(document.getElementById("f-save-freq").value || "10") || 10;
+  const testFreq = (document.getElementById("f-test-freq").value || "").trim();
+  const trainerDevice = document.getElementById("f-trainer-device").value || "cpu";
+
+  let y = "";
+  y += `workload: ${workload}\\n`;
+  y += `code_path: ${yamlQuote(codePath)}\\n`;
+  y += `model_id: ${yamlQuote(modelId)}\\n`;
+  y += `train_file: ${yamlQuote(trainFile)}\\n`;
+  y += `val_file: ${yamlQuote(valFile)}\\n`;
+  y += `nnodes: ${nnodes}\\n`;
+  y += `n_gpus_per_node: ${gpn}\\n`;
+  y += `total_epochs: ${epochs}\\n`;
+  if (steps) y += `total_training_steps: ${Number(steps)}\\n`;
+  y += `save_freq: ${saveFreq}\\n`;
+  if (testFreq) y += `test_freq: ${Number(testFreq)}\\n`;
+  if (workload === "sft") y += `trainer_device: ${trainerDevice}\\n`;
+  return y;
+}
+
+function bindStepper(inputId, decId, incId, min) {
+  const inp = document.getElementById(inputId);
+  document.getElementById(decId).onclick = () => { inp.value = String(Math.max(min, (Number(inp.value || "0") || 0) - 1)); inp.dispatchEvent(new Event("input")); };
+  document.getElementById(incId).onclick = () => { inp.value = String((Number(inp.value || "0") || 0) + 1); inp.dispatchEvent(new Event("input")); };
+}
+
+document.getElementById("tpl-ppo").onclick = () => { yamlEl.value = TPL_PPO; };
+document.getElementById("tpl-grpo").onclick = () => { yamlEl.value = TPL_GRPO; };
+document.getElementById("tpl-sft").onclick = () => { yamlEl.value = TPL_SFT; };
+document.getElementById("tpl-adv").onclick = () => { yamlEl.value = TPL_ADV; };
+document.getElementById("tpl-eval").onclick = () => { yamlEl.value = TPL_EVAL; };
+document.getElementById("tpl-merge").onclick = () => { yamlEl.value = TPL_MERGE; };
+
+document.getElementById("f-code-path").value = "/private/common/code/verl/verl_repo";
+document.getElementById("f-model-id").value = "Qwen/Qwen2.5-0.5B-Instruct";
+document.getElementById("f-train-file").value = "/private/common/datasets/gsm8k/train.parquet";
+document.getElementById("f-val-file").value = "/private/common/datasets/gsm8k/test.parquet";
+document.getElementById("f-nnodes").value = "2";
+document.getElementById("f-gpn").value = "4";
+document.getElementById("f-epochs").value = "1";
+document.getElementById("f-save-freq").value = "10";
+document.getElementById("f-trainer-device").value = "cpu";
+
+document.getElementById("f-adv-nnodes").value = "2";
+document.getElementById("f-adv-gpn").value = "4";
+document.getElementById("f-command").value = `PYTHONUNBUFFERED=1 \\\\\\npython3 -m verl.trainer.main_ppo \\\\\\n  data.train_files=$HOME/common/datasets/gsm8k/train.parquet \\\\\\n  data.val_files=$HOME/common/datasets/gsm8k/test.parquet \\\\\\n  +ray_kwargs.ray_init.address=auto`;
+
+bindStepper("f-nnodes", "f-nnodes-dec", "f-nnodes-inc", 1);
+bindStepper("f-gpn", "f-gpn-dec", "f-gpn-inc", 0);
+bindStepper("f-epochs", "f-epochs-dec", "f-epochs-inc", 1);
+bindStepper("f-adv-nnodes", "f-adv-nnodes-dec", "f-adv-nnodes-inc", 1);
+bindStepper("f-adv-gpn", "f-adv-gpn-dec", "f-adv-gpn-inc", 0);
+
+document.getElementById("f-tpl").onchange = () => {
+  const tpl = document.getElementById("f-tpl").value;
+  if (tpl === "ppo") {
+    document.getElementById("f-train-file").value = "/private/common/datasets/gsm8k/train.parquet";
+    document.getElementById("f-val-file").value = "/private/common/datasets/gsm8k/test.parquet";
+  } else if (tpl === "grpo") {
+    document.getElementById("f-train-file").value = "/private/common/datasets/gsm8k/train.parquet";
+    document.getElementById("f-val-file").value = "/private/common/datasets/gsm8k/test.parquet";
+  } else if (tpl === "sft") {
+    document.getElementById("f-train-file").value = "/private/common/datasets/gsm8k_sft/train.parquet";
+    document.getElementById("f-val-file").value = "/private/common/datasets/gsm8k_sft/test.parquet";
+  } else if (tpl === "advanced") {
+    document.getElementById("f-adv-nnodes").value = "2";
+    document.getElementById("f-adv-gpn").value = "4";
+    document.getElementById("f-command").value = TPL_ADV.split("command: |")[1]?.trimStart() || document.getElementById("f-command").value;
+  } else if (tpl === "merge") {
+    document.getElementById("f-adv-nnodes").value = "1";
+    document.getElementById("f-adv-gpn").value = "0";
+    document.getElementById("f-command").value = TPL_MERGE.split("command: |")[1]?.trimStart() || document.getElementById("f-command").value;
+  }
+  updateFormVisibility();
+  updatePreview();
+};
+
+for (const id of ["f-code-path","f-model-id","f-train-file","f-val-file","f-nnodes","f-gpn","f-epochs","f-steps","f-save-freq","f-test-freq","f-trainer-device","f-adv-nnodes","f-adv-gpn","f-command"]) {
+  const el = document.getElementById(id);
+  if (el) el.oninput = () => updatePreview();
+}
+
+document.getElementById("mode-yaml").onclick = () => {
+  // When switching to YAML, sync from form if form is visible.
+  const formVisible = document.getElementById("panel-form").style.display !== "none";
+  if (formVisible) yamlEl.value = updatePreview();
+  showMode("yaml");
+};
+document.getElementById("mode-form").onclick = () => {
+  showMode("form");
+};
+
+showMode("yaml");
+
+document.getElementById("submit").onclick = async () => {
+  msg.textContent = "Submitting...";
+  const body = (document.getElementById("panel-form").style.display !== "none") ? updatePreview() : yamlEl.value;
+  const resp = await apiFetch("/api/v2/tasks", { method: "POST", headers: {"Content-Type":"text/plain"}, body });
+  const text = await resp.text();
+  if (!resp.ok) { msg.textContent = "Error: " + resp.status + "\\n" + text; return; }
+  const obj = JSON.parse(text);
+  msg.textContent = "OK: " + fmtJson(obj);
+  if (obj.task_id) window.location.href = "/ui/tasks/" + obj.task_id;
+};
+		""".strip()
+            .replace("__TPL_PPO__", tpl_ppo)
+            .replace("__TPL_GRPO__", tpl_grpo)
+            .replace("__TPL_SFT__", tpl_sft)
+            .replace("__TPL_ADV__", tpl_adv)
+            .replace("__TPL_EVAL__", tpl_eval)
+            .replace("__TPL_MERGE__", tpl_merge)
+        )
+        return HTMLResponse(content=page("New Task", "new", body, script))
+