add COLM 2026 spotlight and Deep Learning with Yacine decks

.gitattributes

@@ -8,6 +8,7 @@
 *.csv filter=lfs diff=lfs merge=lfs -text
 *.json filter=lfs diff=lfs merge=lfs -text
 *.pdf filter=lfs diff=lfs merge=lfs -text
+*.pptx filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 # the package and package lock should not be tracked

presentations/2026-06-18-deep-learning-with-yacine/finephrase-deep-learning-with-yacine.pptx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee26336d4d63327c4f85147f1992c8ae190e7967230dd81e465447287ada3450
+size 7545227

presentations/2026-10-colm-spotlight/build.mjs

@@ -0,0 +1,596 @@
+#!/usr/bin/env node
+/**
+ * Build the COLM 2026 spotlight talk (12 min) for the FinePhrase paper.
+ *
+ * Usage (from this directory):
+ *   npm install && node build.mjs
+ *
+ * All scores are macro averages (x100) over 12 benchmarks from the paper
+ * (paper/colm2026_conference.tex and paper/data/*.dat). Visual style follows
+ * the Deep Learning with Yacine deck: Calibri, slate/amber palette, dark title slides.
+ */
+import { readFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import pptxgen from "pptxgenjs";
+import sharp from "sharp";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const asset = (name) => resolve(here, "assets", name);
+const OUT = resolve(here, "finephrase-colm-2026-spotlight.pptx");
+
+const FONT = "Calibri";
+const C = {
+  navy: "0F172A",
+  ink: "1E293B",
+  muted: "64748B",
+  faint: "94A3B8",
+  line: "E2E8F0",
+  light: "F8FAFC",
+  cool: "F1F5F9",
+  amber: "F59E0B",
+  amberDark: "B45309",
+  amberSoft: "FFF7D6",
+  yellow: "FFD21E",
+  gray: "CBD5E1",
+  ref: "475569",
+  red: "F87171",
+  white: "FFFFFF",
+};
+const DCLM = 13.77;
+
+const pres = new pptxgen();
+pres.layout = "LAYOUT_16x9"; // 10in x 5.625in
+pres.author = "Joel Niklaus";
+pres.company = "Hugging Face";
+pres.title = "How Can We Synthesize High-Quality Pretraining Data? (COLM 2026)";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Rasterize an SVG string or buffer to a pptxgenjs data URI. */
+async function pngData(svg, { flatten = false } = {}) {
+  let img = sharp(Buffer.from(svg), { density: 300 });
+  if (flatten) img = img.flatten({ background: "#ffffff" });
+  return `image/png;base64,${(await img.png().toBuffer()).toString("base64")}`;
+}
+
+/** 1,000-cell waffle; the first `highlight` cells (column-major, so they form a block) are red. */
+function waffleSvg(highlight, { cols = 50, rows = 20, cell = 10, gap = 3 } = {}) {
+  const step = cell + gap;
+  let rects = "";
+  for (let i = 0; i < cols * rows; i++) {
+    const [col, row] = [Math.floor(i / rows), i % rows];
+    const fill = i < highlight ? C.red : C.gray;
+    rects += `<rect x="${col * step}" y="${row * step}" width="${cell}" height="${cell}" rx="2" fill="#${fill}"/>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${cols * step - gap}" height="${rows * step - gap}">${rects}</svg>`;
+}
+
+function text(slide, str, opts) {
+  slide.addText(str, { fontFace: FONT, margin: 0, color: C.ink, valign: "top", ...opts });
+}
+
+/** Amber kicker + bold title, the header used on every content slide. */
+function header(slide, kicker, title, { w = 9, h = 0.8 } = {}) {
+  text(slide, kicker, { x: 0.5, y: 0.3, w, h: 0.25, fontSize: 11, bold: true, charSpacing: 1.5, color: C.amber });
+  text(slide, title, { x: 0.5, y: 0.58, w, h, fontSize: 26, bold: true, color: C.navy });
+}
+
+function footer(slide, n, total) {
+  text(slide, "FinePhrase  ·  COLM 2026", { x: 0.5, y: 5.25, w: 5, h: 0.22, fontSize: 10, color: C.muted });
+  text(slide, `${n} / ${total}`, { x: 8.5, y: 5.25, w: 1, h: 0.22, fontSize: 10, color: C.muted, align: "right" });
+}
+
+/** Small colored square + label rows, used as manual chart legends. */
+function legend(slide, items, { x, y, size = 12 }) {
+  items.forEach(([color, label], i) => {
+    slide.addShape(pres.shapes.RECTANGLE, { x, y: y + i * 0.34 + 0.04, w: 0.18, h: 0.18, fill: { color }, line: { color } });
+    text(slide, label, { x: x + 0.3, y: y + i * 0.34, w: 2.9, h: 0.26, fontSize: size, color: C.ink, valign: "middle" });
+  });
+}
+
+const axisStyle = () => ({
+  catAxisLabelFontFace: FONT,
+  catAxisLabelFontSize: 13,
+  catAxisLabelColor: C.ink,
+  catAxisLineShow: false,
+  catGridLine: { style: "none" },
+  valGridLine: { style: "none" },
+  valAxisHidden: true,
+  dataLabelFontFace: FONT,
+  dataLabelFontSize: 13,
+  dataLabelFontBold: true,
+  dataLabelColor: C.ink,
+  dataLabelFormatCode: "0.0",
+});
+
+/** Horizontal ranking bars, one color per bar, first row on top. */
+function rankBars(slide, rows, box, { max, fontSize = 13 }) {
+  slide.addChart(
+    pres.charts.BAR,
+    [{ name: "Score", labels: rows.map((r) => r.label), values: rows.map((r) => r.value) }],
+    {
+      ...box,
+      ...axisStyle(),
+      barDir: "bar",
+      catAxisOrientation: "maxMin",
+      catAxisLabelFontSize: fontSize,
+      chartColors: rows.map((r) => r.color),
+      valAxisMinVal: 0,
+      valAxisMaxVal: max,
+      barGapWidthPct: 35,
+      showValue: true,
+      dataLabelPosition: "outEnd",
+      dataLabelFontSize: fontSize,
+      showLegend: false,
+    },
+  );
+}
+
+/** Clustered columns: gray baseline vs amber treatment. */
+function pairedColumns(slide, labels, [baseName, baseValues], [ourName, ourValues], box, extra = {}) {
+  slide.addChart(
+    pres.charts.BAR,
+    [
+      { name: baseName, labels, values: baseValues },
+      { name: ourName, labels, values: ourValues },
+    ],
+    {
+      ...box,
+      ...axisStyle(),
+      barDir: "col",
+      barGrouping: "clustered",
+      chartColors: [C.gray, C.amber],
+      barGapWidthPct: 60,
+      showValue: true,
+      dataLabelPosition: "outEnd",
+      catAxisLabelFontSize: 15,
+      valAxisMinVal: 0,
+      valAxisMaxVal: 17,
+      showLegend: true,
+      legendPos: "b",
+      legendFontFace: FONT,
+      legendFontSize: 13,
+      legendColor: C.ink,
+      ...extra,
+    },
+  );
+}
+
+const ours = (label, value) => ({ label, value, color: C.amber });
+const prior = (label, value) => ({ label, value, color: C.gray });
+const dclm = { label: "DCLM (web)", value: DCLM, color: C.ref };
+
+// ---------------------------------------------------------------------------
+// Slides. Each function draws one slide; the loop at the bottom adds footers.
+// ---------------------------------------------------------------------------
+
+function titleSlide(s) {
+  s.background = { color: C.navy };
+  text(s, "FINEPHRASE", { x: 0.5, y: 1.2, w: 4.4, h: 0.3, fontSize: 14, bold: true, charSpacing: 2, color: C.yellow });
+  text(s, "How Can We Synthesize High-Quality Pretraining Data?", { x: 0.5, y: 1.55, w: 4.4, h: 1.8, fontSize: 30, bold: true, color: C.white });
+  text(s, "Joel Niklaus  ·  Hugging Face", { x: 0.5, y: 3.45, w: 4.4, h: 0.32, fontSize: 15, color: C.white });
+  text(s, "COLM 2026  ·  San Francisco", { x: 0.5, y: 3.8, w: 4.4, h: 0.3, fontSize: 12, color: C.yellow });
+  s.addImage({ path: asset("bookshelf.png"), x: 5.05, y: 1.3, w: 4.45, h: 2.23 });
+  text(
+    s,
+    [
+      { text: "With Atsuki Yamaguchi, Michal Štefánik, Guilherme Penedo, Hynek Kydlíček, Elie Bakouch, Lewis Tunstall, Edward Beeching, Thibaud Frere, Colin Raffel, Leandro von Werra, Thomas Wolf", options: { breakLine: true } },
+      { text: "Hugging Face  ·  University of Sheffield  ·  National Institute of Informatics, Japan" },
+    ],
+    { x: 0.5, y: 4.6, w: 9, h: 0.5, fontSize: 8, color: C.faint, paraSpaceAfter: 2 },
+  );
+  s.addNotes(
+    "~20s. Hi, I'm Joel from Hugging Face. This is joint work with colleagues from Hugging Face, the University of Sheffield and NII. " +
+      "The question is simple: how do you synthesize high-quality pretraining data? We answer it with a controlled study over prompts, generator models and data, " +
+      "and turn the findings into FinePhrase, a 486B-token open dataset.",
+  );
+}
+
+function scaleOfSyntheticData(s) {
+  text(s, "2T", { x: 0.5, y: 0.7, w: 9, h: 2.5, fontSize: 160, bold: true, color: C.navy, align: "center", valign: "middle" });
+  text(s, "tokens of web text rephrased for Nemotron-CC", { x: 0.5, y: 3.3, w: 9, h: 0.5, fontSize: 22, bold: true, color: C.navy, align: "center" });
+  text(s, "Phi-4  ·  Qwen3  ·  Nemotron 3  ·  Arcee Trinity all pretrain on synthetic data", { x: 0.5, y: 3.85, w: 9, h: 0.4, fontSize: 14, color: C.muted, align: "center" });
+  s.addNotes(
+    "~25s. Synthetic data is now a standard pretraining ingredient. NVIDIA rephrased two trillion tokens of web text for Nemotron-CC, " +
+      "and recent models like Phi-4, Qwen3, Nemotron 3 and Arcee Trinity pretrain on hundreds of billions of synthetic tokens.",
+  );
+}
+
+function theGap(s) {
+  header(s, "THE GAP", "Every recipe was tested against its own baseline");
+  const cards = [
+    ["WRAP", "style rewrites"],
+    ["Nemotron-CC", "QA pairs & knowledge lists"],
+    ["BeyondWeb", "continue & summarize"],
+    ["REWIRE", "guided rewrites"],
+  ];
+  cards.forEach(([name, approach], i) => {
+    const x = 0.5 + i * 2.333;
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y: 1.55, w: 2.0, h: 2.45, fill: { color: C.light }, line: { color: C.line }, rectRadius: 0.08 });
+    text(s, name, { x: x + 0.2, y: 1.72, w: 1.6, h: 0.4, fontSize: 18, bold: true, color: C.navy });
+    text(s, approach, { x: x + 0.2, y: 2.12, w: 1.6, h: 0.3, fontSize: 12, color: C.muted });
+    // Mini "method beats its own baseline" bars: every paper reports a win, none against the same reference.
+    s.addShape(pres.shapes.RECTANGLE, { x: x + 0.45, y: 3.05, w: 0.4, h: 0.6, fill: { color: C.gray }, line: { color: C.gray } });
+    s.addShape(pres.shapes.RECTANGLE, { x: x + 1.15, y: 2.65, w: 0.4, h: 1.0, fill: { color: C.amber }, line: { color: C.amber } });
+    text(s, "own baseline", { x: x + 0.15, y: 3.7, w: 1.0, h: 0.22, fontSize: 9, color: C.muted, align: "center" });
+    text(s, "method", { x: x + 0.85, y: 3.7, w: 1.0, h: 0.22, fontSize: 9, color: C.muted, align: "center" });
+  });
+  text(s, "Which prompt?  Which generator?  Which data?", { x: 0.5, y: 4.35, w: 9, h: 0.45, fontSize: 20, bold: true, italic: true, color: C.amber, align: "center" });
+  s.addNotes(
+    "~35s. But the design space is huge and every method was evaluated in isolation. WRAP does style rewrites, Nemotron-CC extracts QA pairs and knowledge lists, " +
+      "BeyondWeb continues and summarizes, REWIRE does guided rewrites of low-quality pages. Each paper reports a gain against its own baseline, with its own generator and its own data. " +
+      "So if you want to build synthetic data today, you don't know which prompt, which generator, or which data to use.",
+  );
+}
+
+function studyDesign(s) {
+  header(s, "OUR STUDY", "One controlled setup, three axes");
+  s.addImage({ path: asset("overview.jpg"), x: 1.5, y: 1.3, w: 7.0, h: 3.42 });
+  text(s, "Rephrase ~10.5B tokens  ·  pretrain a 1.2B model on 21B tokens  ·  evaluate on 12 benchmarks", {
+    x: 0.5, y: 4.82, w: 9, h: 0.3, fontSize: 13, color: C.muted, align: "center",
+  });
+  s.addNotes(
+    "~45s. We fix one pipeline and change one component at a time. Three axes: the rephrasing prompt P, the generator model G, and the data, " +
+      "meaning the source we rephrase and the original web data we mix in. Each configuration rephrases about 10.5B tokens, we pretrain a 1.2B model from scratch on 21B tokens, " +
+      "and evaluate on 12 benchmarks with 3-shot cloze prompts. I'll report the macro average. The reference throughout is DCLM, the best curated web dataset we tested, at 13.8.",
+  );
+}
+
+function studyScale(s) {
+  const stats = [
+    ["90", "rephrasing configurations"],
+    ["333", "train-and-evaluate runs"],
+    ["1T+", "synthetic tokens generated"],
+    ["12.7", "GPU-years of generation"],
+  ];
+  stats.forEach(([n, label], i) => {
+    const x = 0.5 + i * 2.25;
+    text(s, n, { x, y: 1.55, w: 2.25, h: 1.3, fontSize: 66, bold: true, color: C.navy, align: "center", valign: "bottom" });
+    text(s, label, { x: x + 0.15, y: 3.0, w: 1.95, h: 0.7, fontSize: 15, color: C.muted, align: "center" });
+  });
+  s.addNotes("~20s. To get robust answers we ran this at scale: 90 rephrasing configurations, 333 train-and-evaluate runs, over one trillion synthetic tokens, 12.7 GPU-years of generation.");
+}
+
+function formats(s) {
+  header(s, "AXIS 1  ·  PROMPT", "One web page, four pedagogical formats", { w: 3.7, h: 1.3 });
+  const chips = [
+    ["FAQ", "4EA8DE", "questions from basic to advanced"],
+    ["MATH", "A5A0F0", "word problem + worked solution"],
+    ["TABLE", "B07CC6", "structured table + Q&A pair"],
+    ["TUTORIAL", "E08DB8", "numbered step-by-step guide"],
+  ];
+  chips.forEach(([name, color, desc], i) => {
+    const y = 2.1 + i * 0.62;
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.5, y, w: 1.15, h: 0.4, fill: { color }, line: { color }, rectRadius: 0.08 });
+    text(s, name, { x: 0.5, y, w: 1.15, h: 0.4, fontSize: 12, bold: true, color: C.white, align: "center", valign: "middle", charSpacing: 1 });
+    text(s, desc, { x: 1.8, y, w: 2.4, h: 0.4, fontSize: 12, color: C.muted, valign: "middle" });
+  });
+  s.addImage({ path: asset("dataset-viewer.png"), x: 4.55, y: 0.35, w: 4.95, h: 4.365 });
+  s.addNotes(
+    "~40s. Axis one: the prompt. Besides eight prompts from prior work, we designed four pedagogical formats that restructure the page instead of paraphrasing it. " +
+      "Here is one FineWeb-Edu page about grape species, rewritten as a FAQ, a math word problem, a table with a question-answer pair, and a step-by-step tutorial.",
+  );
+}
+
+function promptResults(s) {
+  header(s, "AXIS 1  ·  PROMPT", "Structured formats beat paraphrasing", { w: 3.2, h: 1.3 });
+  legend(s, [[C.amber, "Our pedagogical formats"], [C.ref, "DCLM (curated web)"], [C.gray, "Prompts from prior work"]], { x: 0.5, y: 2.2 });
+  text(s, "Gemma 3 1B generator · macro score over 12 benchmarks", { x: 0.5, y: 3.45, w: 3.0, h: 0.5, fontSize: 11, color: C.muted });
+  rankBars(
+    s,
+    [
+      ours("Math", 15.31),
+      ours("Table", 14.83),
+      prior("Diverse QA Pairs", 14.58),
+      ours("FAQ", 14.45),
+      ours("Tutorial", 14.3),
+      dclm,
+      prior("Continue", 13.73),
+      prior("Guided Rewrite", 13.72),
+      prior("Distill", 13.17),
+      prior("Wikipedia", 13.14),
+      prior("Knowledge List", 13.11),
+      prior("Summarize", 13.01),
+      prior("Extract Knowledge", 11.81),
+    ],
+    { x: 3.75, y: 0.3, w: 5.9, h: 4.85 },
+    { max: 17.5, fontSize: 12 },
+  );
+  s.addNotes(
+    "~50s. All four structured formats beat DCLM, and Math and Table beat every prompt from prior work. Math is +1.5 over DCLM. " +
+      "The only prior prompt that competes is Diverse QA Pairs from Nemotron-CC, which is also a structured question-answer format. " +
+      "Plain restatements like Distill, Wikipedia-style or Summarize land below DCLM. Restructure, don't paraphrase.",
+  );
+}
+
+function generatorSize(s) {
+  header(s, "AXIS 2  ·  GENERATOR SIZE", "Past 1B, bigger generators don't help");
+  const labels = ["270M", "1B", "4B", "12B", "27B"];
+  s.addChart(
+    [
+      {
+        type: pres.charts.LINE,
+        data: [{ name: "Gemma 3 generator (Math prompt)", labels, values: [13.8, 15.31, 15.06, 14.68, 14.76] }],
+        options: { chartColors: [C.amber], lineSize: 3, lineDataSymbol: "circle", lineDataSymbolSize: 11, showValue: true, dataLabelPosition: "t" },
+      },
+      {
+        type: pres.charts.LINE,
+        data: [{ name: "DCLM (curated web)", labels, values: labels.map(() => DCLM) }],
+        // Two entries: pptxgenjs picks marker colors by overall series index and falls back to a random color.
+        options: { chartColors: [C.ref, C.ref], lineSize: 2, lineDash: "dash", lineDataSymbol: "none", showValue: false },
+      },
+    ],
+    {
+      x: 0.8, y: 1.35, w: 8.4, h: 3.8,
+      ...axisStyle(),
+      catAxisLabelFontSize: 16,
+      catAxisLineShow: true,
+      catAxisLineColor: C.line,
+      dataLabelFontSize: 15,
+      valAxisMinVal: 12.5,
+      valAxisMaxVal: 16,
+      showLegend: true,
+      legendPos: "b",
+      legendFontFace: FONT,
+      legendFontSize: 13,
+      legendColor: C.ink,
+    },
+  );
+  s.addNotes(
+    "~45s. Axis two: the generator. We rephrase with Gemma 3 from 270M to 27B using the Math prompt. 270M is too small and barely matches DCLM. " +
+      "From 1B up the curve is flat: 1B is the best at 15.3, 27B lands at 14.8. The one exception we found is REWIRE's complex guided rewrite prompt, where 4B helps. " +
+      "Meanwhile 12B and 27B cost 5 to 10 times more GPU time.",
+  );
+}
+
+function generatorFamily(s) {
+  header(s, "AXIS 2  ·  GENERATOR FAMILY", "SmolLM2 is the best rephraser", { w: 3.2, h: 1.3 });
+  text(s, "~1B instruct models · averaged over the four formats", { x: 0.5, y: 2.1, w: 3.0, h: 0.5, fontSize: 11, color: C.muted });
+  rankBars(
+    s,
+    [
+      ours("SmolLM2 1.7B", 16.55),
+      prior("Falcon 3 1B", 15.54),
+      prior("Granite 3.1 1B", 14.87),
+      prior("Llama 3.2 1B", 14.79),
+      prior("Gemma 3 1B", 14.72),
+      prior("Qwen3 1.7B", 14.49),
+      dclm,
+    ],
+    { x: 3.75, y: 0.5, w: 5.9, h: 4.5 },
+    { max: 18.5, fontSize: 14 },
+  );
+  s.addNotes(
+    "~35s. The family matters more than the size. At around 1B, averaged over the four formats, SmolLM2 1.7B beats every other family by 1 to 2 points. " +
+      "Most of that comes from reading comprehension, over 5 points on SQuAD. Our guess is SmolLM2's instruction data, which contains explicit rewrite tasks.",
+  );
+}
+
+async function diversity(s) {
+  header(s, "WHY SMOLLM2?", "Diversity beats polish");
+  const cols = { name: 0.5, fmt: 2.75, waffle: 4.1, score: 7.9 };
+  const head = { y: 1.38, h: 0.3, fontSize: 11, color: C.muted, align: "center" };
+  text(s, "follows format", { ...head, x: cols.fmt, w: 1.25 });
+  text(s, "1,000 math outputs  ·  red = most common opening", { ...head, x: cols.waffle, w: 3.6 });
+  text(s, "macro score", { ...head, x: cols.score, w: 1.6 });
+  const rows = [
+    ["Qwen3 1.7B", "115 identical openings", "100%", 115, "14.4", C.ink],
+    ["SmolLM2 1.7B", "at most 3 identical openings", "68%", 3, "17.0", C.amber],
+  ];
+  for (const [i, [name, sub, fmt, same, score, scoreColor]] of rows.entries()) {
+    const y = 1.78 + i * 1.7;
+    text(s, name, { x: cols.name, y: y + 0.4, w: 2.2, h: 0.4, fontSize: 18, bold: true, color: C.navy });
+    text(s, sub, { x: cols.name, y: y + 0.8, w: 2.2, h: 0.3, fontSize: 12, color: same > 10 ? C.red : C.muted });
+    text(s, fmt, { x: cols.fmt, y, w: 1.25, h: 1.43, fontSize: 30, bold: true, color: C.navy, align: "center", valign: "middle" });
+    s.addImage({ data: await pngData(waffleSvg(same)), x: cols.waffle, y, w: 3.6, h: 1.43 });
+    text(s, score, { x: cols.score, y, w: 1.6, h: 1.43, fontSize: 40, bold: true, color: scoreColor, align: "center", valign: "middle" });
+  }
+  s.addNotes(
+    "~50s. Why does SmolLM2 win? We compared 1,000 Math outputs from SmolLM2 and Qwen3. Qwen3 is the perfect student: 100% of its outputs have a clean problem and solution section. " +
+      "SmolLM2 completes only 68%. But Qwen3 collapses into a template: 115 of the 1,000 outputs start with identical text, while SmolLM2's most common opening appears 3 times. " +
+      "Downstream, SmolLM2's messier data wins, 17.0 versus 14.4. For pretraining, output diversity matters more than format polish.",
+  );
+}
+
+function tradeOff(s) {
+  header(s, "THE TRADE-OFF", "Synthetic adds knowledge, web keeps commonsense");
+  const panels = [
+    { x: 0.5, w: 5.3, fill: C.amberSoft, title: "Knowledge & reading", titleColor: C.amberDark, stats: [["+18.7", "SQuAD v2"], ["+7.5", "TriviaQA"], ["+6.8", "ARC"]] },
+    { x: 6.05, w: 3.45, fill: C.cool, title: "Commonsense", titleColor: C.ref, stats: [["−1.6", "HellaSwag"], ["−1.1", "PIQA"]] },
+  ];
+  for (const p of panels) {
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: p.x, y: 1.5, w: p.w, h: 3.1, fill: { color: p.fill }, line: { color: p.fill }, rectRadius: 0.1 });
+    text(s, p.title, { x: p.x + 0.3, y: 1.72, w: p.w - 0.6, h: 0.35, fontSize: 16, bold: true, color: p.titleColor });
+    const colW = (p.w - 0.6) / p.stats.length;
+    p.stats.forEach(([n, label], i) => {
+      const x = p.x + 0.3 + i * colW;
+      text(s, n, { x, y: 2.45, w: colW, h: 0.9, fontSize: 40, bold: true, color: C.navy, align: "center", valign: "middle" });
+      text(s, label, { x, y: 3.45, w: colW, h: 0.35, fontSize: 15, color: C.ink, align: "center" });
+    });
+  }
+  text(s, "Table format (SmolLM2 1.7B) minus DCLM, in benchmark points", { x: 0.5, y: 4.78, w: 9, h: 0.3, fontSize: 11, color: C.muted, align: "center" });
+  s.addNotes(
+    "~40s. Axis three is the data, and first a nuance: rephrased data is not better everywhere. Against DCLM, the Table format adds 18.7 points on SQuAD and around 7 on TriviaQA and ARC, " +
+      "but it loses on HellaSwag and PIQA, the commonsense tasks. Web text is full of everyday situations that restructuring strips out.",
+  );
+}
+
+function alwaysMix(s) {
+  header(s, "AXIS 3  ·  MIX-IN DATA", "Always mix in original web data");
+  pairedColumns(
+    s,
+    ["Math", "Table", "FAQ", "Tutorial"],
+    ["Synthetic only", [15.2, 13.74, 13.12, 12.32]],
+    ["50% synthetic + 50% web", [15.31, 14.83, 14.45, 14.3]],
+    { x: 0.8, y: 1.35, w: 8.4, h: 3.8 },
+  );
+  s.addNotes(
+    "~35s. So always mix. For every format, training on synthetic data alone loses to a 50/50 mix with original web text. Tutorial drops 2 points to 12.3, below DCLM at 13.8. " +
+      "The web half restores the commonsense and language understanding skills we just saw.",
+  );
+}
+
+function mixInOverSource(s) {
+  header(s, "AXIS 3  ·  SOURCE DATA", "A strong mix-in rescues weak sources");
+  pairedColumns(
+    s,
+    ["FineWeb-LQ", "Cosmopedia", "DCLM", "FineWeb-HQ"],
+    ["Mixed with the source itself", [9.63, 10.36, 13.69, 14.3]],
+    ["Mixed with FineWeb-HQ", [12.99, 13.88, 14.77, 14.3]],
+    { x: 0.8, y: 1.35, w: 8.4, h: 3.8 },
+    { showCatAxisTitle: true, catAxisTitle: "Source data that gets rephrased (Tutorial prompt)", catAxisTitleFontSize: 12, catAxisTitleColor: C.muted, catAxisTitleFontFace: FONT },
+  );
+  s.addNotes(
+    "~40s. Which data you mix in matters more than which data you rephrase. If the mix-in is the source itself, low-quality FineWeb only reaches 9.6. " +
+      "Rephrase the same low-quality source but mix in high-quality FineWeb, and you get 13.0. The spread across sources shrinks from 4.7 to 1.8 points. " +
+      "So you can up-cycle low-quality web text, which enlarges the pool of usable source data.",
+  );
+}
+
+function finephraseRecipe(s) {
+  s.background = { color: C.navy };
+  text(s, "PUTTING IT TOGETHER", { x: 0.5, y: 0.85, w: 9, h: 0.3, fontSize: 14, bold: true, charSpacing: 2, color: C.yellow });
+  text(s, "FinePhrase", { x: 0.5, y: 1.15, w: 9, h: 0.95, fontSize: 54, bold: true, color: C.white });
+  text(s, "486B tokens  ·  1.35B samples  ·  open", { x: 0.5, y: 2.1, w: 9, h: 0.45, fontSize: 20, color: C.yellow });
+  const tiles = [
+    ["GENERATOR", "SmolLM2 1.7B"],
+    ["FORMATS", "Table · Math · FAQ · Tutorial"],
+    ["SOURCE", "FineWeb-Edu"],
+    ["MIX-IN", "FineWeb-HQ"],
+  ];
+  tiles.forEach(([label, value], i) => {
+    const x = 0.5 + i * 2.3;
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y: 3.0, w: 2.1, h: 1.45, fill: { color: C.ink }, line: { color: C.ink }, rectRadius: 0.08 });
+    text(s, label, { x: x + 0.2, y: 3.2, w: 1.7, h: 0.25, fontSize: 10, bold: true, charSpacing: 1.5, color: C.yellow });
+    text(s, value, { x: x + 0.2, y: 3.5, w: 1.7, h: 0.8, fontSize: 17, bold: true, color: C.white });
+  });
+  s.addNotes(
+    "~35s. Putting it together gives FinePhrase: SmolLM2 1.7B as the generator, the four pedagogical formats, FineWeb-Edu as the source, and FineWeb-HQ as the mix-in for training. " +
+      "That's 1.35 billion samples and 486 billion tokens, all open.",
+  );
+}
+
+function finephraseResults(s) {
+  header(s, "HEADLINE RESULT", "FinePhrase beats every synthetic baseline", { w: 3.2, h: 1.3 });
+  text(s, "+3.6", { x: 0.5, y: 2.15, w: 3.1, h: 1.0, fontSize: 60, bold: true, color: C.amber, valign: "middle" });
+  text(s, "points over the best synthetic baseline, Nemotron-HQ-Synth", { x: 0.5, y: 3.2, w: 3.0, h: 0.6, fontSize: 13, color: C.muted });
+  rankBars(
+    s,
+    [
+      ours("FinePhrase Table", 17.18),
+      ours("FinePhrase Math", 16.97),
+      ours("FinePhrase FAQ", 16.18),
+      ours("FinePhrase Tutorial", 15.88),
+      dclm,
+      prior("Nemotron-HQ-Synth", 13.54),
+      prior("REWIRE", 13.49),
+      prior("Cosmopedia", 10.33),
+      prior("SYNTH", 10.03),
+    ],
+    { x: 3.75, y: 0.4, w: 5.9, h: 4.7 },
+    { max: 19.5, fontSize: 13 },
+  );
+  s.addNotes(
+    "~45s. All four FinePhrase subsets beat every synthetic baseline. The Table subset reaches 17.2, that's +3.6 over Nemotron-HQ-Synth and +3.4 over DCLM. " +
+      "REWIRE, Cosmopedia and SYNTH are further behind. The per-benchmark profile is the one from before: FinePhrase dominates knowledge and reading comprehension, " +
+      "DCLM keeps a small edge on PIQA and HellaSwag, so FinePhrase is meant to be mixed with web data.",
+  );
+}
+
+function cost(s) {
+  header(s, "COST", "A 1.7B generator makes it cheap", { w: 3.2, h: 1.3 });
+  text(s, "30×", { x: 0.5, y: 2.15, w: 3.1, h: 1.1, fontSize: 72, bold: true, color: C.amber, valign: "middle" });
+  text(s, "more tokens per GPU-hour than REWIRE", { x: 0.5, y: 3.3, w: 3.0, h: 0.6, fontSize: 13, color: C.muted });
+  text(s, "Million tokens per H100 GPU-hour", { x: 3.85, y: 0.9, w: 5.6, h: 0.3, fontSize: 12, color: C.muted });
+  rankBars(
+    s,
+    [
+      ours("FinePhrase (SmolLM2 1.7B)", 33.1),
+      prior("SYNTH (fine-tuned)", 20),
+      prior("Cosmopedia (Mixtral 8x7B)", 2.5),
+      prior("REWIRE (Llama 3.3 70B)", 1.1),
+    ],
+    { x: 3.75, y: 1.2, w: 5.9, h: 3.4 },
+    { max: 38, fontSize: 14 },
+  );
+  s.addNotes(
+    "~30s. And it's cheap. With a 1.7B generator and speculative decoding we get about 9,200 tokens per second per H100. The full dataset took about 14,700 GPU-hours on 100 GPUs. " +
+      "That's 30 times more tokens per GPU-hour than REWIRE with Llama 3.3 70B and about 13 times more than Cosmopedia. SYNTH is also cheap, but its data trains much worse.",
+  );
+}
+
+function takeaways(s) {
+  header(s, "TAKEAWAYS", "What matters for synthetic pretraining data");
+  const items = [
+    ["The prompt matters most", "Structured formats beat paraphrasing"],
+    ["1B generators are enough", "Bigger models cost more and help little"],
+    ["Diversity beats polish", "Template collapse hurts pretraining"],
+    ["Always mix in web data", "The mix-in matters more than the source"],
+  ];
+  items.forEach(([head, sub], i) => {
+    const x = 0.5 + (i % 2) * 4.6;
+    const y = 1.5 + Math.floor(i / 2) * 1.72;
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y, w: 4.4, h: 1.52, fill: { color: C.light }, line: { color: C.line }, rectRadius: 0.08 });
+    s.addShape(pres.shapes.OVAL, { x: x + 0.3, y: y + 0.3, w: 0.52, h: 0.52, fill: { color: C.amber }, line: { color: C.amber } });
+    text(s, String(i + 1), { x: x + 0.3, y: y + 0.3, w: 0.52, h: 0.52, fontSize: 18, bold: true, color: C.navy, align: "center", valign: "middle" });
+    text(s, head, { x: x + 1.05, y: y + 0.3, w: 3.15, h: 0.45, fontSize: 18, bold: true, color: C.navy });
+    text(s, sub, { x: x + 1.05, y: y + 0.8, w: 3.15, h: 0.4, fontSize: 13, color: C.muted });
+  });
+  s.addNotes("~30s. Four takeaways. The prompt matters most. 1B generators are enough. Diversity beats polish. And always mix with strong web data, because the mix-in matters more than the source.");
+}
+
+async function thankYou(s) {
+  s.background = { color: C.navy };
+  text(s, "Thank you.", { x: 0.5, y: 0.8, w: 9, h: 1.0, fontSize: 54, bold: true, color: C.white });
+  text(s, "Questions?", { x: 0.5, y: 1.8, w: 9, h: 0.5, fontSize: 22, color: C.yellow });
+  text(s, "Come to our poster", { x: 0.5, y: 3.0, w: 4.3, h: 0.3, fontSize: 13, color: C.faint });
+  text(s, "F-4-126  ·  Franciscan  ·  Wednesday afternoon", { x: 0.5, y: 3.3, w: 4.5, h: 0.4, fontSize: 16, bold: true, color: C.yellow });
+  text(s, "joel@niklaus.ai", { x: 0.5, y: 4.15, w: 4.3, h: 0.3, fontSize: 13, color: C.white });
+  const qrs = [
+    ["qr-paper.svg", "Paper", "arXiv 2604.13977"],
+    ["qr-dataset.svg", "Dataset", "HuggingFaceFW/finephrase"],
+    ["qr-code.svg", "Prompts + code", "huggingface/finephrase"],
+  ];
+  for (const [i, [file, label, sub]] of qrs.entries()) {
+    const x = 5.35 + i * 1.45;
+    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y: 2.6, w: 1.25, h: 1.25, fill: { color: C.white }, line: { color: C.white }, rectRadius: 0.08 });
+    s.addImage({ data: await pngData(await readFile(asset(file)), { flatten: true }), x: x + 0.08, y: 2.68, w: 1.09, h: 1.09 });
+    text(s, label, { x: x - 0.1, y: 3.95, w: 1.45, h: 0.28, fontSize: 12, bold: true, color: C.white, align: "center" });
+    text(s, sub, { x: x - 0.1, y: 4.23, w: 1.45, h: 0.25, fontSize: 8, color: C.faint, align: "center" });
+  }
+  s.addNotes("~20s. The dataset, all prompts and the generation code are open, the QR codes link to them. Come by the poster on Wednesday afternoon. Thank you!");
+}
+
+// [draw function, has footer]
+const slides = [
+  [titleSlide, false],
+  [scaleOfSyntheticData, true],
+  [theGap, true],
+  [studyDesign, true],
+  [studyScale, true],
+  [formats, true],
+  [promptResults, true],
+  [generatorSize, true],
+  [generatorFamily, true],
+  [diversity, true],
+  [tradeOff, true],
+  [alwaysMix, true],
+  [mixInOverSource, true],
+  [finephraseRecipe, true],
+  [finephraseResults, true],
+  [cost, true],
+  [takeaways, true],
+  [thankYou, false],
+];
+
+for (const [i, [draw, withFooter]] of slides.entries()) {
+  const slide = pres.addSlide();
+  await draw(slide);
+  if (withFooter) footer(slide, i + 1, slides.length);
+}
+
+await pres.writeFile({ fileName: OUT });
+console.log(`Wrote ${OUT}`);

