research-explained/index.html at main · terencecho/research-explained · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Explained</title>
<style>
  :root {
    --bg: #0d1117;
    --surface: #161b22;
    --border: #30363d;
    --text: #e6edf3;
    --text-muted: #8b949e;
    --accent: #58a6ff;
    --green: #3fb950;
    --yellow: #d29922;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
  }

  h1 {
    font-size: 2.2rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
  }
  .tagline {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }
  .description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 560px;
  }
  .description a { color: var(--accent); text-decoration: none; }
  .description a:hover { text-decoration: underline; }

  .divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 2rem;
  }

  .section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }

  .paper-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .paper-card {
    display: block;
    text-decoration: none;
    color: var(--text);
    padding: 1.25rem 1.25rem;
    border-radius: 10px;
    transition: background 0.15s;
    position: relative;
  }
  .paper-card:hover {
    background: var(--surface);
  }
  .paper-card + .paper-card {
    border-top: 1px solid var(--border);
  }
  .paper-card:hover + .paper-card,
  .paper-card + .paper-card:hover {
    border-top-color: transparent;
  }

  .paper-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .paper-title .arrow {
    color: var(--accent);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    transform: translateX(-4px);
  }
  .paper-card:hover .arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .paper-oneliner {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }

  .paper-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .paper-meta .tag {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
  }
  .tag-paper {
    background: rgba(88,166,255,0.1);
    color: var(--accent);
    border: 1px solid rgba(88,166,255,0.2);
  }

  .search-box {
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .search-box:focus { border-color: var(--accent); }
  .search-box::placeholder { color: var(--text-muted); }

  .empty-state {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    padding: 1rem 0;
    display: none;
  }


  footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 1.5rem;
  }
  footer a { color: var(--text-muted); text-decoration: none; }
  footer a:hover { color: var(--text); }
</style>
</head>
<body>

<h1>Research Explained</h1>
<p class="tagline">AI papers, made accessible.</p>
<p class="description">
  Interactive explainers for AI research papers. Every technical term defined, every concept grounded in real-world analogy, with motion graphics for the ideas that are hardest to picture from text alone. Built with <a href="https://claude.ai/code" target="_blank">Claude Code</a> and <a href="https://github.com/heygen-com/hyperframes" target="_blank">HyperFrames</a>.
</p>

<div class="divider"></div>

<div class="section-label">Papers</div>

<input type="text" class="search-box" id="search" placeholder="Search papers..." oninput="filterPapers()">

