gopaljigaur's picture
download
raw
66.1 kB
<!DOCTYPE html>
<!--
Vendored + adapted into posterly from ARIS (Auto-claude-code-research-in-sleep),
skill paper-poster-html. Origin: https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep
Upstream tokenization: MIT (c) 2026 wanshuiyin -- ../LICENSES/aris-MIT.txt
This is the tokenized form of posterly's own neutral template; the class names and
content are posterly's own (c) 2026 Ruishuo Chen. As an adapted derivative this file
ships as part of posterly under AGPL-3.0. See ../NOTICE.md.
-->
<!--
============================================================
TEMPLATE: landscape_4col (ARIS fork)
CANVAS: 60in × 36in landscape (ICML / NeurIPS / generic landscape)
LAYOUT: header → optional banner → 4 body columns → optional takeaways → footer
USE WHEN: standard ML conference poster with 3-5 content cards per column,
mix of figures + equations + small tables.
HOW TO USE:
1. Copy this file to your working directory as `poster.html`.
2. Edit the DESIGN TOKENS in `:root` to your lab/venue colors.
3. Replace TODO content placeholders (search for "TODO").
4. Run `python tools/run_gates.py poster.html --tokens design_tokens.json` (the default driver: preflight -> style -> measure -> polish; design_tokens.json is the design-direction pack written at lock time -- SKILL.md Step 2.5) to align columns and check style/structure.
5. Run `python tools/render_preview.py poster.html` to produce the PDF.
NOTE: as shipped, this scaffold passes `preflight` (structure) but is
EXPECTED to FAIL `measure`/`polish` -- figures are commented out and copy
is TODO stubs, so columns only fill the top of the canvas. Those two gates
judge a FILLED poster; balance them once you've added real content. See
templates/README.md ("Scaffolds, not finished posters").
MEASURE ROLES: every layout-critical element carries `data-measure-role`.
Generic measurement scripts depend on these — do not remove.
CANVAS RETARGETING: to print at another size, change the canvas in exactly
TWO places that must stay in sync -- the `@page { size: ... }` rule and the
`.poster { width/height }` (also the `@media print .poster { width/height }`).
Example: ICLR 2026 main conference uses 185cm 90cm landscape (official print
service spec) -- set @page to `185cm 90cm`, width to `1850 * var(--u)` and
height to `900 * var(--u)` (and the print-override .poster to `185cm`/`90cm`).
Adapted from posterly (MIT, © 2026 Ruishuo Chen) — see LICENSES/ & NOTICE.md;
ARIS modifications: flat de-gradient, --fs token scale, zero-inline-style
utilities, data-source/data-color-exempt contracts.
============================================================
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="posterly">
<title>POSTER TITLE — Venue Year</title>
<!-- MathJax v3 for inline equations. CDN by default when the file is
opened by hand; the posterly check tools (measure/polish/pack/…)
intercept this request and serve the skill's bundled copy
(assets/mathjax/tex-svg.js, MathJax 3.2.2), so gates render math
deterministically even offline. To make a hand-opened poster
offline too, copy that bundle next to the poster and point the
<script> `src` at it. -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
packages: {'[+]': ['ams']}
},
svg: { fontCache: 'global' }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<style>
/* =========================================================
CANVAS — 60" × 36" landscape
========================================================= */
@page { size: 60in 36in; margin: 0; }
:root {
/* ===== DESIGN TOKENS ===== */
/* Primary accent (header underline, card-highlight bar, section nums, .keyword) */
--accent: #2D5F8B;
--accent-deep: #1F4566;
--accent-light: #E8F1F8;
--accent-soft: #D7E5F0;
--accent-ink: #FFFFFF; /* ink ON the accent (chips, callout, thead) */
/* Emphasis register for "ours / best" (table .ours row, "★" callouts).
Default is the warm gold; a redesign may choose any register that
keeps 4.5:1 with --emph-ink (see templates/THEMES.md Mechanism 1). */
--emph: #C9A24A;
--emph-soft: #FFF7E0;
--emph-ink: #14314A; /* ink ON the emphasis fill. NOT var(--accent-deep):
#1F4566 on the default gold measures 4.16:1 (< AA);
#14314A measures 5.58:1 (>= 4.5:1). */
/* Text */
--text-primary: #1A1A1A;
--text-secondary: #555555;
--text-muted: #888888;
/* Backgrounds */
--bg-page: #F6F2F0;
--bg-card: #FFFFFF;
--bg-card-tint: #FAFAFB;
--bg-emphasis: var(--accent-light);
/* Borders */
--border-soft: #D8D8D8;
--border-strong: var(--accent);
/* Screen-only dark mat behind the poster (the off-canvas viewport
background). Print resets html/body to white, so this never reaches
paper; kept as a token so no color literal lives outside this block. */
--bg-viewport: #2B2B2B;
/* Base unit. Print: 1mm; screen preview: 1.6px (~3.78px = 1mm at 96dpi). */
--u: 1.6px;
/* Font-size scale (9 archetypes). Every `font-size` in this template
references one of these. `calc(var(--fs-N) * k)` is permitted ONLY for
a COMPONENTS.md-defined variant (e.g. `.eqn--large`). */
--fs-1: calc(9 * var(--u)); /* micro label */
--fs-2: calc(10 * var(--u)); /* small caption */
--fs-3: calc(11 * var(--u)); /* caption / table */
--fs-4: calc(12 * var(--u)); /* body text */
--fs-5: calc(13 * var(--u)); /* equation / emphasis */
--fs-6: calc(15 * var(--u)); /* subtitle */
--fs-7: calc(16 * var(--u)); /* section title */
--fs-8: calc(22 * var(--u)); /* banner number */
--fs-9: calc(32 * var(--u)); /* main title */
/* Fonts. Override at :root if your venue mandates a specific family. */
--font-serif: "Charter", "Source Serif Pro", "Georgia", serif;
--font-sans: "Inter", "Helvetica Neue", sans-serif;
/* Shadows & watermark ink — tokenized so rules 1/3 stay literal-free
(the faint radial page tint is the ONE allowed literal outside this
block; rule 5 validates it WHEN ENABLED -- the style gate ships with rules 4-5 off). */
--shadow-screen: 0 0 60px rgba(0, 0, 0, 0.5);
--shadow-card: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(45, 95, 139, 0.05);
--ornament-ink: rgba(45, 95, 139, 0.06);
/* Identity mark ink — the corner-signature ⊕ adopts the LOCAL accent so it
reads native (the woven-signature instead inherits its host's ink). The
glyph GEOMETRY, not the hue, is the posterly signature. Re-theme with the
palette like any other token. */
--ps-mark-ink: var(--accent-deep);
/* Corner-radius scale. Every border-radius calc() multiplies by this;
1 = the shipped soft look, 0 = square/flat (see templates/THEMES.md). */
--rs: 1;
/* Figure mount: the ground behind paper figures (transparent PNGs sit on
it) and the keyline around them (.figure img / .ff-fig img). Re-theme
with the Axis 6 frame decision so figures sit mounted in the design
instead of pasted on it; --fig-frame: transparent = frameless mount.
QR backgrounds stay literal white -- that's scannability, not styling. */
--fig-bg: white;
--fig-frame: var(--border-soft);
/* ===== END DESIGN TOKENS ===== */
}
/* =========================================================
RESET + BASE
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* =========================================================
BASE DEFENSES -- wrap & ink safety. KEEP this block in ANY
skeleton, including a fully custom one (copy it over and
EXTEND the selector lists with your own prose/display
classes -- a hand-rolled skeleton that drops it strands
single-word widows and ragged titles; polish warns as
TEXT-WRAP).
- pretty: fills each line, protects the last-line orphan
(single-word widow). Safe on all prose.
- balance: evens CENTERED display text only -- never pair
it with left-aligned multi-sentence prose (SKILL.md wrap
rules).
- Any inline class you add that paints a background (a
.mark highlight, a keyword chip) must declare its own
`color` (Gate G -- never inherit ink across a ground
change) plus `box-decoration-break: clone;
-webkit-box-decoration-break: clone;` so a wrapped
highlight keeps its padding on both fragments (then it
never needs &nbsp;-gluing to hold one line).
========================================================= */
p, li, dd, figcaption,
.body-text, .caption, .callout, .section-title { text-wrap: pretty; }
.title { text-wrap: balance; }
/* Case-safety: lowercase Greek under text-transform:uppercase paints
as its capital (α -> Α, a Latin-A lookalike -- "SHARPEN α>1" prints
as "SHARPEN A>1"). Wrap the symbol: <span class="tt-none">α</span>.
polish flags misses as SYMBOL-CASE. */
.tt-none { text-transform: none; }
html, body {
background: var(--bg-viewport);
font-family: var(--font-serif);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
/* =========================================================
UTILITY CLASSES — replace inline `style=` in the body markup.
The template (and any finished poster) must carry ZERO `style=`
attributes. Use these classes instead. Two documented exceptions
exist ONLY as examples and may appear in comments, never live:
- a logo/seal SVG flagged data-color-exempt="logo"
- a paper figure `<img ... data-source="paper" style="width: NN%">`
(AR width tweak; prefer the .w-NN classes below where possible)
========================================================= */
/* Poster container — exact print dimensions; data-measure-role="poster" so poster_check.py
can verify the canvas size. */
.poster {
width: calc(1524 * var(--u));
height: calc(914 * var(--u));
background: var(--bg-page);
/* Page tint kept (radial only, all color stops alpha <= 0.06 per the
de-gradient policy: linear-gradient is banned, this low-alpha radial
wash is the single allowed exception). */
background-image:
radial-gradient(ellipse at top left, rgba(45, 95, 139, 0.06), transparent 40%),
radial-gradient(ellipse at bottom right, rgba(201, 162, 74, 0.05), transparent 50%);
margin: 20px auto;
padding: calc(10 * var(--u)) calc(14 * var(--u));
display: grid;
grid-template-columns: minmax(0, 1fr); /* column-axis twin of the minmax(0,1fr) body-row defense: without it the implicit `auto` column grows to a wide child's max-content and a full-width row overflows the canvas (measure's canvas-overflow gate). Keep on any custom skeleton. */
grid-template-rows: auto auto minmax(0, 1fr) auto auto; /* header | banner | body | takeaways | footer. minmax(0,1fr) (not bare 1fr): an over-tall body compresses instead of pushing takeaways/footer off-canvas */
gap: calc(6 * var(--u));
box-shadow: var(--shadow-screen);
position: relative;
overflow: hidden;
}
/* Decorative top bar — flat solid accent (de-gradient). */
.poster::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: calc(8 * var(--u));
background: var(--accent);
}
/* =========================================================
HEADER
========================================================= */
.header {
display: grid;
grid-template-columns: 1fr minmax(50%, auto) 1fr; /* equal side tracks (1fr) -> the title track is centred on the poster, not just between the side blocks; the centre track is floored at 50% so a one-line title still fills it (else a short title measures narrow and trips a false HEADER/TITLE-SQUEEZED). Best-effort: a side block wide enough to clamp its 1fr track can still pull the title off-centre. */
align-items: center;
gap: calc(16 * var(--u));
padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));
border-bottom: calc(2 * var(--u)) solid var(--accent);
}
.venue-badge {
justify-self: start; /* anchor to the far-left edge so the centre track stays centred */
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-width: calc(95 * var(--u));
text-align: center;
border-right: calc(1 * var(--u)) solid var(--border-soft);
padding-right: calc(12 * var(--u));
}
.venue-badge .vb-venue {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-9);
color: var(--accent-deep);
line-height: 1;
letter-spacing: -0.5px;
}
.venue-badge .vb-year {
font-family: var(--font-sans);
font-size: var(--fs-5);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
letter-spacing: 1.2px;
}
.venue-badge .vb-tag {
font-family: var(--font-sans);
font-size: var(--fs-2);
color: var(--accent);
font-weight: 700;
margin-top: calc(2 * var(--u));
letter-spacing: 1.2px;
}
.title-block { text-align: center; min-width: 0; }
.title {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-9);
line-height: 1.05;
color: var(--accent-deep);
letter-spacing: -0.5px;
}
.title .accent { color: var(--emph); }
.subtitle {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-6);
color: var(--text-secondary);
margin-top: calc(2 * var(--u));
font-style: italic;
}
.authors-line {
font-family: var(--font-sans);
font-size: var(--fs-4);
color: var(--accent);
font-weight: 600;
margin-top: calc(3 * var(--u));
}
.authors-line .author { margin: 0 calc(4 * var(--u)); }
.authors-line sup { font-size: 0.7em; color: var(--accent); }
.authors-line .aff {
color: var(--text-secondary);
font-weight: 400;
display: block;
margin-top: calc(2 * var(--u));
font-size: var(--fs-4);
}
.right-block {
justify-self: end; /* keep logo+QR in the far-right corner */
display: flex; align-items: center;
gap: calc(10 * var(--u));
}
.qr-block { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.qr-block img {
width: calc(85 * var(--u));
height: calc(85 * var(--u));
border: calc(2 * var(--u)) solid var(--accent);
border-radius: calc(4 * var(--u) * var(--rs));
background: white;
padding: calc(2 * var(--u));
}
.qr-label {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--accent);
font-weight: 600;
}
/* Optional logo slot — drop your lab logo here. Keep its rendered height
close to the QR (~85u) so the header doesn't grow disproportionately.
A raster logo needs no exemption. An inline-SVG logo with brand colors
must carry data-color-exempt="logo" so style_check skips its fills, e.g.:
<svg data-color-exempt="logo" ...> ... </svg> */
.logo-slot img { height: calc(85 * var(--u)); width: auto; max-width: calc(360 * var(--u)); object-fit: contain; display: block; }
/* Logo size classes on .logo-slot -- pick from the file's aspect ratio (SKILL.md Gate E).
tall/square sit at the QR-matched slot height; wide is intentionally shorter (~68% of the
QR) and width-capped so a long wordmark doesn't out-mass the title. Do NOT combine these
with logo-stack (that row is width-normalized, below). */
.logo-slot.logo-tall img,
.logo-slot.logo-square img { height: calc(85 * var(--u)); }
.logo-slot.logo-wide img { height: calc(58 * var(--u)); max-width: calc(300 * var(--u)); }
/* Logo chip: a solid backing that keeps a transparent / edge-white logo legible on a
colored/dark header (white chip) or a light header (.logo-chip-dark); the padding + radius
fold a stray white box into a deliberate rounded tile (SKILL.md Gate E, Background). */
.logo-chip {
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card); border-radius: calc(3 * var(--u) * var(--rs));
padding: calc(3 * var(--u)) calc(5 * var(--u));
}
.logo-chip.logo-chip-dark { background: var(--text-primary); }
/* logo-row: institution logos in the header right block (REAL logos the
user provided — never fabricate a seal). Each img MUST carry
data-color-exempt="logo"; height pairs with the QR. */
.logo-row { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.logo-row img { height: calc(68 * var(--u)); width: auto; display: block; }
/* --boxed variant: each logo in a labeled tile (logo + institution name) —
more presence at poster distance; white tile + soft border, no new hues. */
.logo-row .lr-item {
display: flex; flex-direction: column; align-items: center;
gap: calc(2 * var(--u));
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: calc(3 * var(--u) * var(--rs));
padding: calc(4 * var(--u)) calc(6 * var(--u));
}
.logo-row .lr-item img { height: calc(58 * var(--u)); }
.logo-row .lr-label {
font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-1);
color: var(--text-secondary); text-align: center; line-height: 1.15;
}
/* logo-stack variant: WIDE WORDMARKS (AR >= ~2) normalized to EQUAL WIDTH
and stacked vertically, left-aligned. Use when two wide wordmarks of
different aspect ratio read unbalanced height-matched in a row (equal
width lets the less-wide mark grow taller and aligns a clean block).
NOT for a square seal or tall mark (equal width blows it up — keep those
height-matched). Do NOT also apply the logo-wide/tall/square classes. */
.logo-row.logo-stack { flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.logo-row.logo-stack img { width: calc(170 * var(--u)); height: auto; }
/* venue badge may carry the official venue logo above its text line */
.venue-badge img { height: calc(62 * var(--u)); width: auto; display: block; margin: 0 auto calc(2 * var(--u)); }
.venue-badge .vb-title { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-5); color: var(--accent-deep); letter-spacing: 0.5px; }
/* =========================================================
OPTIONAL FRAMEWORK BANNER (delete this whole section if you don't need it)
========================================================= */
.framework-banner {
display: flex;
align-items: center;
gap: calc(16 * var(--u));
/* Flat solid emphasis fill (de-gradient). */
background: var(--bg-emphasis);
border: calc(1 * var(--u)) solid var(--border-soft);
border-left: calc(6 * var(--u)) solid var(--accent);
border-radius: calc(6 * var(--u) * var(--rs));
padding: calc(6 * var(--u)) calc(14 * var(--u));
}
.framework-banner img { height: calc(120 * var(--u)); width: auto; display: block; }
.framework-banner .banner-stats {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(6 * var(--u));
}
.framework-banner .bs-item {
background: white;
border: calc(1 * var(--u)) solid var(--border-soft);
border-left: calc(3 * var(--u)) solid var(--accent);
border-radius: calc(3 * var(--u) * var(--rs));
padding: calc(2 * var(--u)) calc(8 * var(--u));
text-align: center;
}
.framework-banner .bs-num {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-8);
color: var(--accent);
line-height: 1;
}
.framework-banner .bs-label {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--text-secondary);
margin-top: calc(2 * var(--u));
line-height: 1.2;
}
.framework-banner .fb-text {
flex: 1.6;
font-family: var(--font-serif);
font-size: var(--fs-6);
line-height: 1.5;
text-wrap: pretty; /* prose: fill each line, protect last-line orphan. NOT balance — on multi-sentence prose balance shortens+hyphenates line 1 (crammed-left, gap-right). */
text-align: center;
}
.framework-banner .fb-text strong { color: var(--accent-deep); }
.framework-banner .fb-label {
display: inline-block;
background: var(--accent);
color: var(--accent-ink);
font-family: var(--font-sans);
font-size: var(--fs-5);
font-weight: 700;
padding: calc(2 * var(--u)) calc(8 * var(--u));
border-radius: calc(4 * var(--u) * var(--rs));
text-transform: uppercase;
letter-spacing: 1px;
vertical-align: middle;
line-height: 1;
position: relative;
top: calc(-1 * var(--u));
}
/* Method-overview figure for the banner (banner-figure component,
catalogued in COMPONENTS.md). Usually CAPTIONLESS -- the banner text
block beside it is the figure's explanation. width:min-content collapses
the slot to the IMAGE (a captionless figure's slot IS the image); if a
short caption is used it wraps at the image box and can NEVER set the
flex-item width; margin-inline centres a block image (text-align does
not); overflow-wrap guards a long unbreakable token. Do NOT hand-roll a
.fb-fig wrapper or a bare <img class="w-100"> here. */
.framework-banner .banner-figure {
flex: 0 0 auto;
width: min-content;
margin: 0;
text-align: center;
}
.framework-banner .banner-figure img {
height: calc(120 * var(--u));
width: auto;
display: block;
margin-inline: auto;
}
.framework-banner .banner-figure figcaption {
width: 100%;
margin-top: calc(2 * var(--u));
font-family: var(--font-sans);
font-size: var(--fs-2);
line-height: 1.2;
color: var(--text-secondary);
text-align: center;
text-wrap: pretty;
overflow-wrap: anywhere;
}
.framework-banner .banner-figure figcaption strong { color: var(--accent-deep); }
/* =========================================================
BODY: 4 columns, variable-width hint via fr values
========================================================= */
.body-grid {
display: grid;
grid-template-columns: 1fr 1.05fr 1.05fr 1fr;
gap: calc(10 * var(--u));
/* No overflow:hidden here — it would clip card shadows (pitfall #7).
.poster already clips at the page boundary; min-height:0 is the
grid-blowout guard. */
min-height: 0;
}
.column {
display: flex; flex-direction: column;
gap: calc(6 * var(--u));
min-height: 0;
height: 100%;
padding-bottom: calc(4 * var(--u)); /* shadow breathing room above takeaways */
}
/* =========================================================
CARDS
========================================================= */
.card {
background: var(--bg-card);
border-radius: calc(5 * var(--u) * var(--rs));
padding: calc(4 * var(--u)) calc(9 * var(--u));
border: calc(1 * var(--u)) solid var(--border-soft);
box-shadow: var(--shadow-card);
position: relative;
}
.card.tinted { background: var(--bg-card-tint); }
.card.card--compact { padding: calc(3 * var(--u)) calc(6 * var(--u)); } /* predefined variant: tighter padding (fix (f)) */
.card.highlight {
border-left: calc(6 * var(--u)) solid var(--accent);
/* Flat emphasis tint (de-gradient). */
background: var(--bg-emphasis);
}
.section-title {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-7);
color: var(--accent-deep);
margin-bottom: calc(3 * var(--u));
display: flex; align-items: center;
gap: calc(5 * var(--u));
}
/* Title text + any ★ marker share ONE .st-text span, so the heading wraps as
natural text (hanging indent) instead of flex-wrapping atomic items: the
number badge is never stranded on its own line and the ★ never widows. */
.section-title .st-text { flex: 1; min-width: 0; line-height: 1.18; }
/* Graceful fallback if a title is NOT wrapped in .st-text: float the badge so
bare inline text still wraps beside it rather than dropping below it. */
.section-title:not(:has(.st-text)) { display: block; line-height: 1.18; }
.section-title:not(:has(.st-text)) .num { float: left; margin-right: calc(5 * var(--u)); }
.section-title .num {
display: inline-flex; align-items: center; justify-content: center;
width: calc(22 * var(--u)); height: calc(22 * var(--u));
background: var(--accent); color: var(--accent-ink);
border-radius: 50%;
font-size: var(--fs-5); font-weight: 700;
flex-shrink: 0;
}
/* Inline "★ KEY" / "★ Headline" marker beside a section title. */
.section-title .key-mark { color: var(--emph); font-size: var(--fs-3); }
.body-text, .card p, .card li {
font-family: var(--font-serif);
font-size: var(--fs-4);
line-height: 1.3;
color: var(--text-primary);
}
.card ul, .card ol { padding-left: calc(18 * var(--u)); }
.card li { margin-bottom: calc(2 * var(--u)); }
.keyword { color: var(--accent); font-weight: 700; }
.keyword-emph { color: var(--emph); font-weight: 700; }
.highlight-text {
background: var(--bg-emphasis);
padding: 0 calc(3 * var(--u));
border-radius: calc(2 * var(--u) * var(--rs));
}
/* Equation block */
.eqn {
background: var(--bg-emphasis);
border-left: calc(3 * var(--u)) solid var(--accent);
padding: calc(4 * var(--u)) calc(10 * var(--u));
margin: calc(4 * var(--u)) 0;
font-size: var(--fs-5);
overflow-x: hidden;
}
/* Predefined variant for a larger / more legible display equation.
`calc(var(--fs-N) * k)` is allowed here because this is a
COMPONENTS.md-registered variant (DESIGN_FINAL §A / §10 f). */
.eqn--large { font-size: calc(var(--fs-5) * 1.25); }
.eqn .label {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-2);
color: var(--accent);
font-weight: 600;
margin-bottom: calc(2 * var(--u));
text-transform: uppercase;
letter-spacing: 1px;
}
/* Callout: solid accent for primary, solid emphasis fill for theorems / "★ key" strips */
.callout {
background: var(--accent);
color: var(--accent-ink);
padding: calc(5 * var(--u)) calc(10 * var(--u));
border-radius: calc(4 * var(--u) * var(--rs));
font-size: var(--fs-4);
margin: calc(4 * var(--u)) 0;
}
.callout strong { color: var(--emph); }
/* Flat solid emphasis fill (de-gradient). */
.callout.emph {
background: var(--emph);
color: var(--emph-ink); /* route through the token — accent-deep here would dodge the register swap AND fail AA on the default gold */
}
.callout.emph strong { color: var(--emph-ink); }
/* Figure container */
.figure { margin: calc(4 * var(--u)) 0; text-align: center; }
.figure img:not([class*="w-"]) { width: 100%; }
.figure--wide img { width: 100%; } /* predefined variant: force full card width over any .w-NN (fix (f)) */
.figure img {
border-radius: calc(4 * var(--u) * var(--rs));
border: calc(1 * var(--u)) solid var(--fig-frame);
background: var(--fig-bg);
}
ul.balance-nudge.mt-3 { margin-top: calc(3 * var(--u) + 7px); } /* column-balance fine-tune, not a design token */
.figure svg.inline-chart {
width: 100%; height: auto; display: block;
border-radius: calc(4 * var(--u) * var(--rs));
border: calc(1 * var(--u)) solid var(--fig-frame);
background: var(--fig-bg);
}
.figure .caption {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
line-height: 1.3;
text-align: left;
}
.figure .caption strong { color: var(--accent-deep); }
/* Float a figure BESIDE text in a TEXT-RICH card: text wraps to its side
and then below it. The clearfix grows the card to contain the float;
mark the <img> data-fig-layout="beside-text" so the AR gates honour the
intentionally small width. Use ONLY when there is enough text to fill the
figure's height -- a text-sparse card should center .figure instead. A
short-text float leaves an L-shaped void below the text, which polish's
FIG/BESIDE-TEXT-VOID flags. */
.fig-wrap::after { content: ""; display: table; clear: both; }
.ff-fig {
float: right;
width: 48%; max-width: 58%; min-width: 38%;
margin: calc(1 * var(--u)) 0 calc(3 * var(--u)) calc(11 * var(--u));
text-align: center;
}
.ff-fig.left {
float: left;
margin: calc(1 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u)) 0;
}
.ff-fig img {
display: block;
width: 100%;
border-radius: calc(4 * var(--u) * var(--rs));
border: calc(1 * var(--u)) solid var(--fig-frame);
background: var(--fig-bg);
}
.ff-fig .caption {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
line-height: 1.3;
text-align: center;
}
/* Result table with .ours row highlighted with the emphasis tint */
.result-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-3);
margin-top: calc(3 * var(--u));
}
.result-table th, .result-table td {
padding: calc(2 * var(--u)) calc(4 * var(--u));
text-align: center;
border-bottom: calc(1 * var(--u)) solid var(--border-soft);
}
.result-table thead th {
background: var(--accent); color: var(--accent-ink);
font-weight: 600; font-size: var(--fs-2);
}
.result-table tbody tr.group-row td {
background: var(--bg-emphasis); font-weight: 700;
text-align: left;
color: var(--accent-deep);
padding-left: calc(8 * var(--u));
border-bottom: calc(2 * var(--u)) solid var(--accent);
}
.result-table tbody tr.ours td { background: var(--emph-soft); font-weight: 700; }
.result-table tbody tr.ours td:first-child { color: var(--accent-deep); }
/* Greyed reference row (was inline color:#888). */
.result-table tbody tr.reference td { color: var(--text-muted); }
.result-table .method { text-align: left; padding-left: calc(8 * var(--u)); }
.result-table .best { color: var(--accent); font-weight: 700; }
/* 3-up stat box */
.keybox {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(4 * var(--u));
margin: calc(4 * var(--u)) 0 0;
}
.keybox .kb-item {
background: var(--bg-emphasis);
border-top: calc(2 * var(--u)) solid var(--accent);
padding: calc(3 * var(--u));
text-align: center;
/* The grid stretches every tile to the tallest one; center the content
vertically so a 1-line tile's number aligns with a 2-line neighbour's
instead of top-ragged (SKILL Layout pitfall — stat-tile alignment). */
display: flex; flex-direction: column; justify-content: center;
border-radius: 0 0 calc(3 * var(--u) * var(--rs)) calc(3 * var(--u) * var(--rs));
}
.kb-item .kb-num {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-6);
color: var(--accent);
line-height: 1;
}
.kb-item .kb-label {
font-family: var(--font-sans);
font-size: var(--fs-1);
color: var(--text-secondary);
margin-top: calc(2 * var(--u));
line-height: 1.1;
/* Reserve two label lines (2lh tracks this line-height) so 1-line
and 2-line labels occupy the same height and the big numbers
align across tiles. Keep labels <= 2 lines (COMPONENTS §keybox). */
min-height: 2lh;
}
/* Optional takeaways strip (delete the section if not needed) */
.takeaways-strip {
display: grid;
grid-template-columns: auto repeat(4, 1fr);
align-items: center;
gap: calc(10 * var(--u));
/* Flat solid emphasis fill (de-gradient). */
background: var(--bg-emphasis);
border: calc(1 * var(--u)) solid var(--border-soft);
border-radius: calc(5 * var(--u) * var(--rs));
padding: calc(8 * var(--u)) calc(12 * var(--u));
}
.takeaways-strip .ts-title {
font-family: var(--font-sans);
font-size: var(--fs-6);
font-weight: 800;
color: var(--accent-deep);
display: flex; align-items: center; gap: calc(6 * var(--u));
}
.takeaways-strip .ts-title .num {
display: inline-flex; align-items: center; justify-content: center;
width: calc(22 * var(--u)); height: calc(22 * var(--u));
background: var(--accent); color: var(--accent-ink);
border-radius: 50%;
font-size: var(--fs-5); font-weight: 700;
}
.takeaways-strip .ts-item {
border-left: calc(3 * var(--u)) solid var(--accent);
padding-left: calc(8 * var(--u));
line-height: 1.3;
text-align: center;
text-wrap: balance;
}
.takeaways-strip .ts-key {
font-family: var(--font-sans);
font-size: var(--fs-3);
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
.takeaways-strip .ts-text {
font-family: var(--font-serif);
font-size: var(--fs-4);
margin-left: calc(4 * var(--u));
}
/* Footer */
.footer {
grid-column: 1 / -1;
display: flex; justify-content: space-between; align-items: baseline;
/* When the two blocks can't sit side by side they stack (wrap) instead of
overflowing; row-gap keeps the stacked blocks legible. */
flex-wrap: wrap; gap: calc(2 * var(--u)) calc(10 * var(--u));
padding-top: calc(8 * var(--u));
border-top: calc(1 * var(--u)) solid var(--border-soft);
font-family: var(--font-sans);
font-size: var(--fs-5);
color: var(--text-muted);
}
.footer .method-name { color: var(--accent-deep); }
/* Long repo URL / email breaks mid-token rather than overflowing the edge. */
.footer .repo { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
/* Optional watermark */
.ornament {
position: absolute;
right: calc(20 * var(--u));
bottom: calc(20 * var(--u));
font-family: var(--font-sans);
font-size: var(--fs-9);
color: var(--ornament-ink);
font-weight: 900;
letter-spacing: 4px;
pointer-events: none;
user-select: none;
}
/* Identity mark — corner-signature (Axis 8 identity accessory, ALWAYS ON).
Sits in the poster's outer-padding "safe zone" (bottom-right gutter),
clear of the content box; glyph-only ⊕. This SUPERSEDES the legacy
.ornament text watermark above -- leave that disabled (enabling both
just duplicates the corner mark). See COMPONENTS.md. */
.ps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.corner-sig {
position: absolute;
right: calc(4 * var(--u));
bottom: calc(3 * var(--u));
width: calc(7 * var(--u));
height: calc(7 * var(--u));
color: var(--ps-mark-ink);
opacity: 0.5;
pointer-events: none;
user-select: none;
}
.corner-sig svg { display: block; width: 100%; height: 100%; }
/* Dark / colored ground: swap to a light ink so the mark doesn't vanish.
Add `on-dark` to .corner-sig on an Axis-2 dark-base poster. */
.corner-sig.on-dark { color: var(--accent-light); }
/* Identity mark — woven-signature: ONE ⊕ riding EXISTING content (a best /
target / ★ marker, an inline bullet, a terminal sentence period, the
wordmark "o"). Sized to the HOST TEXT so it reads as an inline glyph, not
a block, and inherits the host ink so it blends. Placed per-poster (never
on a data character); aria-hidden; data-color-exempt="logo". See
COMPONENTS.md. */
[data-ps-mark="woven"] {
display: inline-block;
width: 0.82em;
height: 0.82em;
vertical-align: -0.14em;
line-height: 0;
}
[data-ps-mark="woven"] svg { display: block; width: 100%; height: 100%; }
/* =========================================================
DENSITY COMPONENTS (catalogued — see COMPONENTS.md).
Guardrail: no component-local color semantics. Distinction is
carried by labels, order and typography — never by new hues.
========================================================= */
/* equation-stack: compact multi-row formula stack (denser than one big .eqn) */
.equation-stack { margin: calc(2 * var(--u)) 0; }
.equation-stack .eqn { margin: calc(2 * var(--u)) 0; padding: calc(2 * var(--u)) calc(8 * var(--u)); }
/* eqn-anatomy: term-by-term anatomy grid (2x2 default; --row variant = 1x4) */
.eqn-anatomy {
display: grid; grid-template-columns: 1fr 1fr;
gap: calc(2.5 * var(--u)); margin: calc(3 * var(--u)) 0;
}
.eqn-anatomy.eqn-anatomy--row { grid-template-columns: repeat(4, 1fr); }
.eqn-anatomy .ea-item {
background: var(--bg-card-tint);
border: 1px solid var(--border-soft);
border-left: calc(2 * var(--u)) solid var(--accent);
border-radius: calc(2 * var(--u) * var(--rs));
padding: calc(2 * var(--u)) calc(4 * var(--u));
font-size: var(--fs-2); line-height: 1.3;
}
.eqn-anatomy .ea-tag {
display: inline-block; font-family: var(--font-sans); font-weight: 700;
font-size: var(--fs-1); color: var(--accent-deep);
background: var(--accent-light); border-radius: calc(1.5 * var(--u) * var(--rs));
padding: calc(0.5 * var(--u)) calc(2.5 * var(--u));
margin-right: calc(1.5 * var(--u));
}
/* flow-strip: labeled pipeline, ALL steps the same accent; ONLY the
final step may carry the emphasis top bar. Not an "algorithm" unless the
paper has one — see COMPONENTS.md. */
.flow-strip { display: flex; align-items: stretch; gap: calc(1.5 * var(--u)); margin: calc(3 * var(--u)) 0; }
.flow-strip .step {
flex: 1; background: var(--accent-light);
border: 1px solid var(--accent-soft); border-radius: calc(2 * var(--u) * var(--rs));
padding: calc(2 * var(--u)) calc(2.5 * var(--u));
text-align: center; font-size: var(--fs-2); line-height: 1.25;
}
.flow-strip .step .step-name {
display: block; font-family: var(--font-sans); font-weight: 700;
font-size: var(--fs-1); color: var(--accent-deep);
letter-spacing: 0.5px; text-transform: uppercase;
margin-bottom: calc(1 * var(--u));
}
.flow-strip .step--final { border-top: calc(1.5 * var(--u)) solid var(--emph); background: var(--emph-soft); }
.flow-strip .arrow {
align-self: center; color: var(--accent);
font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-4);
flex: 0 0 auto;
}
/* figure--duo: two paper figures sharing one caption; each img MUST be
a data-source="paper" asset and carry .w-45/.w-50 (42-48% each). */
.figure--duo { display: flex; gap: calc(3 * var(--u)); align-items: flex-start; justify-content: center; }
.figure--duo img { max-width: 48%; min-width: 0; } /* hard cap: duo contract is 42-48% each; an oversized w-NN cannot overflow the card */
/* result-table derived column (emph-soft = DERIVED arithmetic; label it) */
.result-table th.derived, .result-table td.derived {
background: var(--emph-soft); font-family: var(--font-sans); font-weight: 700;
}
/* keybox 4-up variant */
.keybox.keybox--4 { grid-template-columns: repeat(4, 1fr); }
/* algo: compact numbered procedure — ONLY when the paper itself states
an explicit algorithm/procedure; never invent steps. */
ol.algo { padding-left: calc(16 * var(--u)); }
ol.algo li { margin-bottom: calc(1.5 * var(--u)); font-size: var(--fs-3); line-height: 1.3; }
/* claim-pills: provenance mini-table (numeric-heavy posters only) */
.claim-pills { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-2); }
.claim-pills td {
border-bottom: 1px solid var(--border-soft);
padding: calc(1.5 * var(--u)) calc(3 * var(--u));
}
.claim-pills .cp-id {
font-weight: 700; color: var(--accent-deep); background: var(--accent-light);
border-radius: calc(1.5 * var(--u) * var(--rs)); padding: 0 calc(2.5 * var(--u) * var(--rs)); white-space: nowrap;
}
.claim-pills .cp-fact { color: var(--accent-deep); font-weight: 700; }
.claim-pills .cp-derived { color: var(--emph); font-weight: 700; }
/* Grid-blowout guards: (1) columns may shrink below min-content so a
wide equation can never widen its track and squeeze siblings;
(2) over-wide display math scales down to fit its box instead of
blowing out the card (SVG keeps aspect via height:auto). */
.body-grid > .column { min-width: 0; }
.card { min-width: 0; }
.eqn mjx-container > svg { max-width: 100%; height: auto; }
/* ── Utility classes — defined LAST so equal-specificity ties
resolve in the utility's favor (source order). ── */
.fs-1 { font-size: var(--fs-1); }
.fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); }
.fs-6 { font-size: var(--fs-6); }
.fs-7 { font-size: var(--fs-7); }
.fs-8 { font-size: var(--fs-8); }
.fs-9 { font-size: var(--fs-9); }
.mt-1 { margin-top: calc(1 * var(--u)); }
.mt-2 { margin-top: calc(2 * var(--u)); }
.mt-3 { margin-top: calc(3 * var(--u)); }
.mt-4 { margin-top: calc(4 * var(--u)); }
.mt-5 { margin-top: calc(5 * var(--u)); }
.mt-6 { margin-top: calc(6 * var(--u)); }
.mb-1 { margin-bottom: calc(1 * var(--u)); }
.mb-2 { margin-bottom: calc(2 * var(--u)); }
.mb-3 { margin-bottom: calc(3 * var(--u)); }
.mb-4 { margin-bottom: calc(4 * var(--u)); }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
/* =========================================================
PRINT OVERRIDE — KEEP LAST so it wins source-order ties.
========================================================= */
@media print {
html, body { background: white; }
.poster { margin: 0; box-shadow: none; width: 60in; height: 36in; page-break-after: avoid; }
:root { --u: 1mm; }
}
</style>
</head>
<body>
<!-- DESIGN DIRECTION (Step 2.5, locked — non-interactive session, self-locked)
concept: plain evidence report -- a reproduction status board, not a lab-branded poster
axis1 layout: 4-column landscape, framework banner on top (default template skeleton)
axis2 canvas: white, flat, full
axis3 palette: accent+emph; steel-blue accent #2D5F8B / warm-gold emph #C9A24A (template default)
axis4 type: sans display + sans body (template default)
axis5 density: balanced
axis6 card: white surface, soft frame, shadow (template default)
axis7 heading: numbered chip (template default)
axis8 masthead: centered masthead; footer: contact strip
devices: benchmark table, keybox stat callouts
hero moment: card 4 (region regularizers, the paper's key mechanistic contribution)
reason for default combo: no lab/venue branding signal was given (independent agent
reproduction, non-interactive session) and the content is a status report of what was
verified vs. blocked -- a plain, legible default serves that better than a composed look.
soft-clash notes: none tripped
-->
<div class="poster" data-measure-role="poster"
data-posterly-contract="identity-v1" data-ps-identity="on">
<!-- Identity sprite: the posterly ⊕ registration glyph, defined ONCE.
Zero-size + absolute so it never enters the grid or shifts layout.
data-color-exempt="logo" -- it IS the posterly logo mark, which keeps
style_check rule 11 (no decorative SVG) and the rule-4 hue gate honest.
Symbol id/viewBox/paths are byte-identical across all templates. -->
<svg class="ps-sprite" data-color-exempt="logo" aria-hidden="true"><defs>
<symbol id="psReg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="none" stroke="currentColor" stroke-width="8"/>
<line x1="50" y1="7" x2="50" y2="93" stroke="currentColor" stroke-width="8"/>
<line x1="7" y1="50" x2="93" y2="50" stroke="currentColor" stroke-width="8"/>
</symbol>
</defs></svg>
<!-- =========================== HEADER =========================== -->
<header class="header" data-measure-role="header">
<!-- LEFT: venue badge. Replace text or swap for an <img> if your venue allows logos. -->
<div class="venue-badge">
<div class="vb-venue">ICML</div>
<div class="vb-year">2026</div>
<div class="vb-tag">REPRO</div>
</div>
<!-- CENTER: title block -->
<div class="title-block">
<h1 class="title">CoCoEdit: Content-Consistent Image Editing via <span class="accent">Region Regularized RL</span></h1>
<div class="subtitle">Independent reproduction pass — reward formula &amp; regularizer verified at code level; Table 1 numbers verified against the paper and released weights, GPU rerun blocked by a token scope</div>
<div class="authors-line">
<span class="author">Reproduction by an OpenResearch agent</span> &middot;
<span class="author">Original: Wu, Xie, Li, Chen, Yi, Zhang (PolyU / OPPO)<sup>&#9993;</sup></span>
<span class="aff">ICML-2026-agent-repro challenge &middot; arXiv 2602.14068</span>
</div>
</div>
<!-- RIGHT: no logo/QR provided for this automated pass -->
<div class="right-block">
</div>
</header>
<!-- ===================== OPTIONAL FRAMEWORK BANNER =====================
Delete this entire <section> if your poster doesn't need a banner.
(To do so, also remove `auto` from the grid-template-rows above.) -->
<section class="framework-banner" data-measure-role="banner">
<!-- OPTIONAL method-overview figure on the left. The banner text block
beside it IS its explanation, so it usually needs NO caption. Use the
captionless banner-figure component (NOT a bare <img class="w-100"> --
the `.framework-banner img { width:auto }` rule wins over .w-100):
<figure class="banner-figure">
<img src="assets/paper_figures/framework.png" data-source="paper"
data-asset-id="framework" alt="Method overview">
</figure>
A figcaption here just duplicates the banner text and a long one
stretches the figure slot (polish: BANNER/IMAGE-SLOT). If you truly
need panel labels, bake them into the image or keep them to ONE short
<figcaption> line (the component bounds it to the image width). -->
<div class="fb-text">
<span class="fb-label">Repro status</span>
&nbsp;<strong>CoCoEdit</strong> RL-tunes image editors on a pixel + MLLM reward with asymmetric region regularizers, raising content-consistency (PSNR/SSIM) while keeping editing quality. We verified the reward formula and regularizers at the code level and confirmed the released dataset's scale; the Table 1 PSNR/SSIM numbers are verified against the paper text but a from-scratch GPU rerun is blocked by a Hub token permission (see Executive Summary).
</div>
<div class="banner-stats">
<div class="bs-item"><div class="bs-num">+2.8dB</div><div class="bs-label">Qwen-Image-Edit<br>PSNR gain</div></div>
<div class="bs-item"><div class="bs-num">+1.16dB</div><div class="bs-label">FLUX.1 Kontext<br>PSNR gain</div></div>
<div class="bs-item"><div class="bs-num">39,901</div><div class="bs-label">released rows<br>(~8% of ~500K)</div></div>
<div class="bs-item"><div class="bs-num">code-lvl</div><div class="bs-label">reward &amp; regularizer<br>verified</div></div>
</div>
</section>
<!-- ============================ BODY ============================ -->
<div class="body-grid" data-measure-role="body">
<!-- ============ COLUMN 1 ============ -->
<div class="column" data-measure-role="column">
<div class="card highlight" data-measure-role="card">
<div class="section-title"><span class="num">1</span><span class="st-text">Motivation</span></div>
<p class="body-text">
Large editing models (FLUX.1 Kontext, Qwen-Image-Edit) follow instructions well but often
<span class="keyword">change unintended regions</span> while editing. Prior RL post-training
(Edit-R1, MotionNFT) pushes editing quality further but makes this <span class="keyword">worse</span>,
because MLLM-only rewards can't discriminate fine-grained pixel consistency.
</p>
<ul class="mt-3 fs-4">
<li>MLLM rewards can't see small unwanted changes.</li>
<li>Editing-quality RL and content preservation trade off directly.</li>
</ul>
<div class="callout mt-4">
<strong>Q:</strong> Can we RL-tune editing quality <em>and</em> content consistency together?
</div>
</div>
<div class="card" data-measure-role="card" data-logbook-target="claim-6-cocoedit-40k-curated-from-500k-samples-via-3-stage-qwen2-5-vl-plus-sam2-filtering-pipeline">
<div class="section-title"><span class="num">2</span><span class="st-text">CoCoEdit-40K Dataset</span></div>
<p class="body-text">
A 3-stage pipeline (Qwen2.5-VL-72B + SAM 2) annotates masks, refines instructions, then filters
~500K raw local-edit samples down to the top-scoring <span class="keyword">8%</span>.
</p>
<div class="figure mt-3">
<svg class="inline-chart" data-component="diagram" viewBox="0 0 640 257" role="img" aria-label="Funnel diagram: 500K raw samples filtered to 40K via three stages">
<text x="20" y="24" font-size="16" font-weight="700" fill="#556" font-family="sans-serif">Three-stage filtering funnel</text>
<rect x="30" y="45" width="580" height="46" fill="#D7E5F0" stroke="#2D5F8B" stroke-width="1.5"/>
<text x="320" y="74" font-size="15" text-anchor="middle" fill="#1F4566">1&#41; Mask annotation (Qwen2.5-VL-72B + SAM 2) &mdash; ~500K raw pairs</text>
<rect x="90" y="103" width="460" height="46" fill="#D7E5F0" stroke="#2D5F8B" stroke-width="1.5"/>
<text x="320" y="132" font-size="15" text-anchor="middle" fill="#1F4566">2&#41; Instruction &amp; mask augmentation/dilation</text>
<rect x="150" y="161" width="340" height="46" fill="#2D5F8B" stroke="#1F4566" stroke-width="1.5"/>
<text x="320" y="190" font-size="15" text-anchor="middle" fill="#fff">3&#41; Filter: score &gt; 9.4 &rarr; top 8%</text>
<rect x="210" y="219" width="220" height="34" fill="#C9A24A" stroke="#7A5A17" stroke-width="1.5"/>
<text x="320" y="242" font-size="15" text-anchor="middle" fill="#3a2b0a" font-weight="700">CoCoEdit-40K (39,901 rows, verified)</text>
</svg>
<div class="caption">
<strong>Reproduced:</strong> we downloaded the real released <code>metadata.jsonl</code> and
counted <strong>39,901</strong> rows &mdash; matches the paper's "39.7K" claim, and
39,901&nbsp;/&nbsp;8%&nbsp;&asymp;&nbsp;499K confirms the "~500K raw pool" arithmetic. The
raw ~500K pool itself (and its Qwen2.5-VL score histogram, paper Fig. 8) is not released,
so only the final 40K survivors are re-checkable, not the filtering step itself.
Each row is an <code>image</code> / <code>mask</code> / <code>prompt</code> triplet.
</div>
</div>
</div>
</div>
<!-- ============ COLUMN 2 ============ -->
<div class="column" data-measure-role="column">
<div class="card" data-measure-role="card" data-logbook-target="claim-1-reward-combines-mllm-qwen2-5-vl-32b-score-and-pixel-level-psnr-ssim-similarity-reward">
<div class="section-title"><span class="num">3</span><span class="st-text">Combined Reward</span></div>
<p class="body-text">A pixel-level similarity reward complements the Qwen2.5-VL-32B MLLM reward, then both are turned into an optimality probability <code>r</code> via DiffusionNFT's group-relative <code>op(&middot;)</code>:</p>
<div class="eqn">
<span class="label">Eq. 1&ndash;2 (paper)</span>
$$r=\mathrm{op}(\lambda_{mllm}\,r_{mllm}+\lambda_{sim}\,r_{sim})$$
</div>
<p class="body-text"><strong>Verified:</strong> vendored the repo's real <code>MaskedPSNRSSIMScorer</code> and <code>op(&middot;)</code> code (unmodified) on synthetic tensors &mdash; formula matches exactly; default config uses <code>&lambda;_mllm=0.9, &lambda;_sim=0.1</code>.</p>
</div>
<div class="card highlight" data-measure-role="card" data-logbook-target="claim-5-ablation-asymmetric-regularizers-l-ner-and-l-er-prevent-zero-edit-collapse-under-naive-reward-weighting">
<div class="section-title"><span class="num">4</span><span class="st-text">Region Regularizers&nbsp;<span class="key-mark">&#9733; KEY<span data-ps-mark="woven" data-color-exempt="logo" aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#psReg"/></svg></span></span></span></div>
<p class="body-text">Two asymmetric hinge losses decouple edit vs. non-edit regions via the mask:</p>
<div class="eqn eqn--large">
<span class="label">Eq. 4&ndash;5 (paper)</span>
$$L_{ner}^{+}=\max(0,d^{+}_{ner}-\tau^{+}),\quad L_{er}^{-}=\max(0,\tau^{-}-d^{-}_{er})$$
</div>
<div class="callout emph">
<strong>Verified in code:</strong> <code>training/flow_grpo/loss.py</code> implements both hinges exactly (<code>L_bg_pos</code>, <code>L_ed_neg</code>). A CPU toy demo (real <code>op(&middot;)</code> code, illustrative rewards) shows naive <code>&lambda;=0.5/0.5</code> flips the top-reward sample to <em>zero edit</em> vs. the tuned <code>0.9/0.1</code> favoring the fully-edited sample &mdash; the paper's described collapse mechanism.
</div>
<div class="figure mt-3">
<svg class="inline-chart" data-component="diagram" viewBox="0 0 640 191" role="img" aria-label="Schematic of edit-region and non-edit-region masks used by the two regularizers">
<text x="20" y="22" font-size="14" font-weight="700" fill="#556" font-family="sans-serif">Mask decouples edit / non-edit regions</text>
<rect x="40" y="38" width="240" height="120" fill="#D7E5F0" stroke="#2D5F8B" stroke-width="1.5"/>
<rect x="135" y="72" width="110" height="60" fill="#C9A24A" stroke="#7A5A17" stroke-width="1.5"/>
<text x="80" y="158" font-size="12" text-anchor="middle" fill="#1F4566">non-edit (bg)</text>
<text x="190" y="158" font-size="12" text-anchor="middle" fill="#7A5A17" font-weight="700">edit region</text>
<text x="320" y="55" font-size="13" fill="#1F4566" font-family="sans-serif">L_ner&#43; : keep <tspan fill="#7A5A17">bg</tspan> close to input</text>
<text x="320" y="75" font-size="12" fill="#889" font-family="sans-serif">(positive / high-reward samples)</text>
<text x="320" y="105" font-size="13" fill="#7A5A17" font-family="sans-serif">L_er&#8722; : push <tspan fill="#1F4566">edit region</tspan> apart</text>
<text x="320" y="125" font-size="12" fill="#889" font-family="sans-serif">(negative / under-edited samples)</text>
<text x="320" y="155" font-size="12" fill="#889" font-family="sans-serif">m&#771; = downsampled mask, latent-aligned</text>
</svg>
</div>
</div>
</div>
<!-- ============ COLUMN 3 ============ -->
<div class="column" data-measure-role="column">
<div class="card highlight" data-measure-role="card" data-logbook-target="claim-3-gedit-bench-en-cocoedit-raises-qwen-image-edit-psnr-19-488-to-22-283-and-ssim-0-662-to-0-774">
<div class="section-title"><span class="num">5</span><span class="st-text">Main Result&nbsp;<span class="key-mark">&#9733; Headline</span></span></div>
<p class="body-text fs-3 text-secondary mb-1">
GEdit-Bench-EN, 606 samples, masked non-edit-region PSNR/SSIM (paper Table 1).
</p>
<div class="figure">
<svg class="inline-chart" data-component="diagram" viewBox="0 0 640 337" role="img" aria-label="Bar chart of non-edit-region PSNR before and after CoCoEdit, for Qwen-Image-Edit and FLUX.1 Kontext">
<text x="20" y="24" font-size="16" fill="#556" font-family="sans-serif" font-weight="700">Non-edit-region PSNR (dB) &mdash; GEdit-Bench-EN</text>
<line x1="60" y1="270" x2="620" y2="270" stroke="#99a" stroke-width="2"/>
<rect x="90" y="270" width="60" height="0" fill="#B9C7D6"/>
<rect x="90" y="153.7" width="60" height="116.3" fill="#9AAFC4"/>
<text x="120" y="146" font-size="15" text-anchor="middle" fill="#1F4566" font-weight="700">19.49</text>
<text x="120" y="292" font-size="13" text-anchor="middle" fill="#556">Qwen base</text>
<rect x="180" y="86.9" width="60" height="183.1" fill="#2D5F8B"/>
<text x="210" y="80" font-size="15" text-anchor="middle" fill="#1F4566" font-weight="700">22.28</text>
<text x="210" y="292" font-size="13" text-anchor="middle" fill="#1F4566" font-weight="700">Qwen+CoCoEdit</text>
<rect x="330" y="126.8" width="60" height="143.2" fill="#B9C7D6"/>
<text x="360" y="120" font-size="15" text-anchor="middle" fill="#1F4566" font-weight="700">24.17</text>
<text x="360" y="292" font-size="13" text-anchor="middle" fill="#556">FLUX base</text>
<rect x="420" y="119.4" width="60" height="150.6" fill="#C9A24A"/>
<text x="450" y="113" font-size="15" text-anchor="middle" fill="#7A5A17" font-weight="700">25.33</text>
<text x="450" y="292" font-size="13" text-anchor="middle" fill="#7A5A17" font-weight="700">FLUX+CoCoEdit</text>
<text x="560" y="292" font-size="12" text-anchor="middle" fill="#889">higher = better</text>
</svg>
<div class="caption fs-2">
Bars drawn to scale from the paper's own Table 1 numbers (not independently re-measured pixels &mdash; see Claim 3 page for the real-weights rerun plan).
</div>
</div>
<div class="keybox">
<div class="kb-item"><div class="kb-num">19.5&rarr;22.3</div><div class="kb-label">Qwen PSNR<br>(dB)</div></div>
<div class="kb-item"><div class="kb-num">.662&rarr;.774</div><div class="kb-label">Qwen<br>SSIM</div></div>
<div class="kb-item"><div class="kb-num">7.56&rarr;7.75</div><div class="kb-label">Qwen edit<br>score</div></div>
</div>
</div>
<div class="card" data-measure-role="card" data-logbook-target="claim-4-versus-rl-baselines-edit-r1-and-motionnft-edit-r1-causes-5-15db-psnr-drop-cocoedit-preserves-content">
<div class="section-title"><span class="num">6</span><span class="st-text">vs. RL Baselines</span></div>
<p class="body-text">Edit-R1 &amp; MotionNFT raise editing scores but wreck consistency; CoCoEdit raises both.</p>
<ul class="mt-3">
<li><strong>FLUX.1 Kontext + Edit-R1</strong> &mdash; PSNR 24.17&rarr;19.01 (<strong>&minus;5.15dB</strong>).</li>
<li><strong>FLUX.1 Kontext + CoCoEdit</strong> &mdash; PSNR 24.17&rarr;25.33 (<strong>+1.16dB</strong>).</li>
</ul>
<div class="callout mt-3">
Same base model, same benchmark row (Table 1) &mdash; only the post-training method differs.
Edit-R1 (<code>PKU-YuanGroup/Edit-R1</code>) and MotionNFT are themselves RL methods; we
verified their reported numbers' transcription against the paper text, not re-run here.
</div>
</div>
</div>
<!-- ============ COLUMN 4 ============ -->
<div class="column" data-measure-role="column">
<div class="card highlight" data-measure-role="card" data-logbook-target="claim-2-gedit-bench-en-cocoedit-raises-flux-1-kontext-psnr-24-168-to-25-331-and-ssim-0-825-to-0-874">
<div class="section-title"><span class="num">7</span><span class="st-text">GEdit-Bench-EN Table 1</span></div>
<p class="body-text fs-2 text-secondary mb-1">
606 samples, masked non-edit-region PSNR/SSIM + MLLM editing score.
</p>
<table class="result-table">
<thead>
<tr>
<th class="method">Model</th>
<th>Overall &#8593;</th>
<th>PSNR &#8593;</th>
<th>SSIM &#8593;</th>
</tr>
</thead>
<tbody>
<tr class="reference"><td class="method"><em>FLUX.1 Kontext</em></td><td>6.286</td><td>24.168</td><td>0.825</td></tr>
<tr><td class="method">w/ Edit-R1</td><td>7.113</td><td>19.013</td><td>0.716</td></tr>
<tr class="ours"><td class="method">w/ CoCoEdit</td><td class="best">6.939</td><td class="best">25.331</td><td class="best">0.874</td></tr>
</tbody>
</table>
<p class="body-text mt-2 fs-3">
Numbers transcribed &amp; delta-checked against the paper's own Table 1; FLUX LoRA not released, so not independently re-run (Claim 2 page).
</p>
</div>
<div class="card" data-measure-role="card">
<div class="section-title"><span class="num">8</span><span class="st-text">What's Blocked, and Why</span></div>
<p class="body-text">
Every number in card 7 needing a GPU rerun is <span class="keyword">scoped and ready</span>,
not missing weights, code, or data &mdash; it is missing one token permission.
</p>
<div class="eqn">
<span class="label">Canary command (this session, HF Jobs)</span>
<code>$ hf jobs run python:3.12 python -c "print('ok')"</code><br>
<code>403 Forbidden: missing permissions: job.write</code>
</div>
<ul class="mt-3 fs-4 balance-nudge">
<li><strong>Public today:</strong> Qwen-Image-Edit-2509 LoRA (<code>wyh6666/CoCoEdit</code>), the base model, and the 606-sample GEdit-Bench-EN benchmark with masks.</li>
<li><strong>Ready today:</strong> <code>scripts/cocoedit_gedit_subset_eval.py</code> in the reproduction bundle wraps the repo's own inference + scoring scripts, sampling N&asymp;40 non-skip-group images.</li>
<li><strong>Missing:</strong> a <code>job.write</code>-scoped Hub token to launch <code>hf jobs run --flavor a100-large</code>.</li>
</ul>
<div class="callout mt-3">
Grant the scope and Claim 3's numbers regenerate within about an hour.
</div>
</div>
</div>
</div>
<!-- ============================ OPTIONAL TAKEAWAYS STRIP ============================ -->
<!-- Strip title + slot labels are microcopy, not canon (SKILL.md Step 3):
reword both to the poster's voice; 3-4 slots, any labels. The old fixed
default ("Takeaways" + Idea/Method/Result/Practical) shipped on every
poster is a fingerprint -- treat it as one example set, not the answer. -->
<section class="takeaways-strip" data-measure-role="footer-strip">
<div class="ts-title"><span class="num">9</span> Bottom line</div>
<div class="ts-item"><span class="ts-key">Formula.</span><span class="ts-text">Reward &amp; regularizer match the paper's code, exactly.</span></div>
<div class="ts-item"><span class="ts-key">Data.</span><span class="ts-text">39,901 released rows confirm the ~500K/8% claim.</span></div>
<div class="ts-item"><span class="ts-key">Numbers.</span><span class="ts-text">Table 1 deltas verified against paper text, not yet GPU-rerun.</span></div>
<div class="ts-item"><span class="ts-key">Next.</span><span class="ts-text">Grant <code>job.write</code> &rarr; rerun the bundled Claim 3 script.</span></div>
</section>
<!-- ============================ FOOTER ============================ -->
<!-- Footer labels ("Code:" / "Contact:" / "Acknowledgements:") are microcopy --
reword or reorder to the poster's voice rather than shipping this exact
skeleton every time (SKILL.md Step 3). -->
<div class="footer" data-measure-role="footer">
<div>
<strong class="method-name">CoCoEdit reproduction</strong> &middot; ICML 2026 Agent Repro Challenge &middot;
Original work by Wu, Xie, Li, Chen, Yi &amp; Zhang.
</div>
<div>
Code: <span class="repo">github.com/langmanbusi/CoCoEdit</span> &nbsp;&middot;&nbsp;
Data: <span class="repo">hf.co/datasets/wyh6666/CoCoEdit-40K</span>
</div>
</div>
<!-- LEGACY decorative watermark (Axis 8): a faint corner TEXT watermark,
SUPERSEDED by the always-on corner-signature below under identity-v1.
Keep it disabled: with data-ps-identity="on" the corner-signature is
the required identity mark (dropping it fails preflight), and in an
anonymous data-ps-identity="off" poster this lab watermark would itself
leak an identifying mark. Kept commented for reference only:
<div class="ornament">LAB &middot; INSTITUTION</div>
-->
<!-- Identity accessory (Axis 8) — corner-signature: posterly's ⊕ in the
bottom-right safe zone. Always on while data-ps-identity="on". -->
<span class="corner-sig" data-ps-mark="corner" data-color-exempt="logo"
aria-hidden="true"><svg viewBox="0 0 100 100"><use href="#psReg"/></svg></span>
</div>
</body>
</html>

Xet Storage Details

Size:
66.1 kB
·
Xet hash:
29c1cf31b2d2c5de298a8fc8346e385b97555e1828492ae66a891b8c008bd25c

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.