Visual assets from
Bringing paper to life: A modern template for scientific writing
15 Charts
2 Images
8 Tables
| Field | Required | Notes | Type |
|---|---|---|---|
| title | Yes | Main title; supports line breaks with "\n" (falls back to "Untitled article") | string |
| subtitle | Yes | Shown just below the title | string |
| description | Yes | Used for SEO/meta description | string |
| published | Yes | e.g., "2025-02-19" or readable date | string/date |
| tags | No | List of keywords | string[] |
| authors | No | Affiliation indices refer to the affiliations list | string[] or { name, url?, affiliations? }[] |
| affiliations | No | Alias: affiliation (single or array) | { name, url? }[] |
| doi | No | DOI identifier | string |
| licence | No | Rendered in footer; HTML supported | string (HTML allowed) |
| seoThumbImage | No | Overrides default OpenGraph image | string (URL) |
| tableOfContentsAutoCollapse | No | Controls TOC auto-collapse | boolean |
| pdfProOnly | No | Gate PDF download to Pro users only. Shows "Subscribe to Pro" button for non-Pro users | boolean |
| showPdf | No | Show or hide PDF section in metadata. Default: true | boolean |
| Model | Accuracy | F1-Score | Training Time | Status |
|---|---|---|---|---|
| BERT-base | 0.89 | 0.89 | 2.5h | ✅ |
| RoBERTa-large | 0.92 | 0.92 | 4.2h | ✅ |
| DeBERTa-v3 | 0.94 | 0.94 | 5.8h | ✅ |
| GPT-3.5-turbo | 0.91 | 0.91 | 0.1h | ✅ |
A placeholder image alt text
| Prop | Required | Type | Description |
|---|---|---|---|
id | Yes | string | Unique identifier for the reference (used for deep-linking) |
caption | Yes | string | HTML caption displayed below the content (supports HTML tags) |
| Prop | Required | Type | Description |
|---|---|---|---|
title | No | string | Short title displayed in header |
emoji | No | string | Emoji displayed before the title |
class | No | string | Extra classes for custom styling |
variant | No | 'neutral' | 'info' | 'success' | 'danger' |
| Prop | Required | Type | Description |
|---|---|---|---|
source | No | HTML | Quote source/author (supports HTML links) |
Image 1: Example of using Image component within Stack
This is a chart title
Figure X: Some chart description
Credit: Example
| Type | Source | Details |
|---|---|---|
| Charts | <HtmlEmbed> components | Rendered live with all props (config, data, wide) |
| Images | <Image> components | Resolved from MDX imports to actual files |
| Stacks | <Stack> containing <Image> | Grouped as a single item, preserving layout |
| Tables | Markdown tables (\| ... \|) | Parsed with headers and rows |
Post-Training Adventure
Interactive visualization of a model's post-training journey, showing the different stages and decisions.
View in article →The Experiment Map — Source × Prompt × Model
Sankey diagram showing the flow of 65 experiments through source dataset, prompt strategy, and model family. Width = number of experiments.
View in article →Parameter Calculator
Interactive parameter calculator to visualize the parameter distribution of a dense transformer model. Useful for making architectural decisions or configuring ablations.
View in article →arXiv: Research Paper Clustering
Interactive visualization of ~8k recent arXiv submissions via UMAP dimensionality reduction. Each point represents a research paper positioned by semantic similarity. Colors indicate academic categories (cs.AI, cs.LG, cs.CV, etc.).
View in article →Visual Similarity of Typefaces
Interactive 2D visualization of 382 Google Fonts clustered by visual similarity via UMAP. Each point represents a typeface positioned based on pixel-level differences computed from font matrices.
View in article →MNIST-like Neural Network
Interactive MNIST-like neural network. Draw a digit on the left canvas; activations propagate through hidden layers (node size/opacity reflect activation). The right side displays class probabilities (0–9) with the top class emphasized.
View in article →Parameter Comparison
Visual comparison of parameter distribution between different model sizes (8B vs 70B). Shows how embeddings represent a larger fraction in smaller models.
View in article →Attention Mechanisms
Simplified illustration of Multi-Head Attention (MHA), Grouped-Query Attention (GQA), Multi-Query Attention (MQA), and Multi-head Latent Attention (MLA). Demonstrates how MLA compresses keys and values into a latent vector.
View in article →AWS Bandwidth Bottleneck
Interactive diagram of key components and communication links in an AWS p5 instance. Shows the different GPU-GPU communication paths with their actual bandwidths.
View in article →Storage Performance Heatmaps
Interactive heatmaps comparing storage system performance (scratch, root, FSx, admin) across different thread counts and I/O sizes. Visualizes throughput (GiB/s) and IOPS to identify optimal configurations for each storage tier.
View in article →Should You Train Your Own Model?
Interactive decision tree to determine whether you should train your own model. Guides the thought process through key questions: Can existing models handle your use case? Should you fine-tune or train from scratch? For research, production, or strategic open-source?
View in article →Generic Line Chart
Configurable line chart with zoom/pan, smoothing and interactive tooltips. Example with loss data for different attention configurations.
Credit: SmolLM Training Playbook
Generic Six Line Charts Grid
Configurable grid of line charts with synchronized zoom/pan. Example with evaluations of different metrics.
Credit: SmolLM Training Playbook
Interactive Mathematical Function Plotter
Interactive equation editor with real-time function plotting. Edit mathematical expressions and see their graphs update instantly. Supports common functions (sin, cos, exp, etc.) with customizable domain range.
View in article →| Type | Name | Value |
|---|---|---|
| Secret | NOTION_TOKEN | your token |
| Variable | NOTIONPAGEID | your page ID |
| Variable | ENABLENOTIONCONVERSION | true |
| Prop | Required |
|---|---|
zoomable | No |
downloadable | No |
loading="lazy" | No |
caption | No |