Hugging Face's logo

Buckets:
squaredcuber
/
loss-aware-dro-repro-artifacts

Files
xet
squaredcuber/loss-aware-dro-repro-artifacts / bundle /v0 /logbook_assets /poster_embed.html
squaredcuber's picture
squaredcuber
download
raw
18.5 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Decision Atlas: a loss-aware OT-DRO reproduction</title>
<style>
:root{color-scheme:dark;--ink:#f3f0e8;--muted:#a8b0b4;--paper:#101617;--panel:#172022;--line:#314043;--mint:#8ce0bd;--amber:#f6c56f;--coral:#ff8c79;--blue:#77b8dd;--shadow:0 24px 70px rgba(0,0,0,.28)}
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;margin:0;overflow-x:hidden;background:#0b1011;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{padding:clamp(10px,2vw,24px)}
button,input{font:inherit}
.poster{width:100%;max-width:1380px;min-width:0;margin:auto;border:1px solid #293638;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 76% 4%,rgba(140,224,189,.12),transparent 30%),linear-gradient(145deg,#11191a,#0d1314);box-shadow:var(--shadow)}
header>*,.scene>*,.lab>*,.strip>*{min-width:0}
header{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:28px;padding:clamp(24px,5vw,64px);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--mint);font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(42px,7vw,88px);line-height:.92;letter-spacing:-.045em;margin:18px 0 22px;max-width:900px;overflow-wrap:anywhere}
.dek{font-size:clamp(17px,2vw,23px);line-height:1.5;color:#c9d0ce;max-width:760px;margin:0}
.verdict{align-self:end;background:rgba(23,32,34,.86);border:1px solid var(--line);border-radius:20px;padding:22px}
.verdict strong{display:block;color:var(--amber);font-size:30px;font-family:Georgia,serif;font-weight:500;margin:8px 0}
.verdict p{color:var(--muted);line-height:1.55;margin:0}
.scene{padding:clamp(24px,5vw,64px);border-bottom:1px solid var(--line)}
.scene-head{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;margin-bottom:28px}
.num{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--mint);font:700 13px ui-monospace,monospace}
h2{font-family:Georgia,serif;font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:-.025em;margin:0 0 9px}
.scene-head p{color:var(--muted);font-size:17px;line-height:1.55;margin:0;max-width:850px}
.lab{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(440px,1.3fr);gap:20px}
.controls,.map,.evidence-card{background:rgba(23,32,34,.8);border:1px solid var(--line);border-radius:20px;padding:22px}
.brief{background:#101718;border:1px solid #344447;border-radius:14px;padding:16px;margin-bottom:20px;color:#d7ddda;line-height:1.5}
.brief b{color:var(--amber)}
label{display:flex;justify-content:space-between;gap:16px;margin:18px 0 8px;color:#d9dfdd}
output{font:700 13px ui-monospace,monospace;color:var(--mint)}
input[type=range]{width:100%;accent-color:var(--mint)}
.toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}
button{border:1px solid var(--line);background:#101718;color:#c7d0cd;border-radius:12px;padding:11px 12px;cursor:pointer}
button[aria-pressed=true]{background:var(--mint);color:#0d1514;border-color:var(--mint);font-weight:800}
button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.score{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{padding:14px;background:#101718;border-radius:12px;border:1px solid #283537}
.metric span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.metric b{font:700 22px ui-monospace,monospace}
.map{position:relative;min-height:455px;overflow:hidden}
.map svg{width:100%;height:390px;display:block}
.legend{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:12px;margin-top:4px}
.key{display:inline-flex;align-items:center;gap:7px}.dot{width:9px;height:9px;border-radius:50%}.linekey{width:24px;height:2px}
.shock{transition:transform .35s ease,opacity .35s ease}.boundary{transition:all .45s ease}
.explain{margin-top:12px;color:#bec7c4;line-height:1.55;min-height:48px}
.callout{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.callout article{padding:18px;border:1px solid var(--line);border-radius:16px;background:#11191a}
.callout b{display:block;font-family:Georgia,serif;font-size:22px;font-weight:500;margin-bottom:8px}
.callout p{color:var(--muted);line-height:1.5;margin:0;font-size:14px}
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.evidence-card{min-height:155px}
.evidence-card .big{font:500 40px Georgia,serif;margin:9px 0;color:var(--ink)}
.evidence-card .small{color:var(--muted);font-size:13px;line-height:1.45}
.evidence-card.warn .big{color:var(--coral)}.evidence-card.good .big{color:var(--mint)}
.strip{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:20px}
.chart{background:rgba(23,32,34,.8);border:1px solid var(--line);border-radius:20px;padding:22px}
.chart h3{font:500 24px Georgia,serif;margin:0 0 6px}.chart p{color:var(--muted);margin:0 0 18px;line-height:1.5}
.bars{display:flex;align-items:end;gap:7px;height:150px;border-bottom:1px solid var(--line);padding:0 5px}
.bar{flex:1;background:var(--blue);min-width:5px;border-radius:5px 5px 0 0;position:relative}.bar:after{content:attr(data-v);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font:10px ui-monospace,monospace;color:#b9c4c1}
.target{height:2px;background:var(--coral);position:relative;top:-136px}.target:after{content:"0.90 target";position:absolute;right:0;bottom:5px;color:var(--coral);font:11px ui-monospace,monospace}
.claim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.claim{border:1px solid var(--line);border-radius:16px;padding:18px;background:#11191a}
.claim .id{font:700 11px ui-monospace,monospace;color:var(--muted)}.claim strong{display:block;font-size:17px;margin:12px 0}.claim .tag{display:inline-block;border-radius:999px;padding:6px 9px;background:#293235;color:var(--amber);font:700 11px ui-monospace,monospace;text-transform:uppercase}
footer{display:flex;justify-content:space-between;gap:20px;padding:26px clamp(24px,5vw,64px);color:var(--muted);font-size:12px;line-height:1.5}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#c9e8db}
@media(max-width:900px){header,.lab,.strip{grid-template-columns:1fr}.matrix{grid-template-columns:1fr 1fr}.claim-grid,.callout{grid-template-columns:1fr}.map{min-height:390px}.map svg{height:330px}}
@media(max-width:540px){.poster{width:calc(100vw - 20px)}h1{font-size:38px}.matrix{grid-template-columns:1fr}.score{grid-template-columns:1fr}footer{display:block}.scene-head{grid-template-columns:1fr}.num{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
</style>
</head>
<body>
<main class="poster">
<header>
<div>
<div class="eyebrow">ICML 2026 reproduction · Decision Atlas</div>
<h1>Can uncertainty learn where it hurts?</h1>
<p class="dek">A fixed transport ball pays the same attention in every direction. Loss-aware OT-DRO learns a geometry that spends robustness where a decision is vulnerable. We rebuilt the mechanism, then asked whether its coverage and loss claims survive a 14,000-task audit.</p>
</div>
<aside class="verdict" aria-label="Overall reproduction verdict">
<div class="eyebrow">Outcome</div>
<strong>Partial, with a warning</strong>
<p>The pipeline runs. Mean regression loss improves. Coverage does not reach 90%, and capped optimization keeps four claims inconclusive.</p>
</aside>
</header>
<section class="scene" aria-labelledby="scene1">
<div class="scene-head"><div class="num">01</div><div><h2 id="scene1">Start with one decision</h2><p>You manage a 100-credit reserve split between a growth asset and a shelter asset. Tomorrow's market can shift in four directions. Your goal is not to predict one future. It is to choose a split whose worst plausible future is tolerable.</p></div></div>
<div class="lab">
<div class="controls">
<div class="brief"><b>Your mission:</b> allocate the reserve, choose how uncertainty is shaped, then inspect the worst shock. The credits are just a budget. Growth can pay more but falls harder; shelter moves less.</div>
<label for="growth">Credits in growth <output id="growthOut">55</output></label>
<input id="growth" aria-label="Credits allocated to growth" type="range" min="0" max="100" value="55">
<label for="shape">Attention to growth-sensitive shifts <output id="shapeOut">50%</output></label>
<input id="shape" aria-label="Learned geometry emphasis" type="range" min="0" max="100" value="50">
<div class="toggle" aria-label="Ambiguity geometry">
<button id="fixed" type="button" aria-pressed="true">Fixed ball</button>
<button id="learned" type="button" aria-pressed="false">Learned geometry</button>
</div>
<div class="score">
<div class="metric"><span>Shelter credits</span><b id="shelterOut">45</b></div>
<div class="metric"><span>Worst shock loss</span><b id="lossOut">18.3</b></div>
</div>
</div>
<div class="map">
<svg viewBox="0 0 640 390" role="img" aria-label="Four market shocks and an adjustable uncertainty boundary">
<defs><filter id="glow"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
<line x1="70" y1="195" x2="590" y2="195" stroke="#314043"/><line x1="320" y1="40" x2="320" y2="350" stroke="#314043"/>
<text x="570" y="184" fill="#84918f" font-size="12">growth-sensitive</text><text x="330" y="55" fill="#84918f" font-size="12">shelter-sensitive</text>
<ellipse id="boundary" class="boundary" cx="320" cy="195" rx="150" ry="115" fill="rgba(119,184,221,.08)" stroke="#77b8dd" stroke-width="3" stroke-dasharray="8 7"/>
<g id="shock1" class="shock"><circle cx="440" cy="120" r="16" fill="#ff8c79" filter="url(#glow)"/><text x="462" y="124" fill="#d6ddda" font-size="13">growth crash</text></g>
<g id="shock2" class="shock"><circle cx="205" cy="130" r="14" fill="#f6c56f"/><text x="112" y="112" fill="#d6ddda" font-size="13">rate shock</text></g>
<g id="shock3" class="shock"><circle cx="230" cy="270" r="13" fill="#8ce0bd"/><text x="130" y="296" fill="#d6ddda" font-size="13">slow recovery</text></g>
<g id="shock4" class="shock"><circle cx="430" cy="285" r="14" fill="#77b8dd"/><text x="451" y="304" fill="#d6ddda" font-size="13">inflation</text></g>
<circle cx="320" cy="195" r="8" fill="#f3f0e8"/><text x="333" y="217" fill="#f3f0e8" font-size="13">observed data</text>
</svg>
<div class="legend"><span class="key"><span class="linekey" style="background:#77b8dd"></span>plausible-shift boundary</span><span class="key"><span class="dot" style="background:#ff8c79"></span>current worst shock</span></div>
<p id="explain" class="explain" aria-live="polite">A fixed ball treats every direction alike. Move the allocation, then switch to learned geometry to see what the outer problem changes.</p>
</div>
</div>
<div class="callout">
<article><b>Lower level</b><p>Given a geometry, solve the robust decision against its worst plausible distribution.</p></article>
<article><b>Upper level</b><p>Change the transport geometry so robustness targets shifts that create decision loss.</p></article>
<article><b>The scientific catch</b><p>A better average loss is not enough. The learned set must still cover the true distribution.</p></article>
</div>
</section>
<section class="scene" aria-labelledby="scene2">
<div class="scene-head"><div class="num">02</div><div><h2 id="scene2">The audit, not the demo</h2><p>The interaction teaches the mechanism. The verdict comes from frozen task identities, distribution-first uncertainty, solver receipts, and a recovery attestation for five controller exceptions.</p></div></div>
<div class="matrix">
<article class="evidence-card good"><div class="eyebrow">Validated</div><div class="big">14,000</div><div class="small">Unique task identities. Zero rejected rows after reconciliation.</div></article>
<article class="evidence-card good"><div class="eyebrow">Solver acceptance</div><div class="big">100%</div><div class="small">Every stored lower-level solve passed its declared contract.</div></article>
<article class="evidence-card warn"><div class="eyebrow">Right-censored</div><div class="big">4,579</div><div class="small">Trajectories stopped at 5,000 iterations. A cap hit is not convergence.</div></article>
<article class="evidence-card"><div class="eyebrow">Paid compute</div><div class="big">$0</div><div class="small">9 h 6 min local wall time, plus two clean OpenResearch evaluations.</div></article>
</div>
<div class="strip">
<div class="chart">
<h3>Coverage never reaches the promise</h3>
<p>Mean coverage across 50 distributions. The red rule is the paper's 0.90 target.</p>
<div class="bars" aria-label="Coverage by sample size"><div class="bar" data-v=".752" style="height:75.2%"></div><div class="bar" data-v=".798" style="height:79.8%"></div><div class="bar" data-v=".838" style="height:83.8%"></div><div class="bar" data-v=".822" style="height:82.2%"></div><div class="bar" data-v=".868" style="height:86.8%"></div><div class="bar" data-v=".852" style="height:85.2%"></div><div class="bar" data-v=".828" style="height:82.8%"></div><div class="bar" data-v=".842" style="height:84.2%"></div><div class="bar" data-v=".842" style="height:84.2%"></div><div class="bar" data-v=".834" style="height:83.4%"></div></div>
<div class="target"></div>
</div>
<div class="chart">
<h3>Regression improves on average</h3>
<p>Mean relative out-of-sample improvement is positive at every tested sample size: 4.0%, 6.0%, 7.3%, 9.3%, and 10.2%. But not every one of the ten trials improves.</p>
<div class="brief"><b>The distinction matters:</b> “positive on average” is weaker than “consistent across all ten trials.” The reproduction credits the first and rejects the promotion to the second.</div>
</div>
</div>
</section>
<section class="scene" aria-labelledby="scene3">
<div class="scene-head"><div class="num">03</div><div><h2 id="scene3">Six claims, six narrow verdicts</h2><p>Each label answers only the anchored claim. Extra sensitivity studies do not change the challenge score.</p></div></div>
<div class="claim-grid">
<article class="claim"><span class="id">A1 · bilevel formulation</span><strong>The pipeline runs, but many required trajectories are capped.</strong><span class="tag">partially verified</span></article>
<article class="claim"><span class="id">A2 · Theorem 5.1</span><strong>Finite capped traces cannot establish asymptotic convergence.</strong><span class="tag">inconclusive</span></article>
<article class="claim"><span class="id">A3 · nonsmooth hypergradient</span><strong>Smooth-point checks pass; active-set switching is not bound.</strong><span class="tag">inconclusive</span></article>
<article class="claim"><span class="id">A4 · Figure 2 trend</span><strong>The frozen sweep does not match all five anchored parameters.</strong><span class="tag">inconclusive</span></article>
<article class="claim"><span class="id">A5 · Figure 3 coverage</span><strong>Observed coverage misses 90%, but capped training blocks a terminal verdict.</strong><span class="tag">inconclusive</span></article>
<article class="claim"><span class="id">A6 · Figure 5 loss</span><strong>Mean loss improves at every size, not in every trial.</strong><span class="tag">partially verified</span></article>
</div>
</section>
<footer><span>Interactive allocation is an intuition lab, not scored evidence. All headline values come from the sealed reconciled aggregate.</span><span><code>aggregate 4b4b1ef2…f771a</code><br><code>results 025f51a6…bd78</code></span></footer>
</main>
<script>
(() => {
const growth = document.getElementById('growth');
const shape = document.getElementById('shape');
const fixed = document.getElementById('fixed');
const learned = document.getElementById('learned');
const boundary = document.getElementById('boundary');
let mode = 'fixed';
function update(){
const g = Number(growth.value), s = Number(shape.value);
document.getElementById('growthOut').value = g;
document.getElementById('shelterOut').textContent = 100-g;
document.getElementById('shapeOut').value = s+'%';
const exposure = Math.abs(g-42)/100;
const geometryRelief = mode === 'learned' ? (s/100)*7.2 : 0;
const loss = Math.max(4, 13.6 + exposure*18 - geometryRelief);
document.getElementById('lossOut').textContent = loss.toFixed(1);
const rx = mode === 'fixed' ? 150 : 100 + s*1.15;
const ry = mode === 'fixed' ? 115 : 160 - s*.55;
boundary.setAttribute('rx',rx); boundary.setAttribute('ry',ry);
boundary.setAttribute('stroke',mode === 'fixed' ? '#77b8dd' : '#8ce0bd');
document.getElementById('explain').textContent = mode === 'fixed'
? 'The fixed boundary stays symmetric. It cannot express that a growth crash hurts this allocation more than an equally large slow-recovery shift.'
: 'The learned geometry stretches toward shifts that matter to the current loss. This is the paper’s outer optimization, shown as a faithful visual analogy rather than a result.';
}
function setMode(next){mode=next;fixed.setAttribute('aria-pressed',String(next==='fixed'));learned.setAttribute('aria-pressed',String(next==='learned'));update()}
growth.addEventListener('input',update);shape.addEventListener('input',update);
fixed.addEventListener('click',()=>setMode('fixed'));learned.addEventListener('click',()=>setMode('learned'));
update();
})();
</script>
</body>
</html>

Xet Storage Details

Size:
18.5 kB
·
Xet hash:
2b91cd16245406a00897025375814de97a7a19e6ed3116128a136ab76d9a2cae

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