Multimodal Verification for Agentic Coding Loop

一篇 position / vision paper:论证 agentic coding loop 需要一个显式的 multimodal verification 环节,用来检查代码产物在渲染、截图、布局、空间关系和用户意图层面是否真的正确。Image-to-code 是最自然的实验载体与代表性实例,而非全部 scope。

Position / Vision Paper + Small Experiments candidate-conditioned · evidence-grounded
Statusactive
Owner我 / Codex
Recent Sync2026-07-15 VeriHarness V0.2 formal 60/60 publication
Current FocusV0.2 prompt-only verification ablation analysis

这是什么

很多 coding-agent 任务的成功标准并不只存在于代码文本、编译结果或单元测试里,而是存在于最终可见的多模态产物里:页面是否和目标截图一致、UI 组件是否在正确位置、chart 是否表达了正确的数据关系、文字是否被遮挡或截断、prompt 里的视觉要求是否真的出现在渲染结果里。本项目把 multimodal verification 抬升为 agentic coding loop 中独立且必要的环节,并用最小实验观察它是否值得继续研究。

本看板按左侧目录分页组织。下面是各板块的入口——内容都直接放在各自页面里,便于阅读。

目录 / 快速进入

总览

内部迭代

外部项目

VDiff CSS 校准速记

skills/calibrate_css_spacing_v6.md 中文整理

这个 skill 的职责是:在字体已经由 1_font_fixed.html 修过以后,继续调整 HTML 的 CSS,使渲染出来的元素位置、宽度、间距和结构对齐尽量贴近 PDF 的目标 bbox。它不是重新生成页面,而是基于测量证据做 CSS 校准。

输入与输出

输入是某个 case 的 1_font_fixed.html、case 名、输出目录、job id 和 demo server;输出是 1_css_fixed.html

完成标准

Rubrics 全部通过,并且校准单元的 dTdLdWdH 最大偏差都约 ≤ 10px。

核心原则

Rubrics 决定是否完成;measurement 负责指出布局和间距偏差。delta 小不等于视觉一定正确。

校准流程
  1. 把输入 HTML 复制为 1_css_fixed.html,已有则复用,保留上一轮校准进度。
  2. 运行 ground_truth_v2.py 生成或复用 skeleton、salient elements 和 ground_truth.json
  3. 后台启动 rubrics_gen.py,生成并过滤稳定 rubrics。
  4. 先读 ground_truth.jsonskeleton,理解页面区域、嵌套和 out-of-flow 元素。
  5. 运行 measure.py --debug 看 baseline delta;之后按 rubrics 和 delta 循环修 CSS、测量、checkpoint。
如何读测量结果

ground_truth.json 里的 skeleton 是页面结构导航:区域 bbox 显示空间分区,tree_id 显示 DOM 父子关系,out-of-flow 元素最后处理。layout_measurement.json 记录每个元素的目标值、当前值和 delta。

排查时按 tree_id 把 sibling 分组。如果容器和子元素有相似偏移,优先修容器;如果某个子元素 residual 很大,再单独修它。表格整体是校准单元,单元格主要用于发现列宽和对齐问题。

常用修复手段
垂直间距:渲染太低就减少上边距、前一个 sibling 下边距或父级 padding;渲染太高就增加上边距。 容器 padding:子元素整体横向偏移且容器宽度也不对时,根据子元素目标 bbox 反推左右 padding。 元素 max-width:单个文本过宽时设置最大宽度;如果影响行数,再配合小步 letter-spacing 表格 cell padding:表格过高时减少 th/td 的上下 padding,必要时设 border-spacing: 0 Grid 重排:当 PDF 的行列、跨栏或非均匀列宽无法用普通 gap 表达时,重算 row/column track。 特殊换行:对 shape-outside、drop cap、复杂 wrapping 使用逐行 bbox 推导参数,不靠肉眼试错。 资产重提取:图片裁剪、纹理、阴影、透明度或比例本身错了,CSS 修不了,需要重新提取 asset。
硬约束
  • 所有 CSS 数值都应从 ground truth bbox、measurement delta 或逐行 bbox 推导,不硬编码拍脑袋常量。
  • 不要给 flex children 加 padding;不要轻易用 position: absolute,它会脱离文档流并破坏父子布局。
  • 每轮修复后重新跑 measure.py;measurement 工具当黑盒使用,不读源码、不逆向。
  • 字体大小调整是最后手段,优先使用 letter-spacingmax-width 和容器宽度。
  • 如果 rubrics pass count 下降,说明新改动引入回归,应先诊断或换方案,再继续。

数据 & 积累 Notes