added finephrase section and moved progress monitoring section there from infra

app/scripts/extract_finephrase_samples.py

@@ -0,0 +1,110 @@
+#!/usr/bin/env python3
+"""Extract aligned sample rows from the FinePhrase dataset for the blog data explorer widget.
+
+Streams through HuggingFaceFW/finephrase and collects aligned samples where the
+same source document has outputs for all four prompt configs (faq, math, table, tutorial).
+Stops once 1000 aligned samples are found.
+
+Usage:
+    python app/scripts/extract_finephrase_samples.py
+"""
+
+import json
+import logging
+from pathlib import Path
+
+from datasets import load_dataset
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.INFO, format="%(levelname)s: %(message)s")
+
+REPO_ID = "HuggingFaceFW/finephrase"
+PROMPTS = ["faq", "math", "table", "tutorial"]
+TARGET_SAMPLES = 1000
+OUTPUT_PATH = Path(__file__).parent.parent / "public" / "data" / "finephrase-samples.jsonl"
+
+
+def extract_samples() -> list[dict]:
+    """Stream all prompts and collect aligned samples until we reach TARGET_SAMPLES."""
+    # Accumulate rows by document id for each prompt
+    prompt_data: dict[str, dict[str, dict]] = {p: {} for p in PROMPTS}
+    # Track which doc ids are complete (present in all 4 prompts)
+    complete_ids: list[str] = []
+    complete_set: set[str] = set()
+
+    # Stream all prompts in parallel via iterators
+    iterators = {}
+    for prompt in PROMPTS:
+        logger.info(f"Opening stream for {prompt}...")
+        ds = load_dataset(REPO_ID, name=prompt, split="train", streaming=True)
+        iterators[prompt] = iter(ds)
+
+    batch_size = 500
+    while len(complete_ids) < TARGET_SAMPLES:
+        # Fetch a batch from each prompt
+        any_progress = False
+        for prompt in PROMPTS:
+            it = iterators[prompt]
+            fetched = 0
+            for _ in range(batch_size):
+                try:
+                    row = next(it)
+                except StopIteration:
+                    break
+                fetched += 1
+                doc_id = row["id"]
+                prompt_data[prompt][doc_id] = row
+
+                # Check if this doc_id is now complete across all prompts
+                if doc_id not in complete_set and all(
+                    doc_id in prompt_data[p] for p in PROMPTS
+                ):
+                    complete_set.add(doc_id)
+                    complete_ids.append(doc_id)
+                    if len(complete_ids) >= TARGET_SAMPLES:
+                        break
+            if fetched > 0:
+                any_progress = True
+            logger.info(
+                f"  {prompt}: {len(prompt_data[prompt])} rows loaded, "
+                f"{len(complete_ids)} aligned so far"
+            )
+            if len(complete_ids) >= TARGET_SAMPLES:
+                break
+
+        if not any_progress:
+            logger.warning("All streams exhausted before reaching target")
+            break
+
+    logger.info(f"Found {len(complete_ids)} aligned documents")
+
+    samples: list[dict] = []
+    for doc_id in complete_ids[:TARGET_SAMPLES]:
+        ref_row = prompt_data[PROMPTS[0]][doc_id]
+
+        entry: dict = {
+            "id": doc_id,
+            "url": ref_row.get("url", ""),
+            "file_path": ref_row.get("file_path", ""),
+            "source": str(ref_row.get("text", "")),
+        }
+        for prompt in PROMPTS:
+            rollout = prompt_data[prompt][doc_id].get("rollout_results", [])
+            entry[prompt] = str(rollout[0]["text"]) if rollout else ""
+        samples.append(entry)
+
+    logger.info(f"Built {len(samples)} samples")
+    return samples
+
+
+def main() -> None:
+    samples = extract_samples()
+    OUTPUT_PATH.parent.mkdir(parents=True, exist_ok=True)
+    with open(OUTPUT_PATH, "w") as f:
+        for sample in samples:
+            f.write(json.dumps(sample, ensure_ascii=False) + "\n")
+    logger.info(f"Saved {len(samples)} samples to {OUTPUT_PATH}")
+
+
+if __name__ == "__main__":
+    main()

app/src/content/assets/data/finephrase-samples.jsonl

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

app/src/content/chapters/5-infrastructure.mdx

