From b3cfc38c56ddf075c57d4f085538176881e481e1 Mon Sep 17 00:00:00 2001 From: max rossi Date: Fri, 2 Oct 2026 15:33:37 -0400 Subject: [PATCH 1/4] Animate communication overview and clarify compression labels --- README.md | 4 + demo/communication.html | 312 ++++++++++++++++++ index.html | 21 +- website/assets/figures/fanoutqa-nemotron.svg | 6 +- website/assets/figures/fanoutqa-qwen.svg | 12 +- website/assets/figures/longbench-nemotron.svg | 6 +- website/assets/figures/longbench-qwen.svg | 6 +- website/assets/styles.css | 4 +- website/check.mjs | 11 +- 9 files changed, 355 insertions(+), 27 deletions(-) create mode 100644 demo/communication.html diff --git a/README.md b/README.md index 0d1a045..eae0817 100644 --- a/README.md +++ b/README.md @@ -31,3 +31,7 @@ organization website address. `social-preview.jpg` is the homepage/results image used for link previews; the coding video keeps its own poster and preloads so playback can start promptly. Figure 2 is a scalable SVG redrawn from the paper asset, with the four legend entries below the diagram. + +Figure 2 now embeds the supplied animation in `demo/communication.html`, with a single play/pause button on the figure. The frame sizes to its contents. It uses only local assets and works with the same static deployment on GitHub Pages or Hugging Face Spaces. + +Benchmark plot labels use compression factors (4×, 16×); legends distinguish these from fixed position budgets and text sender sizes. diff --git a/demo/communication.html b/demo/communication.html new file mode 100644 index 0000000..9061933 --- /dev/null +++ b/demo/communication.html @@ -0,0 +1,312 @@ + + + + +CacheBack vs. full-KV transfer — animation + + + +
+ + +
Selected positions are ordinary tokens: they can be sent as token IDs and re-prefilled; only latent steps need KV.
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index c2b27c1..6d3ca0c 100644 --- a/index.html +++ b/index.html @@ -68,24 +68,27 @@

FANOUTQA

-
Figure 2: sending every agent's full cache exceeds the receiver's context limit. CacheBack sends selected positions and latent steps, leaving room for the receiver's prompt.
Figure 2. Full KV caches (stored model state) accumulate source context at the receiver and can exceed its context limit. Receiver-conditioning selects source and latent positions, leaving room for the receiver’s prompt. Token IDs represent source positions; continuous vectors represent latent steps.
+
+ + +

Results

-

FanOutQA

Questions require combining evidence across Wikipedia pages. We split at least 120K tokens among three parallel senders; a receiver answers from their messages. Strict accuracy requires every reference-answer group. Higher is more accurate; left is faster. Each panel fixes the receiver model. Text labels give sender size; CacheBack uses same-size senders. rX retains 1/X of sender positions; r4 keeps 25%.

+

FanOutQA

Questions require combining evidence across Wikipedia pages. We split at least 120K tokens among three parallel senders; a receiver answers from their messages. Strict accuracy requires every reference-answer group. Higher is more accurate; left is faster. Each panel fixes the receiver model. Text labels give sender size; CacheBack uses same-size senders. 4× compression retains ¼ of sender positions; 16× retains ¹⁄₁₆.

-
● ━ CacheBack▲ ┄ Text · labels show sender size× Question only
+
● ━ CacheBack · labels show compression factor▲ ┄ Text · labels show sender size× Question only
-
FanOutQA, Qwen 3 8B: CacheBack r4 reaches 55.3% strict accuracy at 192 seconds, compared with 40.7% at 612 seconds for same-size text; weaker settings are also plotted.
Qwen: r4 improves accuracy and completion time over 8B text; 1.7B text is slightly faster but less accurate.
-
FanOutQA, Nemotron Nano 2 12B: CacheBack r8 reaches 50% accuracy near 102 seconds versus 38.7% near 131 seconds for same-size text. A smaller text sender is faster at lower accuracy.
Nemotron: r8 improves on 12B text; 4B text is faster but less accurate.
+
FanOutQA, Qwen 3 8B: CacheBack 4× compression reaches 55.3% strict accuracy at 192 seconds, compared with 40.7% at 612 seconds for same-size text; weaker settings are also plotted.
Qwen: 4× compression improves accuracy and completion time over 8B text; 1.7B text is slightly faster but less accurate.
+
FanOutQA, Nemotron Nano 2 12B: CacheBack 8× compression reaches 50% accuracy near 102 seconds versus 38.7% near 131 seconds for same-size text. A smaller text sender is faster at lower accuracy.
Nemotron: 8× compression improves on 12B text; 4B text is faster but less accurate.
-