presentations/2026-10-colm-spotlight/finephrase-colm-2026-spotlight.pptx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1d3881acbe863a91db19d4be3bc38ecfd3b0e1890f5c2ce0d76eae16aebb493
+size 3736681

presentations/README.md

@@ -0,0 +1,28 @@
+# Presentations
+
+Talks about FinePhrase, one folder per talk (`YYYY-MM[-DD]-<venue>`). The COLM 2026 poster lives in `../poster/`.
+
+| Folder                                 | Talk                                       | Length  | Slides |
+| -------------------------------------- | ------------------------------------------ | ------- | ------ |
+| `2026-02-26-se2026-industry-day`       | SE 2026 Industry Day, Bern (reveal.js)     | 30 min  | 21     |
+| `2026-06-18-deep-learning-with-yacine` | Deep Learning with Yacine (full deep dive) | ~50 min | 80     |
+| `2026-10-colm-spotlight`               | COLM 2026 spotlight oral, San Francisco    | 12 min  | 18     |
+
+## SE 2026 Industry Day
+
+`index.html` is a [reveal.js](https://revealjs.com/) deck whose D3 charts (`charts/`) load `data/` at runtime, so serve the folder over HTTP to present it (`python3 -m http.server`). `build-standalone.mjs` inlines the CSS, images, charts and data into `standalone.html`, a single file you can open straight from disk (reveal.js and D3 still come from a CDN):
+
+```bash
+cd presentations/2026-02-26-se2026-industry-day
+node build-standalone.mjs
+```
+
+## COLM 2026 spotlight
+
+`build.mjs` generates `finephrase-colm-2026-spotlight.pptx` with [pptxgenjs](https://gitbrent.github.io/PptxGenJS/). All charts are native PowerPoint charts with scores from the paper (`paper/colm2026_conference.tex`, `paper/data/*.dat`), and every slide has speaker notes with a target duration (about 10:40 in total). `assets/` holds the paper overview figure, the bookshelf and dataset-viewer images from the Yacine deck, and the QR codes from the poster.
+
+```bash
+cd presentations/2026-10-colm-spotlight
+npm install
+node build.mjs
+```