@@ -1,10 +1,8 @@
-import Image from "../../components/Image.astro";
 import HtmlEmbed from "../../components/HtmlEmbed.astro";
 import Sidenote from "../../components/Sidenote.astro";
 import FigRef from "../../components/FigRef.astro";
 import Accordion from "../../components/Accordion.astro";
 import Wide from "../../components/Wide.astro";
-import datasetCardImg from "../assets/image/auto-dataset-card.png";
 
 ## Infrastructure
 
@@ -189,39 +187,6 @@ Need multiple samples per document? Set `rollouts_per_document` in your `Inferen
 
  **Use case: Best-of-N sampling for code generation.** When generating code solutions, you want multiple attempts per problem to increase the chance of a correct answer. Set `rollouts_per_document=10` and later filter for solutions that pass your test suite.
 
-### Automatic HF Upload and Progress Monitoring
-
-We want you to be able to just press a button, let the GPUs go brrrr, and check back in to the finished dataset. DataTrove continuously uploads data to your specified Hugging Face dataset repo whenever a chunk is finished. At the end, the `InferenceDatasetCardGenerator` pipeline step checks the logs directory, collects information about the throughput, and uploads a dataset card to document your new synthetic dataset. <FigRef target="auto-dataset-card" /> shows an example of the auto-generated dataset card.
-
-<figure id="auto-dataset-card">
-<Image src={datasetCardImg} alt="Auto-generated dataset card on the Hugging Face Hub" />
-<figcaption>Example of an auto-generated dataset card with throughput metrics, uploaded to the Hugging Face Hub after inference completes.</figcaption>
-</figure>
-
-For long-running inference jobs, you can use `InferenceProgressMonitor` to periodically update a HuggingFace dataset card with a progress bar and ETA. After inference completes, `InferenceDatasetCardGenerator` creates a final dataset card with statistics.
-
-```python
-params = InferenceDatasetCardParams(
-    output_repo_id="your-username/output-dataset",
-    input_dataset_name="HuggingFaceFW/fineweb-edu",
-    input_dataset_split="train",
-    model_name="HuggingFaceTB/SmolLM3-3B",
-    # ... other params
-)
-
-# Runs in parallel with inference on Slurm
-monitor_pipeline = [
-    InferenceProgressMonitor(
-        params=params, update_interval=3600
-    )
-]
-
-# Runs after inference completes
-datacard_pipeline = [
-    InferenceDatasetCardGenerator(params=params)
-]
-```
-
 ### Throughput Benchmarking
 
 For synthetic data generation, we may run language model inference for millions of GPU hours. Finding a configuration that maximizes throughput is critical: it can accelerate generation by days and save thousands of dollars. In this section, we describe our experiments to identify optimal parameters for a selection of popular models.

app/src/content/chapters/6-finephrase.mdx

@@ -1,2 +1,170 @@
-## FinePhrase
+import Image from "../../components/Image.astro";
+import HtmlEmbed from "../../components/HtmlEmbed.astro";
+import Sidenote from "../../components/Sidenote.astro";
+import FigRef from "../../components/FigRef.astro";
+import Wide from "../../components/Wide.astro";
+import datasetCardImg from "../assets/image/auto-dataset-card.png";
+import finephraseProgressImg from "../assets/image/finephrase-progress.png";
 
+## Applying the Recipe at Scale
+
+We ran 90 experiments to figure out what works. Now we apply those findings to build [FinePhrase](https://huggingface.co/datasets/HuggingFaceFW/finephrase), a large-scale synthetic dataset that rephrases all XXX million documents from [FineWeb-Edu](https://huggingface.co/datasets/HuggingFaceFW/fineweb-edu) (sample-350BT) into four structured formats, producing XXX billion tokens of synthetic pretraining data.
+
+The recipe is simple: take the best model (SmolLM2-1.7B-Instruct), the best prompts (FAQ, Math, Table, Tutorial), the optimized inference settings from our throughput benchmarks, and the battle-tested DataTrove infrastructure. Launch 100 parallel Slurm workers, each running on a single H100 GPU with suffix-32 speculative decoding. Let it run for about two weeks.
+
+To get a sense of the scale: our infrastructure benchmarks showed that SmolLM2-1.7B-Instruct achieves ~9,200 tokens per second per GPU with suffix-32 speculative decoding. With 100 GPUs running in parallel, that is ~920,000 tokens per second, or about 3.3 billion tokens per hour. Rephrasing ~339 million documents four times (once per prompt) at an average of ~XXX tokens per document means roughly XXX trillion tokens of total generation. At our throughput rate, that takes approximately XXX GPU-days, or about XXX wall-clock days with 100 GPUs.
+
+### The Recipe
+
+Every configuration choice traces back to a finding from our experiments or infrastructure benchmarks:
+
+- **Model**: [SmolLM2-1.7B-Instruct](https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B-Instruct), which dominated all other model families across every prompt in our [model family comparison](#does-the-model-family-matter)
+- **Prompts**: [FAQ](#faq), [Math](#math), [Table](#table), and [Tutorial](#tutorial), the four prompts that [consistently beat DCLM](#can-new-prompts-beat-dclm) in our experiments
+- **Source data**: [FineWeb-Edu sample-350BT](https://huggingface.co/datasets/HuggingFaceFW/fineweb-edu), since our experiments showed that [source quality is secondary](#does-the-source-dataset-matter) when paired with a strong mix-in dataset
+- **Inference settings**: tp=1 with suffix-32 speculative decoding, mns=2048, mnbt=16384, gmu=0.90, all derived from the [throughput benchmark](#throughput-benchmarking) that found a 1.75x speedup for SmolLM2-1.7B-Instruct with this configuration
+
+The entire FinePhrase production run is defined in a [single script](https://github.com/huggingface/datatrove/blob/main/examples/inference/finephrase.py) that is intentionally thin. It declares the configuration and calls the [`generate_data`](https://github.com/huggingface/datatrove/blob/main/examples/inference/generate_data.py) script introduced in the [Infrastructure](#infrastructure) section (the same script we used for all throughput benchmarking). Here is the core configuration:
+
+```python
+KWARGS = {
+    "model_name_or_path": "HuggingFaceTB/SmolLM2-1.7B-Instruct",
+    "model_max_context": 8192,
+    "max_tokens": 2048,
+    "input_dataset_name": "HuggingFaceFW/fineweb-edu",
+    "input_dataset_config": "sample-350BT",
+    "output_dataset_name": "HuggingFaceFW/finephrase",
+    "max_num_seqs": 2048,
+    "max_num_batched_tokens": 16384,
+    "gpu_memory_utilization": 0.90,
+    "speculative_config": '{"method":"suffix","num_speculative_tokens":32}',
+    "enable_monitoring": True,
+    "examples_per_chunk": 100_000,
+    "workers": 100,
+    "tasks": 100,
+}
+
+PROMPT_TEMPLATES = {
+    "math": "Rewrite the document to create a mathematical word problem ...",
+    "table": "Rewrite the document as a structured table ...",
+    "faq": "Rewrite the document as a comprehensive FAQ ...",
+    "tutorial": "Rewrite the document as a clear, step-by-step tutorial ...",
+}
+
+for name, template in PROMPT_TEMPLATES.items():
+    generate_data_main(**KWARGS, name=f"finephrase_{name}",
+                       prompt_template=[name, template])
+```
+
+<Sidenote>
+We set `max_tokens=2048` instead of 4096 because SmolLM2-1.7B-Instruct rarely generates more than 2K tokens per document anyway. Halving the max token budget lets vLLM allocate more KV cache for concurrent sequences.
+</Sidenote>
+
+All the operational complexity lives in DataTrove itself: chunked processing with checkpoint-based resume, distributed Slurm execution, incremental Hub uploads, and automatic dataset card generation. The [`generate_data`](https://github.com/huggingface/datatrove/blob/main/examples/inference/generate_data.py) script wires these pieces together into a single CLI for synthetic data generation, which is why the FinePhrase production script is only less than 100 lines of code. Before any GPU time is spent, it runs pre-flight checks: `check_hf_auth()` verifies you have a write token, `ensure_repo_exists()` creates the output dataset repo, and `validate_config()` catches invalid parallelism settings and validates that prompt templates contain the `[[DOCUMENT]]` placeholder. It reads the model's `GenerationConfig` from the Hub to inherit default sampling parameters rather than requiring you to hardcode them. The rollout function automatically truncates documents that exceed the context budget at newline boundaries, which is critical at 339 million documents where some will inevitably be too long.
+
+On Slurm, a single `generate_data` call orchestrates three coordinated jobs: the inference job (100 parallel workers doing the actual generation), a monitor job (updating the dataset card with progress bars and ETAs), and a datacard job (generating final statistics after completion). The monitor tracks the inference job ID and stops if inference fails. The datacard job uses Slurm's `afterok` dependency to run only on success.
+
+### Automatic HF Upload and Progress Monitoring
+
+We want you to be able to just press a button, let the GPUs go brrrr, and check back in to the finished dataset. DataTrove continuously uploads data to your specified Hugging Face dataset repo whenever a chunk is finished, using `ParquetWriter` with `hf://` paths so data appears on the Hub within minutes of generation, not after the full run completes. At the end, the `InferenceDatasetCardGenerator` pipeline step checks the logs directory, collects information about the throughput, and uploads a dataset card to document your new synthetic dataset. <FigRef target="auto-dataset-card" /> shows an example of the auto-generated dataset card.
+
+<figure id="auto-dataset-card">
+<Image src={datasetCardImg} alt="Auto-generated dataset card on the Hugging Face Hub" />
+<figcaption>Example of an auto-generated dataset card with throughput metrics, uploaded to the Hugging Face Hub after inference completes.</figcaption>
+</figure>
+
+For long-running inference jobs like FinePhrase (which runs for about two weeks), the `InferenceProgressMonitor` runs as a separate Slurm job alongside the inference workers. It periodically scans the output directory, counts completed chunks across all 100 tasks, and updates the dataset card on the Hub with a progress bar and ETA for each prompt template. <FigRef target="finephrase-progress" /> shows the live progress dashboard during the FinePhrase generation run.
+
+<figure id="finephrase-progress">
+<Image src={finephraseProgressImg} alt="Live progress monitoring of the FinePhrase generation run" />
+<figcaption>Live progress dashboard for FinePhrase, showing per-prompt completion status, document counts, and ETAs. The monitor runs as a separate Slurm job and updates the dataset card hourly.</figcaption>
+</figure>
+
+Both the progress monitor and the dataset card generator are configured through an `InferenceDatasetCardParams` object that captures the full run metadata. The `generate_data` script creates these pipelines automatically, but here is what happens under the hood:
+
+```python
+params = InferenceDatasetCardParams(
+    output_repo_id="HuggingFaceFW/finephrase",
+    input_dataset_name="HuggingFaceFW/fineweb-edu",
+    input_dataset_split="train",
+    model_name="HuggingFaceTB/SmolLM2-1.7B-Instruct",
+    # ... other params
+)
+
+monitor_pipeline = [
+    InferenceProgressMonitor(
+        params=params, update_interval=3600
+    )
+]
+
+datacard_pipeline = [
+    InferenceDatasetCardGenerator(params=params)
+]
+```
+
+### What's in the Dataset?
+
+<FigRef target="finephrase-explorer" /> lets you browse real examples from FinePhrase. Each sample shows the original FineWeb-Edu source document alongside all four rephrased versions. Navigate through samples to see how the same web document becomes a FAQ, a math problem, a structured table, and a step-by-step tutorial.
+
+<Wide>
+<HtmlEmbed
+  id="finephrase-explorer"
+  src="finephrase-explorer.html"
+  caption="Browse real examples from the FinePhrase dataset. Each sample shows the original source document alongside all four rephrased versions (FAQ, Math, Table, Tutorial). Use the arrows or Random button to navigate between samples."
+/>
+</Wide>
+
+### Improvements to DataTrove
+
+Building FinePhrase was not just about running inference at scale. It required hardening DataTrove's inference pipeline to handle the realities of processing 339 million documents across 100 parallel workers over two weeks. Every failure mode you can imagine showed up: documents that crash the model, workers racing to commit to the same repo, Slurm jobs dying on startup, and caches corrupting under contention. We merged over a dozen PRs to make this work. Here are the most impactful ones.
+
+#### Graceful error handling for bad documents
+
+At 339 million documents, some will inevitably trigger errors: documents too long for the context window even after truncation, malformed content that produces invalid tokens, or edge cases in the tokenizer. Before [PR #450](https://github.com/huggingface/datatrove/pull/450), a single bad document would crash the entire worker, losing all progress for that task. The `skip_bad_requests` option lets the `InferenceRunner` catch provider-side `BadRequestError` exceptions, log the problematic document, and continue processing the rest of the chunk.
+
+```python
+InferenceRunner(
+    rollout_fn=simple_rollout,
+    config=inference_config,
+    skip_bad_requests=True,  # Log and skip instead of crashing
+)
+```
+
+#### Fast resume with checkpoint-aware skipping
+
+The first version of `skip_bad_requests` had a subtle problem: skipped documents were not written to checkpoints. This meant chunks containing bad documents never reached completion, `last_chunk` never advanced, and every restart re-parsed the entire checkpoint history from scratch. For FinePhrase with 100,000 documents per chunk, this made restarts painfully slow (sometimes leading to multiple hours of wasted GPU time per worker). [PR #464](https://github.com/huggingface/datatrove/pull/464) fixes this by writing skipped documents to checkpoints with a special marker so they count toward chunk completion but are excluded from the final output. It also speeds up resume by sorting checkpoint files and skipping replay for chunks that are already complete.
+
+#### Hardening Hub uploads against transient failures
+
+With 100 workers writing to the same Hugging Face Hub repository, transient failures are not rare, they are guaranteed. We encountered three distinct failure modes and fixed each one:
+
+- **Commit races** ([PR #448](https://github.com/huggingface/datatrove/pull/448)): Two workers commit simultaneously and one gets `412 Precondition Failed` with "A commit has happened since." The fix adds retry logic with exponential backoff to the `DiskWriter`, which all Hub-writing paths go through.
+- **Transient server errors** ([PR #463](https://github.com/huggingface/datatrove/pull/463)): `503 Service Unavailable` and other transient API errors were not retried consistently. This PR normalizes retry logic across `DiskWriter` and `HuggingFaceDatasetWriter` so all transient errors are handled uniformly.
+- **LFS verification failures** ([PR #455](https://github.com/huggingface/datatrove/pull/455)): Large file uploads occasionally fail LFS verification on the server side. A one-line fix adds `"lfs-verify"` to the list of retryable error messages.
+
+#### Isolating the Xet cache per Slurm task
+
+Hugging Face Hub uses [Xet](https://huggingface.co/docs/hub/storage-backends#xet-storage-backend) as a storage backend, and its local cache is not designed for concurrent access from 100 parallel processes. Shared cache access caused corruption and failures. [PR #465](https://github.com/huggingface/datatrove/pull/465) gives each Slurm task its own cache directory derived from the job, task, and process IDs:
+
+```bash
+export HF_XET_CACHE="/tmp/hf_xet/${SLURM_JOB_ID}_${SLURM_ARRAY_TASK_ID}_${SLURM_PROCID}"
+mkdir -p "$HF_XET_CACHE"
+```
+
+#### Multi-config dataset support
+
+FinePhrase runs four prompt templates that produce four independent dataset configs (faq, math, table, tutorial). Without config-awareness, all four templates would fight over a single dataset card and progress counters would exceed 100%. [PR #447](https://github.com/huggingface/datatrove/pull/447) adds first-class config support: outputs go to config-specific folders (`hf://datasets/HuggingFaceFW/finephrase/faq/`, `.../math/`, etc.), the dataset card merges information from all configs, and the progress monitor tracks each config independently so you see four separate progress bars (as in <FigRef target="finephrase-progress" />).
+
+#### Configurable server startup
+
+vLLM server startup time varies wildly depending on model size, optimization level, and cluster load. With `optimization_level=3` (the highest throughput setting), vLLM compiles CUDA graphs during startup, which can take several minutes. Fixed startup timeouts would kill healthy jobs that were simply slow to initialize. [PR #451](https://github.com/huggingface/datatrove/pull/451) makes all startup parameters configurable via `InferenceConfig`: timeout, max attempts, retry delay, and max retries.
+
+#### Fixing SLURM CPU binding
+
+A one-liner, but without it nothing runs. Slurm's default CPU binding policy conflicts with how DataTrove launches vLLM servers, sometimes causing jobs to fail immediately with `srun: error: CPU binding outside of job step allocation`. [PR #457](https://github.com/huggingface/datatrove/pull/457) passes `--cpu-bind=none` to srun, disabling the restrictive binding policy.
+
+```python
+SlurmPipelineExecutor(
+    srun_args={"cpu-bind": "none"},
+    ...
+)
+```

app/src/content/embeds/finephrase-explorer.html

@@ -0,0 +1,443 @@
+<div class="finephrase-explorer"></div>
+<style>
+  .finephrase-explorer {
+    font-family: var(--font-body, system-ui, sans-serif);
+    color: var(--text-color, #1a1a1a);
+    position: relative;
+  }
+  .finephrase-explorer .controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+  }
+  .finephrase-explorer .nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 8px;
+    background: var(--surface-bg, #fff);
+    color: var(--text-color, #1a1a1a);
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+    user-select: none;
+    flex-shrink: 0;
+  }
+  .finephrase-explorer .nav-btn:hover {
+    background: var(--primary-color, #6366f1);
+    color: #fff;
+    border-color: var(--primary-color, #6366f1);
+  }
+  .finephrase-explorer .random-btn {
+    padding: 6px 14px;
+    width: auto;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .finephrase-explorer .sample-counter {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--muted-color, #888);
+    white-space: nowrap;
+  }
+  .finephrase-explorer .source-meta {
+    padding: 12px 14px;
+    font-size: 12px;
+    color: var(--muted-color, #888);
+    line-height: 1.8;
+    border-top: 1px solid var(--border-color, #ddd);
+    word-break: break-all;
+    flex-shrink: 0;
+    margin-top: auto;
+  }
+  .finephrase-explorer .source-meta a {
+    color: var(--primary-color, #6366f1);
+    text-decoration: none;
+  }
+  .finephrase-explorer .source-meta a:hover {
+    text-decoration: underline;
+  }
+  .finephrase-explorer .source-meta .meta-label {
+    font-weight: 600;
+    color: var(--text-color, #1a1a1a);
+    font-size: 11px;
+  }
+  .finephrase-explorer .source-meta .meta-value {
+    font-family: var(--font-mono, monospace);
+    font-size: 11px;
+  }
+  .finephrase-explorer .panels {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 14px;
+  }
+  .finephrase-explorer .source-panel {
+    grid-row: 1 / 3;
+    grid-column: 1;
+  }
+  .finephrase-explorer .panel {
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 10px;
+    background: var(--surface-bg, #fff);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .finephrase-explorer .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 14px;
+    font-size: 12px;
+    font-weight: 700;
+    border-bottom: 1px solid var(--border-color, #ddd);
+    background: var(--surface-bg, #fff);
+    flex-shrink: 0;
+  }
+  .finephrase-explorer .panel-header .header-stats {
+    font-size: 11px;
+    font-weight: 400;
+    color: var(--muted-color, #888);
+    text-transform: none;
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+  .finephrase-explorer .prompt-tag {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 5px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .finephrase-explorer .panel-body {
+    padding: 14px;
+    overflow-y: auto;
+    max-height: 320px;
+    font-size: 13px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  .finephrase-explorer .source-panel {
+    max-height: 760px;
+  }
+  .finephrase-explorer .source-panel .panel-body {
+    flex: 1;
+    min-height: 0;
+    max-height: none;
+  }
+  .finephrase-explorer .panel-body table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 12px;
+    margin: 8px 0;
+  }
+  .finephrase-explorer .panel-body th,
+  .finephrase-explorer .panel-body td {
+    border: 1px solid var(--border-color, #ddd);
+    padding: 6px 10px;
+    text-align: left;
+  }
+  .finephrase-explorer .panel-body th {
+    background: var(--surface-bg, #f5f5f5);
+    font-weight: 600;
+  }
+  .finephrase-explorer .panel-body h2,
+  .finephrase-explorer .panel-body h3 {
+    margin: 12px 0 6px;
+    font-size: 14px;
+    font-weight: 700;
+    white-space: normal;
+  }
+  .finephrase-explorer .panel-body h2:first-child,
+  .finephrase-explorer .panel-body h3:first-child {
+    margin-top: 0;
+  }
+  .finephrase-explorer .panel-body strong {
+    font-weight: 700;
+  }
+  .finephrase-explorer .error-msg {
+    color: #dc2626;
+    padding: 20px;
+    font-size: 14px;
+  }
+  @media (max-width: 768px) {
+    .finephrase-explorer .panels {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+    }
+    .finephrase-explorer .source-panel {
+      grid-row: auto;
+    }
+    .finephrase-explorer .panel-body {
+      max-height: 250px;
+    }
+  }
+</style>
+<script>
+  (() => {
+    const PROMPTS = ['faq', 'math', 'table', 'tutorial'];
+    const PROMPT_LABELS = { faq: 'FAQ', math: 'Math', table: 'Table', tutorial: 'Tutorial' };
+
+    // Indices into the full 12-prompt alphabetical order used by experiment charts
+    const PROMPT_COLOR_INDICES = { faq: 6, math: 8, table: 9, tutorial: 10 };
+
+    const getPromptColors = () => {
+      const palette = window.ColorPalettes
+        ? window.ColorPalettes.getColors('categorical', 12)
+        : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac','#d37295','#a0cbe8'];
+      const colors = {};
+      for (const p of PROMPTS) colors[p] = palette[PROMPT_COLOR_INDICES[p]];
+      return colors;
+    };
+
+    const hexToRgb = (hex) => {
+      const h = hex.replace('#', '');
+      return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
+    };
+    const luminance = ({ r, g, b }) => 0.299 * r + 0.587 * g + 0.114 * b;
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('finephrase-explorer'))) {
+        const cs = Array.from(document.querySelectorAll('.finephrase-explorer'))
+          .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      const parseJsonl = (text) => text.trim().split('\n').filter(Boolean).map(line => JSON.parse(line));
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) {
+              const text = await r.text();
+              return p.endsWith('.jsonl') ? parseJsonl(text) : JSON.parse(text);
+            }
+          } catch (_) {}
+        }
+        throw new Error('Data file not found');
+      };
+
+      const renderMarkdown = (text) => {
+        if (!text) return '';
+        let html = text
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+
+        const lines = html.split('\n');
+        let inTable = false;
+        const out = [];
+        let tableRows = [];
+
+        const flushTable = () => {
+          if (tableRows.length < 2) {
+            out.push(...tableRows.map(r => r.raw));
+            tableRows = [];
+            return;
+          }
+          let t = '<table>';
+          tableRows.forEach((row, i) => {
+            if (row.isSep) return;
+            const tag = i === 0 ? 'th' : 'td';
+            t += '<tr>' + row.cells.map(c => `<${tag}>${c.trim()}</${tag}>`).join('') + '</tr>';
+          });
+          t += '</table>';
+          out.push(t);
+          tableRows = [];
+        };
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
+            const cells = trimmed.slice(1, -1).split('|');
+            const isSep = cells.every(c => /^[\s\-:]+$/.test(c));
+            tableRows.push({ cells, isSep, raw: line });
+            inTable = true;
+          } else {
+            if (inTable) { flushTable(); inTable = false; }
+            out.push(line);
+          }
+        }
+        if (inTable) flushTable();
+
+        html = out.join('\n');
+        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/\n(?!<)/g, '<br>');
+        return html;
+      };
+
+      const wc = (text) => text ? text.split(/\s+/).filter(Boolean).length : 0;
+      const fmtNum = (n) => n.toLocaleString('en-US');
+      const statsText = (text) => `${fmtNum(wc(text))} words · ${fmtNum(text.length)} chars`;
+
+      const makeTag = (label, color) => {
+        const textColor = luminance(hexToRgb(color)) > 160 ? '#111' : '#fff';
+        const tag = document.createElement('span');
+        tag.className = 'prompt-tag';
+        tag.style.cssText = `background:${color};color:${textColor};`;
+        tag.textContent = label;
+        return tag;
+      };
+
+      const render = (data, idx, promptColors) => {
+        const total = data.length;
+        const entry = data[idx];
+        container.innerHTML = '';
+
+        // Controls row: nav buttons + sample counter
+        const controls = document.createElement('div');
+        controls.className = 'controls';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.className = 'nav-btn';
+        prevBtn.textContent = '←';
+        prevBtn.title = 'Previous sample';
+        prevBtn.addEventListener('click', () => { currentIdx = (currentIdx - 1 + total) % total; render(data, currentIdx, promptColors); });
+
+        const nextBtn = document.createElement('button');
+        nextBtn.className = 'nav-btn';
+        nextBtn.textContent = '→';
+        nextBtn.title = 'Next sample';
+        nextBtn.addEventListener('click', () => { currentIdx = (currentIdx + 1) % total; render(data, currentIdx, promptColors); });
+
+        const randBtn = document.createElement('button');
+        randBtn.className = 'nav-btn random-btn';
+        randBtn.textContent = 'Random';
+        randBtn.title = 'Random sample';
+        randBtn.addEventListener('click', () => { currentIdx = Math.floor(Math.random() * total); render(data, currentIdx, promptColors); });
+
+        const counter = document.createElement('span');
+        counter.className = 'sample-counter';
+        counter.textContent = `${idx + 1} / ${total}`;
+
+        controls.appendChild(prevBtn);
+        controls.appendChild(nextBtn);
+        controls.appendChild(randBtn);
+        controls.appendChild(counter);
+        container.appendChild(controls);
+
+        const esc = (s) => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+
+        // Panels grid
+        const panels = document.createElement('div');
+        panels.className = 'panels';
+
+        // Source panel
+        const sourceText = entry.source || '';
+        const sourcePanel = document.createElement('div');
+        sourcePanel.className = 'panel source-panel';
+        const sourceHeader = document.createElement('div');
+        sourceHeader.className = 'panel-header';
+        const sourceTag = makeTag('FineWeb-Edu', 'var(--primary-color, #6366f1)');
+        sourceTag.style.cssText = 'background:var(--primary-color, #6366f1);color:var(--on-primary, #fff);';
+        const sourceStats = document.createElement('span');
+        sourceStats.className = 'header-stats';
+        sourceStats.textContent = statsText(sourceText);
+        sourceHeader.appendChild(sourceTag);
+        sourceHeader.appendChild(sourceStats);
+        const sourceBody = document.createElement('div');
+        sourceBody.className = 'panel-body';
+        sourceBody.innerHTML = renderMarkdown(sourceText);
+        sourcePanel.appendChild(sourceHeader);
+        sourcePanel.appendChild(sourceBody);
+
+        // Metadata section inside source panel
+        const sourceMeta = document.createElement('div');
+        sourceMeta.className = 'source-meta';
+        const metaLines = [];
+        if (entry.id) metaLines.push(`<span class="meta-label">ID:</span> <span class="meta-value">${esc(entry.id)}</span>`);
+        if (entry.url) metaLines.push(`<span class="meta-label">Original Website:</span> <a href="${entry.url}" target="_blank" rel="noopener">${esc(entry.url)}</a>`);
+        if (entry.file_path) metaLines.push(`<span class="meta-label">CommonCrawl S3:</span> <span class="meta-value">${esc(entry.file_path)}</span>`);
+        sourceMeta.innerHTML = metaLines.join('<br>');
+        sourcePanel.appendChild(sourceMeta);
+        panels.appendChild(sourcePanel);
+
+        // 4 prompt panels
+        for (const prompt of PROMPTS) {
+          const color = promptColors[prompt];
+          const genText = entry[prompt] || '';
+          const panel = document.createElement('div');
+          panel.className = 'panel';
+
+          const header = document.createElement('div');
+          header.className = 'panel-header';
+          header.appendChild(makeTag(PROMPT_LABELS[prompt], color));
+          const stats = document.createElement('span');
+          stats.className = 'header-stats';
+          stats.textContent = statsText(genText);
+          header.appendChild(stats);
+
+          const body = document.createElement('div');
+          body.className = 'panel-body';
+          body.innerHTML = renderMarkdown(genText);
+
+          panel.appendChild(header);
+          panel.appendChild(body);
+          panels.appendChild(panel);
+        }
+
+        container.appendChild(panels);
+      };
+
+      let currentIdx = 0;
+      const promptColors = getPromptColors();
+
+      document.addEventListener('palettes:updated', () => {
+        Object.assign(promptColors, getPromptColors());
+        if (loadedData) render(loadedData, currentIdx, promptColors);
+      });
+
+      let loadedData = null;
+
+      fetchFirstAvailable([
+        '/data/finephrase-samples.jsonl',
+        '/data/finephrase-samples.json',
+        './assets/data/finephrase-samples.jsonl',
+        './assets/data/finephrase-samples.json',
+        '../assets/data/finephrase-samples.jsonl',
+        '../../assets/data/finephrase-samples.jsonl',
+      ]).then(data => {
+        loadedData = data;
+        currentIdx = Math.floor(Math.random() * data.length);
+        render(data, currentIdx, promptColors);
+        document.addEventListener('keydown', (e) => {
+          if (e.key === 'ArrowLeft') {
+            currentIdx = (currentIdx - 1 + data.length) % data.length;
+            render(data, currentIdx, promptColors);
+          } else if (e.key === 'ArrowRight') {
+            currentIdx = (currentIdx + 1) % data.length;
+            render(data, currentIdx, promptColors);
+          }
+        });
+      }).catch(err => {
+        container.innerHTML = `<pre class="error-msg">Failed to load sample data: ${err.message}</pre>`;
+      });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    } else {
+      bootstrap();
+    }
+  })();
+</script>