LongBench v2 Easy

Long-document questions test whether evidence survives repeated handoffs. We split each 100K-246K-token document into four equal parts. Each sender reads its part plus the previous message; a final receiver answers from the fourth message. Relative budgets (rX) grow with accumulated context; fixed budgets (32K, 64K) cap message positions. Axes and text-size labels follow FanOutQA.

+

LongBench v2 Easy

Long-document questions test whether evidence survives repeated handoffs. We split each 100K-246K-token document into four equal parts. Each sender reads its part plus the previous message; a final receiver answers from the fourth message. Compression factors retain a fraction of accumulated context (4× keeps ¼); fixed budgets (32K, 64K) cap message positions. Axes and text-size labels follow FanOutQA.

-
● ━ CacheBack · relative budget■ ━ CacheBack · fixed budget▲ ┄ Text · labels show sender size× Question only
+
● ━ CacheBack · labels show compression factor■ ━ CacheBack · labels show fixed position budget▲ ┄ Text · labels show sender size× Question only
-
LongBench v2 Easy, Qwen 3 8B: both relative and fixed CacheBack budgets include settings faster and more accurate than same-size text. Stronger compression eventually lowers accuracy.
Qwen: relative r4 gives the highest plotted accuracy; stronger compression loses accuracy.
-
LongBench v2 Easy, Nemotron Nano 2 12B: CacheBack r8 reaches 48% accuracy near 133 seconds, while fixed-budget settings show a different tradeoff; smaller text senders can be faster.
Nemotron: relative r8 beats 12B text on both axes; 4B text remains faster but less accurate.
+
LongBench v2 Easy, Qwen 3 8B: both relative and fixed CacheBack budgets include settings faster and more accurate than same-size text. Stronger compression eventually lowers accuracy.
Qwen: 4× compression gives the highest plotted accuracy; stronger compression loses accuracy.
+
LongBench v2 Easy, Nemotron Nano 2 12B: CacheBack 8× compression reaches 48% accuracy near 133 seconds, while fixed-budget settings show a different tradeoff; smaller text senders can be faster.
Nemotron: relative 8× compression beats 12B text on both axes; 4B text remains faster but less accurate.

Lines join the best accuracy-time tradeoffs within each channel; faded points are dominated settings. × means the receiver gets only the question. 50 concurrent tasks on 8 H100s; accuracy averaged over three receiver draws. Completion includes queueing. Full setup and results in the paper.

