Skip to content

Clarify demos, diagrams, and the CacheBack overview; improve text legibility #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sirrice wants to merge 5 commits into
base: main
Choose a base branch
from
+443 −78
Open

Clarify demos, diagrams, and the CacheBack overview; improve text legibility #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3cfc38
Animate communication overview and clarify compression labels
maxr0ssi Oct 2, 2026
62e7c59
Expand communication animation section to fit its content
maxr0ssi Oct 3, 2026
b33fb41
Clarify demos, diagrams, and the CacheBack overview
Oct 3, 2026
ebb93e1
Make body text easier to read
Oct 3, 2026
f57befa
Merge remote-tracking branch 'origin/main' into demo-copy-and-diagrams
Oct 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 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.
315 changes: 315 additions & 0 deletions demo/communication.html
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 14 additions & 13 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="color-scheme" content="light">
<title>CacheBack | Booking relay</title>
<style>
:root { --highlight:#bde8e3; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:#222; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1320px,calc(100% - 64px)); margin:24px auto; }
Expand All @@ -24,7 +25,7 @@
.topology { margin:0 0 16px; padding:0; list-style:none; }
.flow-label { margin:0 0 10px; color:#777; font-size:11px; }
.topology li { position:relative; padding:10px 14px; border:1px solid #ddd; border-radius:5px; font-size:13px; }
.topology li:not(:last-child)::after { content:"→"; position:absolute; right:-23px; top:50%; transform:translateY(-50%); font-size:20px; color:#777; }
.topology li:not(:last-child)::after { content:""; position:absolute; right:-23px; top:50%; width:18px; height:14px; transform:translateY(-50%); background:var(--highlight); clip-path:polygon(0 30%,55% 30%,55% 0,100% 50%,55% 100%,55% 70%,0 70%); }
.topology strong { display:block; }
.topology span { color:#777; font-size:12px; }
.method { margin-top:16px; }
Expand All @@ -36,7 +37,7 @@
.answer { font-size:13px; }
.answer-check { margin:14px 0 0; font-size:12px; font-weight:600; }
strong { font-weight:600; }
mark { color:inherit; background:linear-gradient(#bde8e3,#bde8e3) left/100% 100% no-repeat; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
mark { color:inherit; background:linear-gradient(var(--highlight),var(--highlight)) left/100% 100% no-repeat; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.revealing mark { animation:highlight .18s ease-out both; }
@keyframes highlight { from { background-size:0% 100%; } to { background-size:100% 100%; } }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:28px; font-size:11px; color:#777; }
Expand All @@ -60,15 +61,15 @@
.embedded .flow-label { display:none; }
.embedded .question { padding-bottom:12px; border-bottom:1px solid #ddd; }
.embedded .topology { display:flex; flex:1; min-width:0; gap:22px; margin:0; }
.embedded .topology li { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:0; border:0; }
.embedded .topology li { display:flex; flex-direction:column; flex:1; min-width:0; padding:0; border:0; line-height:1.35; }
.embedded .topology strong { white-space:nowrap; font-size:12px; }
.embedded .topology span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.embedded .topology li:not(:last-child)::after { right:-17px; font-size:15px; }
.embedded .topology span { font-size:11px; overflow-wrap:anywhere; }
.embedded .topology li:not(:last-child)::after { right:-19px; width:16px; height:12px; }
.embedded .controls { flex-shrink:0; gap:10px; }
@media(max-width:800px) {
.embedded .topology span { display:none; }
.embedded .topology { gap:16px; }
.embedded .topology li:not(:last-child)::after { right:-12px; }
.embedded .topology li:not(:last-child)::after { right:-14px; width:12px; height:10px; }
.embedded .topology strong { font-size:10px; }
.embedded .controls { gap:5px; }
.embedded button { padding:8px 10px; }
Expand Down Expand Up @@ -96,10 +97,10 @@ <h1 id="question">Where should Maya collect her pass on Friday, and what ID shou
<div class="flow" aria-label="Four-agent relay">
<p class="flow-label">Chain of agents</p>
<ol class="topology" aria-label="Agent topology">
<li><strong>Agent 1</strong><span>booking-confirmation.txt</span></li>
<li><strong>Agent 2</strong><span>friday-desk-changes.txt</span></li>
<li><strong>Agent 3</strong><span>collection-id-rules.txt</span></li>
<li><strong>Agent 4</strong><span>Final answer</span></li>
<li><strong>Agent 1</strong><span>reads booking-confirmation</span></li>
<li><strong>Agent 2</strong><span>reads friday-desk-changes</span></li>
<li><strong>Agent 3</strong><span>reads collection-id-rules</span></li>
<li><strong>Agent 4</strong><span>answers the question</span></li>
</ol>
<section class="method" aria-labelledby="rclc-title">
<div class="method-heading"><h2 id="rclc-title">CacheBack</h2><span class="time" id="rclc-time"></span></div>
Expand Down Expand Up @@ -176,8 +177,8 @@ <h1 id="question">Where should Maya collect her pass on Friday, and what ID shou
trace.sources.forEach((source, i) => {
const chunk = element("div"); chunk.className = "chunk";
const name = document.querySelectorAll(".topology li span")[i].textContent;
chunk.dataset.agent = `Agent ${i + 1} · ${name}`;
chunk.tabIndex = 0; chunk.setAttribute("aria-label", `${method === "rclc" ? "Source document" : "Text handoff"} ${i + 1}: ${name}`);
chunk.dataset.agent = `Agent ${i + 1} ${name}`;
chunk.tabIndex = 0; chunk.setAttribute("aria-label", `Agent ${i + 1} ${name}: ${method === "rclc" ? "source text" : "text message"}`);
if (method === "rclc") {
chunk.classList.add("source");
chunk.classList.toggle("revealing", playing && phase === i + 1);
Expand All @@ -191,7 +192,7 @@ <h1 id="question">Where should Maya collect her pass on Friday, and what ID shou
chunk.scrollTop = method === "text" && phase === i + 1 ? chunk.scrollHeight : scroll[i] || 0;
});
const answer = element("div"); answer.className = "chunk answer";
answer.dataset.agent = "Agent 4 · Final answer";
answer.dataset.agent = "Agent 4 answers the question";
answer.tabIndex = 0; answer.setAttribute("aria-label", `${method === "rclc" ? "CacheBack" : "Text"} final answer`);
if (phase === 4) {
prose(answer, recorded[method].answer.text || "(empty answer)");
Expand Down
Loading