PageSourceSearch

https://zhangce01.github.io/LENS/

html zhangce01.github.io collected 2026-10-03 10:14:25 UTC 32,432 bytes, 530 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title>LENS: Adaptive Spatio-Temporal Zooming for Keyframe Sampling in Long-Form Videos</title>
7<meta name="description" content="LENS (ECCV 2026): a training-free keyframe sampling framework that adaptively zooms in for fine-grained details and zooms out for broader temporal context in long-form video understanding.">
8<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔍</text></svg>">
9<link rel="preconnect" href="https://fonts.googleapis.com">
10<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12<style>
13:root{
14  --bg:#f8fafc;
15  --surface:#ffffff;
16  --ink:#0f172a;
17  --ink-soft:#475569;
18  --ink-faint:#94a3b8;
19  --line:#e2e8f0;
20  --spa:#f59e0b;          /* spatial zoom-in: amber  */
21  --tem:#3b82f6;          /* temporal zoom-out: blue */
22  --acc:#6366f1;
23  --grad:linear-gradient(100deg,#f59e0b 0%,#ef6a3d 30%,#6366f1 68%,#3b82f6 100%);
24  --radius:18px;
25  --shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -12px rgba(15,23,42,.12);
26  --shadow-lg:0 2px 4px rgba(15,23,42,.06),0 24px 48px -16px rgba(15,23,42,.18);
27}
28*{box-sizing:border-box;margin:0;padding:0}
29html{scroll-behavior:smooth}
30body{
31  font-family:'Inter',system-ui,sans-serif;
32  background:var(--bg);
33  color:var(--ink);
34  line-height:1.65;
35  -webkit-font-smoothing:antialiased;
36  overflow-x:hidden;
37}
38h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif}
39img{max-width:100%;display:block}
40a{color:var(--acc);text-decoration:none}
41.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
42
43/* ── navbar ─────────────────────────────── */
44nav{
45  position:fixed;top:0;left:0;right:0;z-index:50;
46  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
47  background:rgba(248,250,252,.75);
48  border-bottom:1px solid rgba(226,232,240,.7);
49}
50.nav-inner{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
51.brand{font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:8px}
52.brand .dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
53.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
54.nav-links a{color:var(--ink-soft);font-size:.92rem;font-weight:500;transition:color .2s}
55.nav-links a:hover{color:var(--ink)}
56.nav-gh{
57  display:inline-flex;align-items:center;gap:7px;
58  background:var(--ink);color:#fff!important;padding:7px 15px;border-radius:999px;
59  font-size:.88rem;font-weight:600;transition:transform .2s,box-shadow .2s;
60}
61.nav-gh:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(15,23,42,.4)}
62@media(max-width:760px){.nav-links a:not(.nav-gh){display:none}}
63
64/* ── hero ───────────────────────────────── */
65header{
66  position:relative;padding:150px 0 70px;text-align:center;overflow:hidden;
67}
68.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
69.blob.b1{width:480px;height:480px;background:#fcd34d;top:-140px;left:-120px}
70.blob.b2{width:520px;height:520px;background:#93c5fd;top:-100px;right:-140px;animation-delay:-7s}
71.blob.b3{width:380px;height:380px;background:#c7d2fe;bottom:-180px;left:38%;animation-delay:-3s}
72@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,26px) scale(1.08)}}
73.conf-pill{
74  display:inline-flex;align-items:center;gap:8px;
75  background:#fff;border:1px solid var(--line);border-radius:999px;
76  padding:7px 18px;font-weight:600;font-size:.9rem;color:var(--ink-soft);
77  box-shadow:var(--shadow);margin-bottom:26px;
78}
79.conf-pill b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
80header h1{
81  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.12;font-weight:700;letter-spacing:-.02em;
82  max-width:940px;margin:0 auto 10px;
83}
84header h1 .lens{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
85.tagline{font-size:clamp(1rem,2vw,1.18rem);color:var(--ink-soft);max-width:760px;margin:14px auto 30px}
86.tagline b.spa{color:var(--spa)}.tagline b.tem{color:var(--tem)}
87.authors{font-size:1.06rem;font-weight:500;color:var(--ink);margin-bottom:6px}
88.affil{color:var(--ink-faint);font-size:.95rem;margin-bottom:34px}
89.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
90.btn{
91  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;
92  font-weight:600;font-size:.95rem;transition:transform .2s,box-shadow .2s;border:1px solid transparent;
93}
94.btn:hover{transform:translateY(-2px)}
95.btn.primary{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
96.btn.primary:hover{box-shadow:0 14px 28px -8px rgba(15,23,42,.45)}
97.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
98.btn.soon{background:#fff;border-color:var(--line);color:var(--ink-faint);cursor:default;box-shadow:var(--shadow)}
99.btn.soon:hover{transform:none}
100.btn svg{width:17px;height:17px}
101
102/* ── stats band ─────────────────────────── */
103.stats{margin:64px auto 0}
104.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
105@media(max-width:820px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
106.stat{
107  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
108  padding:24px 18px;box-shadow:var(--shadow);text-align:center;
109}
110.stat .num{font-family:'Space Grotesk';font-size:2rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
111.stat .lab{font-size:.86rem;color:var(--ink-soft);margin-top:4px}
112
113/* ── sections ───────────────────────────── */
114section{padding:84px 0 6px}
115.kicker{
116  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
117  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;
118}
119section h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
120.prose{color:var(--ink-soft);max-width:860px;font-size:1.02rem}
121.prose b{color:var(--ink)}
122.figure{
123  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
124  padding:16px;box-shadow:var(--shadow);margin:34px 0 8px;
125}
126.figure img{border-radius:10px}
127.figcap{font-size:.88rem;color:var(--ink-faint);margin-top:12px;padding:0 6px}
128.figcap b{color:var(--ink-soft)}
129
130/* zoom cards */
131.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
132@media(max-width:760px){.duo{grid-template-columns:1fr}}
133.zoom-card{
134  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
135  padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;
136}
137.zoom-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
138.zoom-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
139.zoom-card.spa::before{background:linear-gradient(90deg,#fbbf24,#f97316)}
140.zoom-card.tem::before{background:linear-gradient(90deg,#60a5fa,#4f46e5)}
141.zoom-card .icon{font-size:1.7rem}
142.zoom-card h3{font-size:1.15rem;margin:10px 0 8px}
143.zoom-card p{font-size:.95rem;color:var(--ink-soft)}
144
145/* method cards */
146.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
147@media(max-width:860px){.tri{grid-template-columns:1fr}}
148.m-card{
149  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
150  padding:26px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
151}
152.m-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
153.m-card .step{
154  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
155  font-family:'Space Grotesk';font-weight:700;color:#fff;font-size:1rem;margin-bottom:14px;
156}
157.m-card:nth-child(1) .step{background:linear-gradient(135deg,#fbbf24,#f97316)}
158.m-card:nth-child(2) .step{background:linear-gradient(135deg,#60a5fa,#4f46e5)}
159.m-card:nth-child(3) .step{background:linear-gradient(135deg,#a78bfa,#6366f1)}
160.m-card h3{font-size:1.08rem;margin-bottom:8px}
161.m-card p{font-size:.93rem;color:var(--ink-soft)}
162.m-card code{font-family:'JetBrains Mono',monospace;font-size:.85em;background:#eef2ff;color:#4338ca;padding:1px 6px;border-radius:6px}
163
164/* ── results ────────────────────────────── */
165.tabs{display:inline-flex;background:#eef1f6;border-radius:999px;padding:5px;margin:26px 0 18px;gap:4px}
166.tab{
167  border:0;background:transparent;padding:8px 20px;border-radius:999px;cursor:pointer;
168  font-family:'Inter';font-weight:600;font-size:.92rem;color:var(--ink-soft);transition:all .2s;
169}
170.tab.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
171.table-card{
172  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
173  box-shadow:var(--shadow);overflow-x:auto;
174}
175.table-card.tab-in{animation:tabIn .38s cubic-bezier(.2,.7,.3,1)}
176@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
177table{border-collapse:collapse;width:100%;min-width:640px;font-size:.93rem}
178th,td{padding:11px 16px;text-align:center;white-space:nowrap}
179th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);border-bottom:1px solid var(--line);font-weight:600}
180td:first-child,th:first-child{text-align:left}
181tbody tr{border-bottom:1px solid #f1f5f9}
182tbody tr:last-child{border-bottom:0}
183tr.ours{background:linear-gradient(90deg,rgba(245,158,11,.08),rgba(59,130,246,.08))}
184tr.ours td{font-weight:700}
185tr.ours td:first-child{color:var(--acc)}
186.delta{color:#059669;font-weight:700;font-size:.85em}
187.tbl-note{font-size:.85rem;color:var(--ink-faint);margin-top:12px}
188
189/* ablation bars */
190.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:34px}
191@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
192.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
193.panel h3{font-size:1.05rem;margin-bottom:18px}
194.bar-row{display:grid;
194grid-template-columns:170px 1fr 52px;align-items:center;gap:12px;margin-bottom:11px;font-size:.88rem}
195.bar-row .lab{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
196.bar-track{background:#eef1f6;border-radius:999px;height:10px;overflow:hidden}
197.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#93c5fd,#6366f1);width:0;transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
198.bar-row.ours .bar-fill{background:var(--grad)}
199.bar-row .val{font-weight:700;font-family:'Space Grotesk';text-align:right}
200.bar-row.ours .val{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
201.eff-list{display:flex;flex-direction:column;gap:12px}
202.eff-item{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:10px;font-size:.93rem}
203.eff-item:last-child{border-bottom:0}
204.eff-item .m{color:var(--ink-soft)}
205.eff-item.ours .m{font-weight:700;color:var(--ink)}
206.eff-item .v{font-family:'JetBrains Mono';font-size:.86rem;color:var(--ink-faint)}
207.eff-item .g{font-weight:700;color:#059669;margin-left:10px}
208
209/* qualitative */
210.qual-stack{display:flex;flex-direction:column;gap:26px;margin-top:34px}
211
212/* bibtex */
213.bib-card{
214  position:relative;background:#0f172a;border-radius:var(--radius);padding:28px;
215  box-shadow:var(--shadow-lg);margin-top:30px;overflow-x:auto;
216}
217.bib-card pre{font-family:'JetBrains Mono',monospace;font-size:.87rem;color:#dbe4f3;line-height:1.7}
218.bib-card .k{color:#93c5fd}.bib-card .s{color:#fcd34d}
219.copy-btn{
220  position:absolute;top:16px;right:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
221  color:#e2e8f0;border-radius:9px;padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;
222  font-family:'Inter';transition:background .2s;
223}
224.copy-btn:hover{background:rgba(255,255,255,.2)}
225
226/* footer */
227footer{margin-top:96px;border-top:1px solid var(--line);padding:44px 0 56px;background:#fff}
228footer .ack{font-size:.85rem;color:var(--ink-faint);max-width:860px;margin-bottom:18px}
229footer .foot-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.88rem;color:var(--ink-soft)}
230
231/* colored scrollbar (standard props only for Firefox — Chromium would
232   otherwise ignore the ::-webkit-scrollbar gradient styling) */
233@supports not selector(::-webkit-scrollbar){
234  html{scrollbar-width:thin;scrollbar-color:#a5b4fc #f1f4f9}
235}
236::-webkit-scrollbar{width:9px;height:9px}
237::-webkit-scrollbar-track{background:#f1f4f9}
238::-webkit-scrollbar-thumb{
239  background:linear-gradient(180deg,#fcd34d 0%,#fdba74 30%,#a5b4fc 68%,#93c5fd 100%);
240  border-radius:999px;border:2px solid #f1f4f9;
241}
242::-webkit-scrollbar-thumb:hover,
243::-webkit-scrollbar-thumb:active{
244  background:linear-gradient(180deg,#a78bfa 0%,#818cf8 50%,#6366f1 100%);
245  border-width:1px;
246}
247
248/* reveal animation */
249.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
250.reveal.in{opacity:1;transform:none}
251</style>
252</head>
253<body>
254
255<nav>
256  <div class="nav-inner">
257    <a class="brand" href="#top">🔍 <span>LENS<span class="dot">.</span></span></a>
258    <div class="nav-links">
259      <a href="#overview">Overview</a>
260      <a href="#method">Method</a>
261      <a href="#results">Results</a>
262      <a href="#qualitative">Qualitative</a>
263      <a href="#bibtex">BibTeX</a>
264      <a class="nav-gh" href="https://github.com/zhangce01/LENS" target="_blank" rel="noopener">
265        <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
266        Code
267      </a>
268    </div>
269  </div>
270</nav>
271
272<header id="top">
273  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
274  <div class="wrap" style="position:relative">
275    <div class="conf-pill">🎉 Accepted to <b>&nbsp;ECCV 2026</b></div>
276    <h1><span class="lens">LENS</span>: Adaptive Spatio-Temporal Zooming for Keyframe Sampling in Long-Form Videos</h1>
277    <p class="tagline">A training-free framework that dynamically decides when to <b class="spa">zoom&nbsp;in&nbsp;🔍</b> for fine-grained details and when to <b class="tem">zoom&nbsp;out&nbsp;🔭</b> for broader temporal context — based on the text query.</p>
278    <div class="authors">Ce Zhang&emsp;·&emsp;Jinxi He&emsp;·&emsp;Katia Sycara&emsp;·&emsp;Yaqi Xie</div>
279    <div class="affil">Robotics Institute, Carnegie Mellon University</div>
280    <div class="btn-row">
281      <a class="btn ghost" href="https://arxiv.org/abs/2607.25125" target="_blank" rel="noopener">📄 arXiv</a>
282      <a class="btn ghost" href="https://arxiv.org/pdf/2607.25125" target="_blank" rel="noopener">📕 PDF</a>
283      <a class="btn primary" href="https://github.com/zhangce01/LENS" target="_blank" rel="noopener">
284        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
285        Code
286      </a>
287      <a class="btn ghost" href="#bibtex">✏️ BibTeX</a>
288    </div>
289
290    <div class="stats reveal">
291      <div class="stat-grid">
292        <div class="stat"><div class="num">+7.4%</div><div class="lab">Video-MME gain over uniform sampling (8 frames, Qwen2.5-VL)</div></div>
293        <div class="stat"><div class="num">67.1%</div><div class="lab">Video-MME accuracy at 32 frames — best among all sampling baselines</div></div>
294        <div class="stat"><div class="num">4×</div><div class="lab">faster than LLM-agent &amp; video-RAG pipelines on the same benchmark</div></div>
295        <div class="stat"><div class="num">0</div><div class="lab">training required — plug-and-play with open &amp; proprietary MLLMs</div></div>
296      </div>
297    </div>
298  </div>
299</header>
300
301<main class="wrap">
302
303<section id="overview" class="reveal">
304  <span class="kicker">Overview</span>
305  <h2>Why spatio-temporal zooming?</h2>
306  <p class="prose">
307    Understanding long-form videos with Multi-modal Large Language Models (MLLMs) is bottlenecked by limited context windows. Keyframe sampling distills a video into a compact set of query-relevant frames — but navigating the vast spatio-temporal search space is hard, because <b>spatial detail and temporal coverage often conflict</b>. Detail-oriented questions hinge on fine-grained evidence inside a few frames, while event-level questions require broad temporal context; a fixed sampling strategy cannot serve both.
308  </p>
309  <div class="figure">
310    <img src="static/images/overview.png" alt="Illustration of LENS for multi-granular video understanding">
311    <div class="figcap"><b>Figure 1 — LENS for multi-granular video understanding.</b> For detail-oriented questions (left), uniform/coarse sampling misses fine-grained visual evidence, while our spatial zoom-in highlights query-relevant regions. For event-level questions (right), prior approaches suffer from limited temporal coverage, while our temporal zoom-out expands long-range context.</div>
312  </div>
313  <div class="duo">
314    <div class="zoom-card spa">
315      <div class="icon">🔍</div>
316      <h3>Spatial Zoom-In</h3>
317      <p>Narrows the spatial field of view <em>within</em> a frame to amplify local detail: ITM relevance scoring with watershed-based candidate selection, then pixel-level visual prompting from CLIP attention maps highlights query-relevant regions while suppressing background noise.</p>
318    </div>
319    <div class="zoom-card tem">
320      <div class="icon">🔭</div>
321      <h3>Temporal Zoom-Out</h3>
322      <p>Widens the temporal field of view <em>across</em> frames: a video graph propagates relevance via message passing to capture global structure, and each selected anchor is aggregated with its neighbors into a <em>hyperframe</em> — trading spatial resolution for long-range temporal coverage.</p>
323    </div>
324  </div>
325</section>
326
327<section id="method" class="reveal">
328  <span class="kicker">Method</span>
329  <h2>The LENS framework</h2>
330  <p class="prose">
331    LENS adaptively allocates a limited frame budget between spatial zoom-ins and temporal zoom
331-outs, enabling the model to reason across multiple granularities while capturing both high-fidelity details and long-range context — <b>without any training</b>.
332  </p>
333  <div class="figure">
334    <img src="static/images/method.png" alt="Overview of the LENS framework">
335    <div class="figcap"><b>Figure 2 — Overview of LENS.</b> (A) Spatial zoom-in selects query-relevant frames via image–text similarity and enhances fine-grained evidence with CLIP attention–based visual prompting. (B) Temporal zoom-out builds a video graph, refines relevance scores through message passing, and composes context-rich hyperframes. (C) An adaptive budget allocator distributes the frame budget between both branches for final reasoning.</div>
336  </div>
337  <div class="tri">
338    <div class="m-card">
339      <div class="step">A</div>
340      <h3>Spatial Zoom-In via Visual Prompting</h3>
341      <p>CLIP/BLIP scores every frame against the query; a watershed algorithm partitions the relevance curve into temporal segments and keeps each segment's peak. Query-conditioned attention attribution, fused with visual saliency, forms an alpha mask that amplifies query-relevant regions at full resolution.</p>
342    </div>
343    <div class="m-card">
344      <div class="step">B</div>
345      <h3>Temporal Zoom-Out with Video Graph Reasoning</h3>
346      <p>Frames become nodes of a sparse graph connected by visual similarity until fully connected. Iterative message passing <code>y⁽ᵗ⁾ = αSy⁽ᵗ⁻¹⁾ + (1−α)y⁽⁰⁾</code> refines relevance with the video's intrinsic structure; refined anchors are packed with neighbors into 2×2 hyperframes.</p>
347    </div>
348    <div class="m-card">
349      <div class="step">C</div>
350      <h3>Adaptive Budget Allocation</h3>
351      <p>A lightweight query-aware controller — the MLLM itself with a short allocation prompt — predicts a ratio <code>r = C(Q, P)</code> that splits the budget: more zoom-in for detail questions, more zoom-out for event-level questions. Frames from both branches merge in temporal order.</p>
352    </div>
353  </div>
354</section>
355
356<section id="results" class="reveal">
357  <span class="kicker">Experiments</span>
358  <h2>Results on long-form video benchmarks</h2>
359  <p class="prose">
360    Across <b>Video-MME</b>, <b>LongVideoBench (LVB)</b>, and <b>MLVU</b>, LENS consistently outperforms state-of-the-art training-free keyframe sampling methods (BOLT, AKS, Q-Frame) at every frame budget, and transfers to open-source and proprietary backbones alike.
361  </p>
362
363  <div class="tabs" role="tablist">
364    <button class="tab active" data-t="t8">8 frames</button>
365    <button class="tab" data-t="t16">16 frames</button>
366    <button class="tab" data-t="t32">32 frames</button>
367    <button class="tab" data-t="tbb">Other backbones</button>
368  </div>
369
370  <div class="table-card" id="t8">
371    <table>
372      <thead><tr><th>Method (Qwen2.5-VL 7B)</th><th>Short</th><th>Medium</th><th>Long</th><th>V-MME Overall</th><th>LVB</th><th>MLVU</th></tr></thead>
373      <tbody>
374        <tr><td>Uniform</td><td>60.9</td><td>51.4</td><td>47.4</td><td>53.3</td><td>53.3</td><td>52.8</td></tr>
375        <tr><td>+ BOLT</td><td>66.0</td><td>54.6</td><td>50.4</td><td>57.0</td><td>55.6</td><td>59.0</td></tr>
376        <tr><td>+ AKS</td><td>62.1</td><td>51.4</td><td>48.8</td><td>54.1</td><td>52.0</td><td>53.7</td></tr>
377        <tr><td>+ Q-Frame</td><td>66.7</td><td>58.7</td><td>51.3</td><td>58.7</td><td>56.6</td><td>58.2</td></tr>
378        <tr class="ours"><td>+ LENS (Ours)</td><td>68.7</td><td>59.6</td><td>53.7</td><td>60.7 <span class="delta">+7.4</span></td><td>59.3</td><td>63.7</td></tr>
379      </tbody>
380    </table>
381  </div>
382  <div class="table-card" id="t16" hidden>
383    <table>
384      <thead><tr><th>Method (Qwen2.5-VL 7B)</th><th>Short</th><th>Medium</th><th>Long</th><th>V-MME Overall</th><th>LVB</th><th>MLVU</th></tr></thead>
385      <tbody>
386        <tr><td>Uniform</td><td>67.3</td><td>55.0</td><td>48.9</td><td>57.1</td><td>56.7</td><td>57.1</td></tr>
387        <tr><td>+ BOLT</td><td>71.7</td><td>57.7</td><td>49.7</td><td>59.7</td><td>58.0</td><td>64.5</td></tr>
388        <tr><td>+ AKS</td><td>66.4</td><td>56.9</td><td>48.6</td><td>57.3</td><td>55.7</td><td>57.8</td></tr>
389        <tr><td>+ Q-Frame</td><td>70.0</td><td>59.4</td><td>52.6</td><td>60.7</td><td>57.1</td><td>61.9</td></tr>
390        <tr class="ours"><td>+ LENS (Ours)</td><td>72.3</td><td>62.1</td><td>
39054.8</td><td>63.1 <span class="delta">+6.0</span></td><td>59.7</td><td>65.9</td></tr>
391      </tbody>
392    </table>
393  </div>
394  <div class="table-card" id="t32" hidden>
395    <table>
396      <thead><tr><th>Method (Qwen2.5-VL 7B)</th><th>Short</th><th>Medium</th><th>Long</th><th>V-MME Overall</th><th>LVB</th><th>MLVU</th></tr></thead>
397      <tbody>
398        <tr><td>Uniform</td><td>72.6</td><td>59.0</td><td>51.8</td><td>61.1</td><td>58.4</td><td>59.4</td></tr>
399        <tr><td>+ BOLT</td><td>74.3</td><td>64.2</td><td>53.8</td><td>64.1</td><td>58.6</td><td>66.3</td></tr>
400        <tr><td>+ AKS</td><td>66.4</td><td>56.9</td><td>48.6</td><td>57.3</td><td>58.3</td><td>63.1</td></tr>
401        <tr><td>+ Q-Frame</td><td>71.8</td><td>62.4</td><td>52.8</td><td>62.3</td><td>58.7</td><td>64.6</td></tr>
402        <tr class="ours"><td>+ LENS (Ours)</td><td>74.6</td><td>70.0</td><td>56.7</td><td>67.1 <span class="delta">+6.0</span></td><td>60.6</td><td>66.7</td></tr>
403      </tbody>
404    </table>
405  </div>
406  <div class="table-card" id="tbb" hidden>
407    <table>
408      <thead><tr><th>Backbone (8 frames)</th><th>Short</th><th>Medium</th><th>Long</th><th>V-MME Overall</th><th>LVB</th><th>MLVU</th></tr></thead>
409      <tbody>
410        <tr><td>LLaVA-OneVision 7B</td><td>63.9</td><td>51.2</td><td>43.9</td><td>53.2</td><td>51.8</td><td>59.2</td></tr>
411        <tr class="ours"><td>+ LENS (Ours)</td><td>66.2</td><td>60.1</td><td>49.7</td><td>58.7 <span class="delta">+5.5</span></td><td>57.5</td><td>66.3</td></tr>
412        <tr><td>GPT-5-Mini</td><td>74.4</td><td>61.1</td><td>58.9</td><td>64.8</td><td>55.0</td><td>49.1</td></tr>
413        <tr class="ours"><td>+ LENS (Ours)</td><td>78.6</td><td>62.7</td><td>65.6</td><td>69.0 <span class="delta">+4.2</span></td><td>61.7</td><td>53.8</td></tr>
414      </tbody>
415    </table>
416  </div>
417  <p class="tbl-note">VQA accuracy (%) on Video-MME (w/o subtitles), LongVideoBench, and MLVU. Baselines re-implemented under identical protocols.</p>
418
419  <div class="grid-2">
420    <div class="panel">
421      <h3>🧪 Component ablation — Video-MME overall (8 frames)</h3>
422      <div class="bar-row"><span class="lab">Qwen2.5-VL (uniform)</span><div class="bar-track"><div class="bar-fill" data-w="53.3"></div></div><span class="val">53.3</span></div>
423      <div class="bar-row"><span class="lab">+ CLIP scores</span><div class="bar-track"><div class="bar-fill" data-w="56.6"></div></div><span class="val">56.6</span></div>
424      <div class="bar-row"><span class="lab">+ BLIP scores</span><div class="bar-track"><div class="bar-fill" data-w="57.0"></div></div><span class="val">57.0</span></div>
425      <div class="bar-row"><span class="lab">+ Spatial zoom-in</span><div class="bar-track"><div class="bar-fill" data-w="59.6"></div></div><span class="val">59.6</span></div>
426      <div class="bar-row"><span class="lab">+ Temporal zoom-out</span><div class="bar-track"><div class="bar-fill" data-w="59.2"></div></div><span class="val">59.2</span></div>
427      <div class="bar-row"><span class="lab">+ Fixed budgets (4/4)</span><div class="bar-track"><div class="bar-fill" data-w="60.2"></div></div><span class="val">60.2</span></div>
428      <div class="bar-row ours"><span class="lab">+ Adaptive budgets</span><div class="bar-track"><div class="bar-fill" data-w="60.7"></div></div><span class="val">60.7</span></div>
429    </div>
430    <div class="panel">
431      <h3>⚡ Efficiency — full Video-MME, 8×RTX 6000 Ada</h3>
432      <div class="eff-list">
433        <div class="eff-item"><span class="m">Qwen2.5-VL (uniform)</span><span><span class="v">8 h 13 m · 53.3</span></span></div>
434        <div class="eff-item"><span class="m">AKS</span><span><span class="v">9 h 55 m · 54.1</span><span class="g">+0.8</span></span></div>
435        <div class="eff-item"><span class="m">Q-Frame</span><span><span class="v">10 h 30 m · 58.7</span><span class="g">+5.4</span></span></div>
436        <div class="eff-item ours"><span class="m">LENS (Ours)</span><span><span class="v">11 h 50 m · 60.7</span><span class="g">+7.4</span></span></div>
437      </div>
438      <p style="font-size:.85rem;color:var(--ink-faint);margin-top:16px">LLM-agent / video-RAG pipelines (VideoRAG, Vgent) take <b>50+ hours</b> on the same benchmark — over 4× the runtime of LENS.</p>
439    </div>
440  </div>
441</section>
442
443<section id="qualitative" class="reveal">
444  <span class="kicker">
444Qualitative</span>
445  <h2>What does LENS actually look at?</h2>
446  <p class="prose">
447    LENS selects frames that are not only semantically relevant but also <b>complementary across spatial and temporal scales</b>: spatial zoom-in emphasizes discriminative cues (e.g., the event-title region), while temporal zoom-out preserves the overall context of the video.
448  </p>
449  <div class="qual-stack">
450    <div class="figure">
451      <img src="static/images/qual_football.jpg" alt="Qualitative comparison: football event recognition">
452      <div class="figcap"><b>Football event recognition (8-frame budget).</b> Uniform sampling and AKS miss the decisive textual evidence; LENS zooms in on the title region and preserves match context, correctly identifying the <em>FIFA World Cup 2022 Final</em>.</div>
453    </div>
454    <div class="figure">
455      <img src="static/images/qual_pingpong.jpg" alt="Qualitative comparison: table tennis rally understanding">
456      <div class="figcap"><b>Table-tennis rally understanding (8-frame budget).</b> Baselines attend to isolated moments and misread the play; LENS captures both localized player actions and the temporal continuity of the rally, inferring <em>a series of consecutive successful hits</em>.</div>
457    </div>
458  </div>
459</section>
460
461<section id="bibtex" class="reveal">
462  <span class="kicker">Citation</span>
463  <h2>BibTeX</h2>
464  <div class="bib-card">
465    <button class="copy-btn" id="copyBib">Copy</button>
466<pre id="bibText">@inproceedings{zhang2026lens,
467  <span class="k">title</span>     = <span class="s">{LENS: Adaptive Spatio-Temporal Zooming for Keyframe Sampling in Long-Form Videos}</span>,
468  <span class="k">author</span>    = <span class="s">{Zhang, Ce and He, Jinxi and Sycara, Katia and Xie, Yaqi}</span>,
469  <span class="k">booktitle</span> = <span class="s">{European Conference on Computer Vision (ECCV)}</span>,
470  <span class="k">year</span>      = <span class="s">{2026}</span>
471}</pre>
472  </div>
473</section>
474
475</main>
476
477<footer>
478  <div class="wrap">
479    <p class="ack">This work has been funded in part by the ARL award W911QX-24-F-0049, DARPA award FA8750-23-2-1015, ONR award N00014-23-1-2840, ONR MURI grant N00014-25-1-2116, and USDA-NIFA award 2021-67021-35329.</p>
480    <div class="foot-line">
481      <span>© 2026 · LENS · Robotics Institute, Carnegie Mellon University</span>
482      <span><a href="https://github.com/zhangce01/LENS" target="_blank" rel="noopener">GitHub</a> · <a href="#top">Back to top ↑</a></span>
483    </div>
484  </div>
485</footer>
486
487<script>
488// tabs
489const tabs=document.querySelectorAll('.tab');
490tabs.forEach(t=>t.addEventListener('click',()=>{
491  if(t.classList.contains('active'))return;
492  tabs.forEach(x=>x.classList.remove('active'));
493  t.classList.add('active');
494  ['t8','t16','t32','tbb'].forEach(id=>{
495    const el=document.getElementById(id);
496    if(id===t.dataset.t){
497      el.hidden=false;
498      el.classList.remove('tab-in');
499      void el.offsetWidth;          // restart the animation on every switch
500      el.classList.add('tab-in');
501    }else{
502      el.hidden=true;
503      el.classList.remove('tab-in');
504    }
505  });
506}));
507// reveal on scroll + bar animation
508const io=new IntersectionObserver(es=>{
509  es.forEach(e=>{
510    if(e.isIntersecting){
511      e.target.classList.add('in');
512      e.target.querySelectorAll('.bar-fill').forEach(b=>{
513        const w=parseFloat(b.dataset.w);
514        b.style.width=((w-48)/(62-48)*100).toFixed(1)+'%';   // scale 48–62 → 0–100%
515      });
516      io.unobserve(e.target);
517    }
518  });
519},{threshold:.12});
520document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
521// copy bibtex
522document.getElementById('copyBib').addEventListener('click',()=>{
523  navigator.clipboard.writeText(document.getElementById('bibText').innerText).then(()=>{
524    const b=document.getElementById('copyBib');b.textContent='Copied ✓';
525    setTimeout(()=>b.textContent='Copy',1600);
526  });
527});
528</script>
528
529</body>
530</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.