diff --git a/website/assets/figures/fanoutqa-nemotron.svg b/website/assets/figures/fanoutqa-nemotron.svg index 15b8fa4..13f0a9b 100644 --- a/website/assets/figures/fanoutqa-nemotron.svg +++ b/website/assets/figures/fanoutqa-nemotron.svg @@ -185,19 +185,19 @@ -r64 +64× -r16 +16× -r8 +8× 12B text diff --git a/website/assets/figures/fanoutqa-qwen.svg b/website/assets/figures/fanoutqa-qwen.svg index 79bd85c..d5a4df9 100644 --- a/website/assets/figures/fanoutqa-qwen.svg +++ b/website/assets/figures/fanoutqa-qwen.svg @@ -185,37 +185,37 @@ -r128 +128× -r64 +64× -r32 +32× -r16 +16× -r8 +8× -r4 +4× 8B text diff --git a/website/assets/figures/longbench-nemotron.svg b/website/assets/figures/longbench-nemotron.svg index ad9e2ce..6ff7e02 100644 --- a/website/assets/figures/longbench-nemotron.svg +++ b/website/assets/figures/longbench-nemotron.svg @@ -214,19 +214,19 @@ -r128 +128× -r16 +16× -r8 +8× 12B text diff --git a/website/assets/figures/longbench-qwen.svg b/website/assets/figures/longbench-qwen.svg index eb9e02a..003f9a6 100644 --- a/website/assets/figures/longbench-qwen.svg +++ b/website/assets/figures/longbench-qwen.svg @@ -219,19 +219,19 @@ -r64 +64× -r16 +16× -r4 +4× 8B text diff --git a/website/assets/styles.css b/website/assets/styles.css index eada484..7312cfd 100644 --- a/website/assets/styles.css +++ b/website/assets/styles.css @@ -92,7 +92,7 @@ strong,b { font-weight:650; } .abstract-section { display:grid; grid-template-columns:1fr; align-items:center; gap:48px; padding-block:64px; border-top:1px solid var(--line); } .tldr { font-size:16px; line-height:1.65; } -.abstract-section .overview-figure { max-width:900px; margin-inline:auto; } +.abstract-section .overview-figure { width:100%; max-width:900px; margin-inline:auto; } .overview-figure img { width:100%; height:auto; display:block; } .overview-figure figcaption { color:var(--muted); font-size:12px; margin-top:18px; } .tldr p+p { margin-top:12px; } @@ -261,3 +261,5 @@ html { scroll-behavior:auto; } @media(max-width:900px) { .benchmark-setup { grid-template-columns:1fr; gap:20px; } } @media(max-width:600px) { .benchmark-setup .sequential { gap:25px; } } + +.overview-figure .communication-animation { height:680px; background:transparent; } diff --git a/website/check.mjs b/website/check.mjs index fc731d0..f15677e 100644 --- a/website/check.mjs +++ b/website/check.mjs @@ -16,7 +16,7 @@ const ids = [...html.matchAll(/\bid="([^"]+)"/g)].map((match) => match[1]); assert.equal(new Set(ids).size, ids.length, 'Duplicate HTML IDs'); assert.equal((html.match(/Receiver-Conditioned Latent Communication gives/); -assert.equal((html.match(/
/g) || []).length, 5, 'Explain each paper figure'); +assert.equal((html.match(/
/g) || []).length, 4, 'Explain each static paper figure'); assert.match(html, //); assert.match(html, /name="viewport"/); assert.match(html, /Receiver-Conditioned Latent Communication gives 94% CacheBack<\/title>/); @@ -24,7 +24,7 @@ const sectionOrder = ['result-summary', 'booking-demo', 'abstract', 'results', ' sectionOrder.slice(1).forEach((id, i) => { assert.ok(html.indexOf(`id="${sectionOrder[i]}"`) < html.indexOf(`id="${id}"`), `Section order: ${id}`); }); -assert.equal((html.match(/<img src="website\/assets\/figures\//g) || []).length, 5); +assert.equal((html.match(/<img src="website\/assets\/figures\//g) || []).length, 4); for (const [, url] of html.matchAll(/(?:href|src|poster)="([^"]+)"/g)) { if (/^(https:|data:)/.test(url)) continue; @@ -104,3 +104,10 @@ for (const name of readdirSync(dist, { recursive: true })) { } assert.ok(bytes < 100000, 'Keep first-party static assets below 100 KB'); console.log(`Website checks passed: anchors, assets, benchmark points, accessibility hooks; ${bytes} bytes, ${gzipSync(js).length} bytes gzipped JS.`); + +const animation = readFileSync(resolve(project, 'demo/communication.html'), 'utf8'); +assert.match(html, /src="demo\/communication.html"/); +assert.equal((animation.match(/<svg id="svg"/g) || []).length, 1); +assert.equal((animation.match(/<button/g) || []).length, 1, 'Only the play/pause control'); +assert.doesNotMatch(animation, /setTimeout\(play/, 'Playback starts on user action'); +new Function(animation.match(/<script>([\s\S]*?)<\/script>/)[1]); From 62e7c59da94934ce405f32169a04bea5db6e74fa Mon Sep 17 00:00:00 2001 From: Max Rossi <113717219+maxr0ssi@users.noreply.github.com> Date: Sat, 3 Oct 2026 10:28:38 -0400 Subject: [PATCH 2/4] Expand communication animation section to fit its content --- README.md | 2 +- demo/communication.html | 7 +++++-- index.html | 2 +- website/assets/styles.css | 2 +- website/check.mjs | 2 +- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index eae0817..8cfade6 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,6 @@ image used for link previews; the coding video keeps its own poster and preloads Figure 2 is a scalable SVG redrawn from the paper asset, with the four legend entries below the diagram. -Figure 2 now embeds the supplied animation in `demo/communication.html`, with a single play/pause button on the figure. The frame sizes to its contents. It uses only local assets and works with the same static deployment on GitHub Pages or Hugging Face Spaces. +Figure 2 now embeds the supplied animation in `demo/communication.html`, with a single play/pause button on the figure. The section expands to fit the entire animation and caption, without an inner scrollbar. Frame height follows the stage’s layout height, including caption changes during playback. It uses only local assets and works with the same static deployment on GitHub Pages or Hugging Face Spaces. Benchmark plot labels use compression factors (4×, 16×); legends distinguish these from fixed position budgets and text sender sizes. diff --git a/demo/communication.html b/demo/communication.html index 9061933..ee9c009 100644 --- a/demo/communication.html +++ b/demo/communication.html @@ -304,8 +304,11 @@ }; render(t); new ResizeObserver(() => { - if (window.frameElement) window.frameElement.style.height = Math.ceil(document.body.getBoundingClientRect().height + 2) + 'px'; -}).observe(document.body); + if (window.frameElement) { + window.frameElement.style.aspectRatio = 'auto'; + window.frameElement.style.height = document.getElementById('stage').offsetHeight + 4 + 'px'; + } +}).observe(document.getElementById('stage')); </script> diff --git a/index.html b/index.html index 6d3ca0c..7602543 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@ <h2 id="hero-results-title" class="eyebrow">FANOUTQA</h2><p class="visual-note"> </section> <section id="abstract" class="abstract-section wrap" aria-label="Communication overview"> <figure class="overview-figure"> - <iframe class="communication-animation" src="demo/communication.html" title="Figure 2: animated comparison of full KV transfer and CacheBack" loading="lazy" sandbox="allow-scripts allow-same-origin"></iframe> + <iframe class="communication-animation" src="demo/communication.html?v=fit-2" title="Figure 2: animated comparison of full KV transfer and CacheBack" loading="lazy" sandbox="allow-scripts allow-same-origin"></iframe> </figure> </section> diff --git a/website/assets/styles.css b/website/assets/styles.css index 7312cfd..d3a959a 100644 --- a/website/assets/styles.css +++ b/website/assets/styles.css @@ -262,4 +262,4 @@ html { scroll-behavior:auto; } @media(max-width:600px) { .benchmark-setup .sequential { gap:25px; } } -.overview-figure .communication-animation { height:680px; background:transparent; } +.overview-figure .communication-animation { height:auto; aspect-ratio:1180 / 650; background:transparent; } diff --git a/website/check.mjs b/website/check.mjs index f15677e..becb0ca 100644 --- a/website/check.mjs +++ b/website/check.mjs @@ -106,7 +106,7 @@ assert.ok(bytes < 100000, 'Keep first-party static assets below 100 KB'); console.log(`Website checks passed: anchors, assets, benchmark points, accessibility hooks; ${bytes} bytes, ${gzipSync(js).length} bytes gzipped JS.`); const animation = readFileSync(resolve(project, 'demo/communication.html'), 'utf8'); -assert.match(html, /src="demo\/communication.html"/); +assert.match(html, /src="demo\/communication.html\?v=fit-2"/); assert.equal((animation.match(/<svg id="svg"/g) || []).length, 1); assert.equal((animation.match(/<button/g) || []).length, 1, 'Only the play/pause control'); assert.doesNotMatch(animation, /setTimeout\(play/, 'Playback starts on user action'); From b33fb41e9f1aa2da00a63b2f4ffda08abe28d3b5 Mon Sep 17 00:00:00 2001 From: Eugene Wu <eugenewu@Eugenes-MacBook-Air-841.local> Date: Sat, 3 Oct 2026 11:26:47 -0400 Subject: [PATCH 3/4] Clarify demos, diagrams, and the CacheBack overview - Put the Django coding demo first and move the Maya replay after Results. - Rewrite both demo descriptions as a short intro plus bullets. - Maya replay: label agents by the document they read and draw the handoff arrows in the highlight color; let labels wrap instead of truncating. - FanOutQA and LongBench diagrams: show evidence as separate boxes that agents read; widen the LongBench diagram and draw arrows that fit the gap so arrowheads are visible. - Add a "How CacheBack works" heading and description above the animation, drawn from the abstract. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --- demo/index.html | 27 ++++++++--------- index.html | 61 +++++++++++++++++++++++++-------------- website/assets/styles.css | 32 +++++++++++++++----- website/check.mjs | 6 ++-- 4 files changed, 80 insertions(+), 46 deletions(-) diff --git a/demo/index.html b/demo/index.html index 3f97ba6..c1b8c51 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,6 +6,7 @@ <meta name="color-scheme" content="light"> <title>CacheBack | Booking relay