企业官网建设流程全解析

• 人工智能
• 大模型
• 多模态
• 代码模型
• 媒体生成

AesCode-8B 是一个基于 Qwen3-VL-8B-Instruct 的多模态代码生成模型，它把幻灯片、海报、仪表盘等信息密集的视觉作品生成为可编辑、可校验的HTML/CSS代码。它的训练配方是"冷启动 SFT + GDPO 强化学习"，其中最关键的设计就是7 条解耦的跨模态奖励通道——通过组内归一化，让"能执行"这类强信号无法淹没"留白舒适"这类弱信号，最终让 8B 小模型的综合得分追平甚至超过更大的闭源模型。

为什么单条奖励不够用：RL 训练中的"信号淹没"问题

如果用一个标量分数来评价模型生成的一整页 HTML，问题会立刻出现：

• 这个分数混合了"能否运行""文字数字对不对""布局好不好看""配色是否高级"等性质完全不同的属性；
• 其中某些信号天然更"强"——比如页面只要不报错，执行分就拿到了，模型很容易靠优化这一点获得大部分梯度；
• 而更微妙、同样重要的信号（留白节奏、整体设计风格）因为占比小，会被强信号淹没，模型根本"听不见"。

AesCode 官方在 README.md 中一句话点破了这个设计动机：

每个通道在 rollout 组内先做归一化再聚合，这样主导性信号就无法淹没更弱的信号。

第一步：设计图（Design Graph）——把整张画布变成"责任清单"

在谈 7 条通道之前，AesCode 先解决了一个前置问题：奖励从哪里来？

它的答案是设计图（design graph）：每个生成目标都被表示成一张描述整张画布的图结构，画布上的每个元素、每种属性、每层关系都是图中的节点或边。这样做的好处是：

1. 每一项性质都可以单独归因——"标题溢出边界"和"配色不协调"是两个独立事件，分别记账；
2. 奖励不再是黑盒标量，而是能从图中逐条推导出来的分项得分。

从这张设计图出发，奖励分成两个互补家族：

第二步：7大奖励通道逐一拆解

两条奖励家族合起来，一共形成7 条奖励通道：

前 4 条是程序化可验证的"硬指标"（对应评测表中的 Rule 维度），后 3 条是**需要"眼睛"**才能判断的"软指标"（对应 Visual 维度）。两条腿走路，保证模型既"写得对"又"画得美"。

解耦归一化：防止强信号淹没弱信号的关键动作

通道分好还不够，AesCode 在聚合前做了一步关键操作：

每条奖励先在自己的rollout 组内归一化（同一 prompt 的多次采样互为参照），然后再聚合进总奖励。

这一步的含义是：

• 通道与通道之间重新可比：哪怕某通道原始分值波动范围天然更大（比如执行分几乎总是满分），归一化后它也不会主导总奖励；
• 模型只能靠"相对做得好"拿分：一次采样组里做得最好的版本得分高，做得差的得分低，梯度方向始终指向可改进的维度；
• 配合训练算法GDPO，整个流程不需要 critic，也不需要单独训练的奖励模型——所有奖励都由验证器和 VLM 评审在线算出，省掉一整套奖励模型的维护成本。

沙箱校验：一页 HTML 如何变成 7 个分数

这些奖励不是"看代码猜"，而是真刀真枪渲染出来的：

1. 候选 HTML 被送入一个沙箱化 Playwright 浏览器，外部网络请求全部阻断；
2. 从渲染结果中导出DOM 树、计算样式（computed styles）、元素包围盒、控制台状态和整页截图；
3. 验证器基于 DOM 和包围盒校验 text / boundary / tablechart 等硬指标；
4. 截图交给 VLM 评审，对照 Visual Graph Rubric 打出 layout / whitespace / design 等软指标。

也就是说，模型"说"自己画对了不算数，浏览器"画"出来才算数——这正是"奖励可验证"的底气来源。

训练配方与实战效果：8B 追平更大模型

完整训练流程（详见 README.md）：

• 冷启动 SFT：3,000 条演示，学习率 1e-5；
• 强化学习：GDPO，7,408 个 prompt × 400 步；每步 128 个 prompt、每个 8 次 rollout；AdamW 恒定学习率 5e-6，KL 与熵系数均为 0.001；
• 引擎采用 verl 的 FSDP-vLLM 混合方案，rollout 温度 1.0。

300 个信息图样本上的评测结果（每条 prompt 生成 3 次取平均）：

AesCode-8B 相比带参考图的 Qwen3-VL-8B 基座，Visual 提升 31.1 分、Overall 提升 31.0 分，且视觉提升并没有以牺牲可验证正确性为代价——Rule 反而从 59.14 拉到 90.07。这就是"解耦奖励 + 归一化"的直接回报：弱信号不再被淹没，软指标才真正涨得上去。

快速上手：三步跑起 AesCode-8B

1️⃣ 克隆模型仓库

git clone https://gitcode.com/hf_mirrors/microsoft/AesCode-8B

2️⃣ 环境要求：transformers>=4.57，模型按 Qwen3-VL 的对话接口使用，参考图是可选的——缺图推理只损失 1.00 分 Visual（基座要损失 19.55 分）。

3️⃣ 批量服务化：用 vLLM 部署并允许每条 prompt 附带 2 张图：

vllm serve microsoft/AesCode-8B --limit-mm-per-prompt image=2 --max-model-len 24576

推荐采样参数：temperature 0.8、top-p 0.95、最多 12,000 个输出 token。

仓库文件指南：关键文件在哪里

小结：把"好看"也变成可优化的目标

AesCode-8B 的做法给多模态强化学习提供了一个清晰范式：

1. 用设计图把画面拆成可逐项归因的属性清单；
2. 用验证器 + VLM 评审两条腿，覆盖"可解析"与"不可解析"两类属性，共 7 条奖励通道；
3. 用组内归一化让每条通道话语权对等，强信号再也淹没不了弱信号。

对于想复现"代码生成 + 视觉审美"双优模型的同学来说，这套解耦跨模态奖励的配方，值得仔细抄作业。

• 人工智能
• 大模型
• 多模态
• 代码模型
• 媒体生成