<div class="paper-list" id="paper-list">
  <a href="peek/" class="paper-card" data-date="2026-05">
    <div class="paper-title">
      PEEK: Picking Essential Frames via Knowledge Distillation
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      An AI captioner can only look at a few frames of a video &mdash; PEEK is a tiny, fast model that picks the most useful ones, learning what matters from a &ldquo;cheating&rdquo; expert it then throws away. Best when the budget is one or two frames, for ~5% added time instead of rivals' 65&ndash;212%.
    </div>
    <div class="paper-meta">
      <span>May 2026</span>
      <span class="tag tag-paper">T&eacute;l&eacute;com SudParis &amp; Moments Lab</span>
    </div>
  </a>
  <a href="radar/" class="paper-card" data-date="2026-06">
    <div class="paper-title">
      RADAR: Automating Low-Risk Code Review at Meta
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      AI now writes most of the new code, drowning human reviewers. RADAR is a layered funnel that auto-reviews and ships the low-risk changes &mdash; 535K+ reviewed, with a revert rate 1/13 and incident rate 1/50 that of normal changes.
    </div>
    <div class="paper-meta">
      <span>June 2026</span>
      <span class="tag tag-paper">Meta</span>
    </div>
  </a>
  <a href="gemini-embedding-2/" class="paper-card" data-date="2026-05">
    <div class="paper-title">
      Gemini Embedding 2: A Native Multimodal Embedding Model
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      One model that maps text, images, video, and audio &mdash; and any mix of them &mdash; into a single shared vector space, beating specialized models at their own games and proving native audio embedding beats transcribe-then-embed.
    </div>
    <div class="paper-meta">
      <span>May 2026</span>
      <span class="tag tag-paper">Google DeepMind</span>
    </div>
  </a>
  <a href="personalive/" class="paper-card" data-date="2025-12">
    <div class="paper-title">
      PersonaLive: Real-Time Diffusion Portrait Animation
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How to make a diffusion model animate portraits at 15&ndash;20 FPS live &mdash; by distilling 20 denoising steps into 4, and replacing batch generation with a sliding window that streams frames continuously.
    </div>
    <div class="paper-meta">
      <span>December 2025</span>
      <span class="tag tag-paper">University of Macau &amp; Dzine.ai &amp; Great Bay University</span>
    </div>
  </a>
  <a href="reasoning-bank/" class="paper-card" data-date="2025-09">
    <div class="paper-title">
      ReasoningBank: Scaling Agent Self-Evolving with Reasoning Memory
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How to make AI agents get better at their jobs the more tasks they see &mdash; by distilling reusable strategies from their own successes and failures, with no extra training.
    </div>
    <div class="paper-meta">
      <span>September 2025</span>
      <span class="tag tag-paper">Google Cloud AI Research + UIUC + Yale</span>
    </div>
  </a>
  <a href="memorization/" class="paper-card" data-date="2025-06">
    <div class="paper-title">
      How Much Do Language Models Memorize?
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      GPT-style models store ~3.6 bits per parameter. This paper measures exactly how much models memorize, explains double descent, and predicts when privacy attacks fail.
    </div>
    <div class="paper-meta">
      <span>June 2025</span>
      <span class="tag tag-paper">Meta FAIR + Google DeepMind + Cornell + NVIDIA</span>
    </div>
  </a>
  <a href="lora/" class="paper-card" data-date="2021-06">
    <div class="paper-title">
      LoRA: Low-Rank Adaptation of Large Language Models
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How to fine-tune a 175-billion-parameter model by training only 0.01% of the weights &mdash; with no inference latency penalty.
    </div>
    <div class="paper-meta">
      <span>June 2021</span>
      <span class="tag tag-paper">Microsoft</span>
    </div>
  </a>
  <a href="avatar-v/" class="paper-card" data-date="2026-04">
    <div class="paper-title">
      Avatar V: Scaling Video-Reference Avatar Generation
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How HeyGen generates talking avatar videos that preserve identity, talking style, and micro-expressions from a short reference video.
    </div>
    <div class="paper-meta">
      <span>April 2026</span>
      <span class="tag tag-paper">HeyGen Research</span>
    </div>
  </a>
  <a href="kv-compaction/" class="paper-card" data-date="2026-02">
    <div class="paper-title">
      Fast KV Compaction via Attention Matching
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How to shrink a language model's memory by up to 50x in seconds, plus Ramp Labs' Latent Briefing for efficient multi-agent context sharing.
    </div>
    <div class="paper-meta">
      <span>February 2026</span>
      <span class="tag tag-paper">MIT + Ramp Labs</span>
    </div>
  </a>
  <a href="mem0/" class="paper-card" data-date="2025-04">
    <div class="paper-title">
      Mem0: Building Production-Ready AI Agents with Scalable Long-Term Memory
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      How to give AI agents persistent memory across conversations &mdash; 91% faster and 90% cheaper than processing full context.
    </div>
    <div class="paper-meta">
      <span>April 2025</span>
      <span class="tag tag-paper">Mem0</span>
    </div>
  </a>
  <a href="transformer/" class="paper-card" data-date="2017-06">
    <div class="paper-title">
      Attention Is All You Need: The Transformer
      <span class="arrow">&rarr;</span>
    </div>
    <div class="paper-oneliner">
      The 2017 paper that threw out step-by-step recurrence and rebuilt sequence models out of pure attention &mdash; letting every word look at every other at once. It set translation records, trained far cheaper, and became the architecture behind nearly every modern AI model.
    </div>
    <div class="paper-meta">
      <span>June 2017</span>
      <span class="tag tag-paper">Google Brain &amp; Google Research</span>
    </div>
  </a>
</div>
<div class="empty-state" id="empty-state">No papers match your search.</div>

<footer>
  <a href="https://github.com/terencecho/research-explained" target="_blank">GitHub</a>
  <a href="skill/">Build your own</a>
  <span>By Terence Cho</span>
</footer>

<script>
// Sort papers by data-date (newest first) on page load
(function() {
  var list = document.getElementById('paper-list');
  var cards = Array.from(list.querySelectorAll('.paper-card'));
  cards.sort(function(a, b) {
    return (b.getAttribute('data-date') || '').localeCompare(a.getAttribute('data-date') || '');
  });
  cards.forEach(function(card) { list.appendChild(card); });
})();

function filterPapers() {
  var q = document.getElementById('search').value.toLowerCase();
  var cards = document.querySelectorAll('.paper-card');
  var visible = 0;
  cards.forEach(function(card) {
    var text = card.textContent.toLowerCase();
    var show = !q || text.indexOf(q) >= 0;
    card.style.display = show ? '' : 'none';
    if (show) visible++;
  });
  document.getElementById('empty-state').style.display = visible === 0 ? 'block' : 'none';
}
</script>

<script data-goatcounter="https://tcho.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>
</body>
</html>