update

app/src/components/ResponsiveImage.astro

@@ -0,0 +1,38 @@
+---
+// @ts-ignore - types provided by Astro at runtime
+import { Image } from 'astro:assets';
+
+interface Props {
+  /** Source image imported via astro:assets */
+  src: any;
+  /** Alt text for accessibility */
+  alt: string;
+  /** Optional HTML string caption (use slot caption for rich content) */
+  caption?: string;
+  /** Optional class to apply on the <figure> wrapper when caption is used */
+  figureClass?: string;
+  /** Any additional attributes should be forwarded to the underlying <Image> */
+  [key: string]: any;
+}
+
+const { caption, figureClass, ...imgProps } = Astro.props as Props;
+const hasCaptionSlot = Astro.slots.has('caption');
+const hasCaption = hasCaptionSlot || (typeof caption === 'string' && caption.length > 0);
+---
+
+{hasCaption ? (
+  <figure class={figureClass}>
+    <Image {...imgProps} />
+    <figcaption>
+      {hasCaptionSlot ? (
+        <slot name="caption" />
+      ) : (
+        caption && <span set:html={caption} />
+      )}
+    </figcaption>
+  </figure>
+) : (
+  <Image {...imgProps} />
+)}
+
+

app/src/content/article.mdx

@@ -28,7 +28,7 @@ import AvailableBlocks from "./chapters/available-blocks.mdx";
 import GettingStarted from "./chapters/getting-started.mdx";
 
 <Sidenote>
-  Welcome to this single‑page research article template. It helps you publish **clear**, **modern**, and **interactive** technical writing with **minimal setup**. Grounded in **web‑native scholarship**, it favors **interactive explanations**, careful notation, and **inspectable examples** over static snapshots.
+  Welcome to this single‑page **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**. Grounded in **web‑native scholarship**, it favors **interactive explanations**, careful notation, and **inspectable examples** over static snapshots.
   
   It offers a **ready‑to‑publish, all‑in‑one workflow** so you can **focus on ideas** rather than infrastructure.
   <Fragment slot="aside">

app/src/content/chapters/available-blocks.mdx

@@ -7,6 +7,7 @@ import Wide from '../../components/Wide.astro';
 import Note from '../../components/Note.astro';
 import FullWidth from '../../components/FullWidth.astro';
 import Accordion from '../../components/Accordion.astro';
+import ResponsiveImage from '../../components/ResponsiveImage.astro';
 
 ## Available components
 
@@ -15,7 +16,7 @@ import Accordion from '../../components/Accordion.astro';
 <br/>
 <div className="button-group">
   <a className="button" href="#math">Math</a>
-  <a className="button" href="#images">Images</a>
+  <a className="button" href="#responsiveimage">ResponsiveImage</a>
   <a className="button" href="#code-blocks">Code</a>
   <a className="button" href="#mermaid-diagrams">Mermaid</a>
   <a className="button" href="#citations-and-notes">Citations & notes</a>
@@ -54,54 +55,43 @@ $$
 $$
 ```
 
-### Image
+### ResponsiveImage
 
 **Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
 
-Props (optional)
-- `data-zoomable`: adds a zoomable lightbox.
-- `data-downloadable`: adds a small download button to fetch the image file.
-- `loading="lazy"`: lazy loads the image.
-- `figcaption`: adds a caption and credit.
-
-**Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
-
-**Optional:** Download button: add `data-downloadable` to render a small button in the bottom-right corner that downloads the image. By default it tries to use the original filename; you can override via `data-download-name="myfile.png"` and `data-download-src="/path/to/original.png"`.
-
-**Optional:** Lazy loading: add `loading="lazy"` to opt-in.
-
-**Optional:** Figcaption and credits: add a `figcaption` element with a `span` containing the credit.
+| Prop                   | Required | Description                                                                                                         | Option/Note                                                                                                 |
+|------------------------|----------|---------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
+| `data-zoomable`        | No       | Adds a zoomable lightbox (Medium-like).                                                                             | Only images with this attribute will open full-screen on click.                                             |
+| `data-downloadable`    | No       | Adds a small download button to fetch the image file.                                                               | By default uses the original filename. Can be customized with `data-download-name` and `data-download-src`. |
+| `loading="lazy"`       | No       | Lazy loads the image.                                                                                               | Defers image loading until it is visible on screen.                                                         |
+| `caption`              | No       | Adds a caption and credit.                                                                                          | Pass HTML as the `caption` prop, or use `<slot name="caption">`. Keep `<span className="image-credit">` for credits. |
 
 
-
-<figure>
-  <Image
-    src={placeholder}
-    data-zoomable
-    data-downloadable
-    layout="fixed"
-    alt="Tensor parallelism in a transformer block"
-  />
-  <figcaption>
-    Tensor parallelism in a transformer block
-    <span className="image-credit">Original work on <a target="_blank" href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=tensor_parallelism_in_a_transformer_block">Ultrascale Playbook</a></span>
-  </figcaption>
-</figure>
+<ResponsiveImage
+  src={placeholder}
+  data-zoomable
+  data-downloadable
+  layout="fixed"
+  alt="Tensor parallelism in a transformer block"
+  caption={'Tensor parallelism in a transformer block <span class="image-credit">Original work on <a target="_blank" href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=tensor_parallelism_in_a_transformer_block">Ultrascale Playbook</a></span>'}
+/>
 
 <small className="muted">Example</small>
 ```mdx
-import { Image } from 'astro:assets'
+import ResponsiveImage from '../components/ResponsiveImage.astro'
 import myImage from './assets/images/placeholder.jpg'
 
-<Image src={myImage} alt="Responsive, optimized example image" />
-
-<figure>
-  <Image src={myImage} layout="fixed" data-zoomable data-downloadable alt="Example with caption and credit" loading="lazy" />
-  <figcaption>
-    Optimized image with a descriptive caption.
-    <span className="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>
-  </figcaption>
-</figure>
+<ResponsiveImage src={myImage} alt="Responsive, optimized example image" />
+
+<ResponsiveImage
+  src={myImage}
+  layout="fixed"
+  data-zoomable
+  data-downloadable
+  loading="lazy"
+  alt="Example with caption and credit"
+  caption={'Optimized image with a descriptive caption. <span class="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>'}
+/>
 ```
 
 
@@ -349,53 +339,58 @@ import audioDemo from './assets/audio/audio-example.wav'
 
 The main purpose of the ```HtmlEmbed``` component is to **embed** a **Plotly** or **D3.js** chart in your article. **Libraries** are already imported in the template.
 
-They exist in the `app/src/content/fragments` folder.
+They exist in the `app/src/content/embeds` folder.
 
 For researchers who want to stay in **Python** while targeting **D3**, the [d3blocks](https://github.com/d3blocks/d3blocks) library lets you create interactive D3 charts with only a few lines of code. In **2025**, **D3** often provides more flexibility and a more web‑native rendering than **Plotly** for custom visualizations.
 
-Here are some examples of the two **libraries** in the template
+| Prop        | Required | Description                                                                                      
+|-------------|----------|--------------------------------------------------------------------------------------------------
+| `src`       | Yes      | Path to the embed file in the `embeds` folder.                                                   
+| `title`     | No       | Short title displayed above the card.                                                            
+| `desc`      | No       | Short description displayed below the card. Supports inline HTML (e.g., links).                  
+| `frameless` | No       | Removes the card background and border for seamless embeds.                                      
+| `align`     | No       | Aligns the title/description text. One of `left` (default), `center`, `right`.                  
 
-Props (optional)
-- `title`: short title displayed above the card.
-- `desc`: short description displayed below the card. Supports inline HTML (e.g., links).
-- `frameless`: removes the card background and border for seamless embeds.
-- `align`: aligns the title/description text. One of `left` (default), `center`, `right`.
-
-{/* <HtmlEmbed src="d3-scatter.html" frameless title="" desc="" /> */}
-<HtmlEmbed src="d3-line.html" title="D3 Line" desc="Simple time series" />
+<HtmlEmbed src="plotly-line.html" title="Plotly Line" desc="Interactive time series" />
 ---
-<HtmlEmbed src="d3-bar.html" title="D3 Memory usage with recomputation" desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}/>
----
-<Wide>
-  <HtmlEmbed src="d3-neural.html" title="D3 Interactive neural network (MNIST-like)" desc="Draw a digit and visualize activations and class probabilities (0–9)." align="center" />
-</Wide>
----
-<FullWidth>
-  <HtmlEmbed src="d3-pie.html" desc="D3 Pie charts by category" align="center" />
-</FullWidth>
----
-<HtmlEmbed src="line.html" title="Plotly Line" desc="Interactive time series" />
 
-<br/><br/>
-Here are some examples of the two **libraries** in the template
+<HtmlEmbed src="d3-line-example.html" title="D3 Line" desc="Interactive time series" />
 
-<small className="muted">Example</small>
+<br/>
+<small className="muted">Examples</small>
 ```mdx
 import HtmlEmbed from '../components/HtmlEmbed.astro'
 
+<HtmlEmbed src="plotly-line.html" title="Plotly Line" desc="Interactive time series" />
+<HtmlEmbed src="d3-line-example.html" title="D3 Line" desc="Interactive time series" />
+```
+
+#### Data
+
+If you need to link your HTML embeds to data files, there is an **`assets/data`** folder for this.
+As long as your files are there, they will be served from the **`public/data`** folder.
+You can fetch them with this address: **`[domain]/data/your-data.ext`**
+
+<Note>⚠️ <b>Be careful</b>, unlike images, <b>data files are not optimized</b> by Astro. You need to optimize them manually.</Note>
+
+#### Real world examples
+
+Here are some real world examples to inspire you.
+
+<HtmlEmbed src="d3-comparison.html" title="Image comparison" desc="" />
+---
 <HtmlEmbed src="d3-line.html" title="D3 Line" desc="Simple time series" />
+---
 <HtmlEmbed src="d3-bar.html" title="D3 Memory usage with recomputation" desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}/>
-
+---
 <Wide>
   <HtmlEmbed src="d3-neural.html" title="D3 Interactive neural network (MNIST-like)" desc="Draw a digit and visualize activations and class probabilities (0–9)." align="center" />
 </Wide>
-
+---
 <FullWidth>
   <HtmlEmbed src="d3-pie.html" desc="D3 Pie charts by category" align="center" />
 </FullWidth>
 
-<HtmlEmbed src="line.html" title="Plotly Line" desc="Interactive time series" />
-```
 
 ### Iframes
 
@@ -411,12 +406,7 @@ You can embed external content in your article using **iframes**. For example, *
 
 <small className="muted">Gradio embed</small>
 <div className="">
-<iframe
-  src="https://gradio-hello-world.hf.space"
-  width="100%"
-  height="380"
-  frameborder="0"
-></iframe>
+<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
 </div>
 
 <small className="muted">Example</small>

app/src/content/chapters/getting-started.mdx

@@ -5,6 +5,16 @@ import Note from '../../components/Note.astro';
 
 ### Installation
 
+The recommended way is to **duplicate this Space** on **Hugging Face** rather than cloning it directly:
+
+1. Open the template Space: **[🤗 science-blog-template](https://huggingface.co/spaces/tfrere/science-blog-template)** and click **"Duplicate this Space"**.
+2. Give it a name, choose visibility, and **keep the free CPU instance**.
+3. Clone your new Space repo.
+```bash
+git clone git@hf.co:spaces/<your-username>/<your-space>
+cd <your-space>
+```
+
 <Sidenote>
 ```bash
 git lfs install
@@ -30,26 +40,10 @@ npm run dev
 npm run build
 ```
 
-<Note title="Note">
-Serving the `dist/` directory on any static host is enough to deliver the site.
-</Note>
-<Note title="Note">
-A [slug-title].pdf and thumb.jpg are also generated at build time.<br/>You can find them in the public folder.
-</Note>
-
 
 ### Deploy
 
-The recommended way is to **duplicate this Space** on **Hugging Face** rather than cloning it directly:
-
-1. Open the template Space: **[🤗 science-blog-template](https://huggingface.co/spaces/tfrere/science-blog-template)** and click **"Duplicate this Space"**.
-2. Give it a name, choose visibility, and **keep the free CPU instance**.
-3. Clone your new Space repo.
-```bash
-git clone git@hf.co:spaces/<your-username>/<your-space>
-cd <your-space>
-```
-3. Then push your changes to your new Space repo.<br/>**Every push automatically triggers a build and deploy** on Spaces.
+Push your changes to your new Space repo.<br/>**Every push automatically triggers a build and deploy** on Spaces.
 ```bash
 # Make edits locally, then:
 git add .
@@ -57,3 +51,9 @@ git commit -m "Update content"
 git push
 ```
 
+<Note title="Note">
+Serving the `dist/` directory on any static host is enough to deliver the site.
+</Note>
+<Note title="Note">
+A [slug-title].pdf and thumb.jpg are also generated at build time.<br/>You can find them in the public folder.
+</Note>

app/src/content/chapters/writing-your-content.mdx

@@ -15,7 +15,7 @@ Your **article** lives in **one place**
 
 Everything is **self-contained** under `app/src/content/`:
 - **MDX**: `article.mdx` and [**optional chapters**](#chapters) in `chapters/`
-- **Assets**: `assets/` (**images**, **audio**; tracked via **Git LFS**)
+- **Assets**: `assets/` (**images**, **audios**, **datas**, etc.) tracked via **Git LFS**)
 - **Embeds**: `embed/` (**HTMLEmbed** for **Plotly/D3**, etc.) — see [**HtmlEmbed**](#htmlembed)
 
 The `article.mdx` file is the **main entry point** of your article.

app/src/content/embeds/d3-comparison.html

@@ -0,0 +1,126 @@
+<div class="image-comparison" style="width:100%;margin:10px 0;"></div>
+<style>
+  .image-comparison { position: relative; }
+  .image-comparison .controls { display:flex; align-items:center; gap:16px; justify-content:flex-start; margin:12px 0; }
+  .image-comparison .controls label { font-size:12px; color: var(--muted-color); display:flex; align-items:center; gap:8px; }
+  .image-comparison .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    -webkit-appearance: none; appearance: none; cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
+  }
+  [data-theme="dark"] .image-comparison .controls select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  .image-comparison .controls select:hover { border-color: var(--primary-color); }
+  .image-comparison .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
+
+  .image-comparison .grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width:100%; align-items: start; }
+  @media (max-width: 980px) { .image-comparison .grid { grid-template-columns: repeat(2, 1fr); } }
+
+  .image-comparison .card { position: relative; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; background: var(--surface-bg); display:flex; flex-direction:column; }
+  .image-comparison .card .media { position: relative; width:100%; height: 200px; background: var(--surface-2, var(--surface-bg)); display:block; }
+  .image-comparison .card .media img { width:100%; height:100%; object-fit: contain; display:block; }
+  .image-comparison .badge { position:absolute; top:8px; left:8px; font-size:11px; padding:3px 6px; border-radius:6px; background: var(--surface-bg); color: var(--text-color); border:1px solid var(--border-color); }
+  .image-comparison .meta { padding:8px 10px; border-top:1px solid var(--border-color); font-size:12px; display:flex; height: 55px; align-items:start; justify-content:space-between; gap:8px; }
+  .image-comparison .meta .label { color: var(--muted-color); }
+  .image-comparison .meta .value { font-weight:600; }
+</style>
+<script>
+  (() => {
+    const bootstrap = () => {
+      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.image-comparison')) || document.querySelector('.image-comparison');
+      if (!container) return;
+      if (container.dataset && container.dataset.mounted === 'true') return; if (container.dataset) container.dataset.mounted = 'true';
+
+      // Known filenames in /public/data/comparison
+      const FILES = {
+        '1': { 1: 'id_1_rank_1_sim_1.000.png', 2: 'id_1_rank_2_sim_0.165.png', 3: 'id_1_rank_3_sim_0.143.png' },
+        '2': { 1: 'id_2_rank_1_sim_1.000.png', 2: 'id_2_rank_2_sim_0.978.png', 3: 'id_2_rank_3_sim_0.975.png' },
+        '3': { 1: 'id_3_rank_1_sim_0.936.png', 2: 'id_3_rank_2_sim_0.686.png', 3: 'id_3_rank_3_sim_0.676.png' },
+      };
+
+      // Images served from [domain]/public/data/comparison/*.png → path is /data/comparison/
+      const CANDIDATE_BASES = [ '/data/comparison/' ];
+
+      const resolveBase = (candidates, filename) => new Promise((resolve) => {
+        let idx = 0; const tryNext = () => {
+          if (idx >= candidates.length) return resolve(candidates[0]);
+          const img = new Image();
+          img.onload = () => resolve(candidates[idx]);
+          img.onerror = () => { idx += 1; tryNext(); };
+          img.src = candidates[idx] + filename;
+        }; tryNext();
+      });
+
+      // Controls
+      const controls = document.createElement('div'); controls.className = 'controls';
+      const label = document.createElement('label'); label.textContent = 'Example';
+      const select = document.createElement('select');
+      const EXAMPLE_LABELS = { '1': 'photo', '2': 'chart', '3': 'drawing' };
+      ['1','2','3'].forEach((id)=>{ const o=document.createElement('option'); o.value=id; o.textContent=EXAMPLE_LABELS[id]; select.appendChild(o); });
+      label.appendChild(select); controls.appendChild(label); container.appendChild(controls);
+
+      // Grid
+      const grid = document.createElement('div'); grid.className = 'grid'; container.appendChild(grid);
+
+      let basePath = CANDIDATE_BASES[0];
+
+      const parseInfo = (filename) => {
+        const rankMatch = filename.match(/rank_(\d+)/i); const rank = rankMatch ? rankMatch[1] : '';
+        const simMatch = filename.match(/sim_([0-9.]+)/i); const sim = simMatch ? simMatch[1] : '';
+        return { rank, sim };
+      };
+
+      const formatSim = (val) => {
+        if (val == null || val === '') return '—';
+        return String(val).replace(/\.$/, '');
+      };
+
+      const render = (id) => {
+        const files = FILES[id]; if (!files) return;
+        const ordered = [files[1], files[1], files[2], files[3]]; // rank_1 twice then rank_2 and rank_3
+        grid.innerHTML = '';
+        ordered.forEach((fname, idx) => {
+          const { sim } = parseInfo(fname);
+          const isFirst = idx === 0;
+          const isDuplicateOfFirst = idx === 1;
+          const card = document.createElement('div'); card.className = 'card';
+          const media = document.createElement('div'); media.className = 'media';
+          const img = document.createElement('img'); img.alt = `example ${id} image ${idx+1}${isDuplicateOfFirst ? ' identical' : ''}`; img.loading = 'lazy'; img.src = basePath + fname; media.appendChild(img);
+          const meta = document.createElement('div'); meta.className = 'meta';
+          const left = document.createElement('span'); left.className = 'label'; left.textContent = isFirst ? 'Query' : 'Similarity';
+          meta.appendChild(left);
+          if (!isFirst) {
+            const right = document.createElement('span'); right.className = 'value'; right.textContent = isDuplicateOfFirst ? '1.000 identical' : formatSim(sim);
+            meta.appendChild(right);
+          }
+          card.appendChild(media); card.appendChild(meta); grid.appendChild(card);
+        });
+      };
+
+      (async () => {
+        // Resolve a working base then initial render
+        basePath = await resolveBase(CANDIDATE_BASES, FILES['1'][1]);
+        render('1');
+      })();
+
+      select.addEventListener('change', () => render(select.value));
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    } else { bootstrap(); }
+  })();
+</script>
+
+

app/src/content/embeds/d3-line-example.html

@@ -0,0 +1,428 @@
+<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-line .d3-line__controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
+  }
+  [data-theme="dark"] .d3-line .d3-line__controls select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  .d3-line .d3-line__controls select:hover {
+    border-color: var(--primary-color);
+  }
+  .d3-line .d3-line__controls select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(232,137,171,.25);
+    outline: none;
+  }
+  .d3-line .d3-line__controls label { gap: 8px; }
+
+  /* Range slider themed with --primary-color */
+  .d3-line .d3-line__controls input[type="range"] { 
+    -webkit-appearance: none; 
+    appearance: none; 
+    width: 100%; 
+    height: 6px; 
+    border-radius: 999px; 
+    background: var(--border-color);
+    outline: none;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
+    height: 6px; 
+    background: transparent; 
+    border-radius: 999px;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; 
+    appearance: none; 
+    width: 16px; 
+    height: 16px; 
+    border-radius: 50%; 
+    background: var(--primary-color); 
+    border: 2px solid var(--on-primary);
+    margin-top: -5px; 
+    cursor: pointer;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
+    height: 6px; 
+    background: transparent; 
+    border-radius: 999px;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
+    width: 16px; 
+    height: 16px; 
+    border-radius: 50%; 
+    background: var(--primary-color); 
+    border: 2px solid var(--on-primary);
+    cursor: pointer;
+  }
+  /* Improved line color via CSS */
+  .d3-line .lines path.improved { stroke: var(--primary-color); }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-line')) || document.querySelector('.d3-line');
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Dataset params matching the Plotly version
+      const datasets = [
+        { name: 'CIFAR-10',    base: { ymin:0.10, ymax:0.90, k:10.0, x0:0.55 }, aug: { ymin:0.15, ymax:0.96, k:12.0, x0:0.40 }, target: 0.97 },
+        { name: 'CIFAR-100',   base: { ymin:0.05, ymax:0.70, k: 9.5, x0:0.60 }, aug: { ymin:0.08, ymax:0.80, k:11.0, x0:0.45 }, target: 0.85 },
+        { name: 'ImageNet-1K', base: { ymin:0.02, ymax:0.68, k: 8.5, x0:0.65 }, aug: { ymin:0.04, ymax:0.75, k: 9.5, x0:0.50 }, target: 0.82 },
+      ];
+
+      // Controls UI
+      const controls = document.createElement('div');
+      controls.className = 'd3-line__controls';
+      Object.assign(controls.style, {
+        marginTop: '12px',
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      });
+
+      const labelDs = document.createElement('label');
+      Object.assign(labelDs.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
+      });
+      labelDs.textContent = 'Dataset';
+      const selectDs = document.createElement('select');
+      Object.assign(selectDs.style, { fontSize: '12px' });
+      datasets.forEach((d, i) => {
+        const o = document.createElement('option');
+        o.value = String(i);
+        o.textContent = d.name;
+        selectDs.appendChild(o);
+      });
+      labelDs.appendChild(selectDs);
+
+      const labelAlpha = document.createElement('label');
+      Object.assign(labelAlpha.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '10px', flex: '1', padding: '6px 10px'
+      });
+      labelAlpha.appendChild(document.createTextNode('Augmentation α'));
+      const slider = document.createElement('input');
+      slider.type = 'range'; slider.min = '0'; slider.max = '1'; slider.step = '0.01'; slider.value = '0.70';
+      Object.assign(slider.style, { flex: '1' });
+      const alphaVal = document.createElement('span'); alphaVal.className = 'alpha-value'; alphaVal.textContent = slider.value;
+      labelAlpha.appendChild(slider);
+      labelAlpha.appendChild(alphaVal);
+
+      controls.appendChild(labelDs);
+      controls.appendChild(labelAlpha);
+
+      // Create SVG
+      const svg = d3.select(container).append('svg')
+        .attr('width', '100%')
+        .style('display', 'block');
+
+      // Groups
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gHover = gRoot.append('g').attr('class', 'hover');
+      const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none',
+          padding: '8px 10px', borderRadius: '8px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 4px 24px rgba(0,0,0,.18)', opacity: '0',
+          transition: 'opacity .12s ease'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      // Colors
+      const colorBase = '#64748b';     // slate-500
+      const colorImproved = 'var(--primary-color)';
+      const colorTarget = '#4b5563';   // gray-600
+      const legendBgLight = 'rgba(255,255,255,0.85)';
+      const legendBgDark = 'rgba(17,17,23,0.85)';
+
+      // Data and helpers
+      const N = 240;
+      const xs = Array.from({ length: N }, (_, i) => i / (N - 1));
+      const logistic = (x, { ymin, ymax, k, x0 }) => ymin + (ymax - ymin) / (1 + Math.exp(-k * (x - x0)));
+      const blend = (l, e, a) => (1 - a) * l + a * e;
+
+      let datasetIndex = 0;
+      let alpha = parseFloat(slider.value) || 0.7;
+
+      let yBase = [];
+      let yAug = [];
+      let yImp = [];
+      let yTgt = [];
+
+      function computeCurves() {
+        const d = datasets[datasetIndex];
+        yBase = xs.map((x) => logistic(x, d.base));
+        yAug  = xs.map((x) => logistic(x, d.aug));
+        yTgt  = xs.map(() => d.target);
+        yImp  = yBase.map((v, i) => blend(v, yAug[i], alpha));
+      }
+
+      // Scales and layout
+      let width = 800, height = 360;
+      let margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      let xScale = d3.scaleLinear();
+      let yScale = d3.scaleLinear();
+
+      // Paths
+      const lineGen = d3.line()
+        .curve(d3.curveCatmullRom.alpha(0.6))
+        .x((d, i) => xScale(xs[i]))
+        .y((d) => yScale(d));
+
+      const pathBase = gLines.append('path').attr('fill', 'none').attr('stroke', colorBase).attr('stroke-width', 2);
+      const pathImp  = gLines.append('path').attr('class', 'improved').attr('fill', 'none').style('stroke', 'var(--primary-color)').attr('stroke-width', 2);
+      const pathTgt  = gLines.append('path').attr('fill', 'none').attr('stroke', colorTarget).attr('stroke-width', 2).attr('stroke-dasharray', '6,6');
+
+      // Hover elements
+      const hoverLine = gHover.append('line').attr('stroke-width', 1);
+      const hoverDotB = gHover.append('circle').attr('r', 3.5).attr('fill', colorBase).attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotI = gHover.append('circle').attr('class', 'improved').attr('r', 3.5).style('fill', 'var(--primary-color)').attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotT = gHover.append('circle').attr('r', 3.5).attr('fill', colorTarget).attr('stroke', '#fff').attr('stroke-width', 1);
+
+      const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');
+
+      function updateScales() {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        width = container.clientWidth || 800;
+        height = Math.max(260, Math.round(width / 3));
+        svg.attr('width', width).attr('height', height);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        xScale.domain([0, 1]).range([0, innerWidth]);
+        yScale.domain([0, 1]).range([innerHeight, 0]);
+
+        // Grid (horizontal)
+        gGrid.selectAll('*').remove();
+        const yTicks = yScale.ticks(6);
+        gGrid.selectAll('line')
+          .data(yTicks)
+          .join('line')
+          .attr('x1', 0)
+          .attr('x2', innerWidth)
+          .attr('y1', (d) => yScale(d))
+          .attr('y2', (d) => yScale(d))
+          .attr('stroke', gridColor)
+          .attr('stroke-width', 1)
+          .attr('shape-rendering', 'crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
+        const yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0).tickFormat(d3.format('.2f'));
+        gAxes.append('g')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(xAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+        gAxes.append('g')
+          .call(yAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+
+        // Axis labels (X and Y)
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--x')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 44)
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('Epoch');
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--y')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`) 
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('Accuracy');
+
+        overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+        hoverLine.attr('y1', 0).attr('y2', innerHeight).attr('stroke', axisColor);
+
+        // Legend inside plot (bottom-right), no background/border/shadow
+        const legendWidth = Math.min(180, Math.max(120, Math.round(innerWidth * 0.22)));
+        const legendHeight = 64;
+        gLegend
+          .attr('x', innerWidth - legendWidth + 42)
+          .attr('y', innerHeight - legendHeight - 12)
+          .attr('width', legendWidth)
+          .attr('height', legendHeight);
+        const legendRoot = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        Object.assign(legendRoot.node().style, {
+          background: 'transparent',
+          border: 'none',
+          borderRadius: '0',
+          padding: '0',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          color: 'var(--text-color)'
+        });
+        legendRoot.html(`
+          <div style="display:flex;flex-direction:column;gap:6px;">
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorBase};border-radius:2px;display:inline-block"></span>
+              <span>Baseline</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorImproved};border-radius:2px;display:inline-block"></span>
+              <span>Improved</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:0;border-top:2px dashed ${colorTarget};display:inline-block"></span>
+              <span>Target</span>
+            </div>
+          </div>
+        `);
+      }
+
+      function updatePaths() {
+        pathBase.transition().duration(200).attr('d', lineGen(yBase));
+        pathImp.transition().duration(200).attr('d', lineGen(yImp));
+        pathTgt.transition().duration(200).attr('d', lineGen(yTgt));
+      }
+
+      function updateAlpha(a) {
+        alpha = a;
+        alphaVal.textContent = a.toFixed(2);
+        yImp = yBase.map((v, i) => blend(v, yAug[i], alpha));
+        pathImp.transition().duration(80).attr('d', lineGen(yImp));
+      }
+
+      function applyDataset() {
+        computeCurves();
+        updatePaths();
+      }
+
+      // Hover interactions
+      function onMove(event) {
+        const [mx, my] = d3.pointer(event, overlay.node());
+        const xi = Math.max(0, Math.min(N - 1, Math.round(xScale.invert(mx) * (N - 1))));
+        const xpx = xScale(xs[xi]);
+        const yb = yBase[xi], yi = yImp[xi], yt = yTgt[xi];
+        hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+        hoverDotB.attr('cx', xpx).attr('cy', yScale(yb)).style('display', null);
+        hoverDotI.attr('cx', xpx).attr('cy', yScale(yi)).style('display', null);
+        hoverDotT.attr('cx', xpx).attr('cy', yScale(yt)).style('display', null);
+
+        // Tooltip content
+        const ds = datasets[datasetIndex].name;
+        tipInner.innerHTML = `<div><strong>${ds}</strong></div>` +
+          `<div><strong>x</strong> ${xs[xi].toFixed(2)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorBase};border-radius:50%;margin-right:6px;"></span><strong>Baseline</strong> ${yb.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorImproved};border-radius:50%;margin-right:6px;"></span><strong>Improved</strong> ${yi.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorTarget};border-radius:50%;margin-right:6px;"></span><strong>Target</strong> ${yt.toFixed(3)}</div>`;
+        const offsetX = 12, offsetY = 12;
+        tip.style.opacity = '1';
+        tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
+      }
+
+      function onLeave() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+        hoverLine.style('display', 'none');
+        hoverDotB.style('display', 'none');
+        hoverDotI.style('display', 'none');
+        hoverDotT.style('display', 'none');
+      }
+
+      overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+
+      // Init + controls wiring
+      computeCurves();
+      updateScales();
+      updatePaths();
+
+      // Attach controls after SVG for consistency with Plotly fragment
+      container.appendChild(controls);
+
+      selectDs.addEventListener('change', (e) => {
+        datasetIndex = parseInt(e.target.value) || 0;
+        applyDataset();
+      });
+      slider.addEventListener('input', (e) => {
+        const a = parseFloat(e.target.value) || 0;
+        updateAlpha(a);
+      });
+
+      // Resize handling
+      const render = () => {
+        updateScales();
+        updatePaths();
+      };
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => render());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+      render();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else { ensureD3(bootstrap); }
+  })();
+</script>
+

app/src/content/embeds/d3-line.html

@@ -89,8 +89,25 @@
     };
 
     const bootstrap = () => {
-      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
-      const container = (mount && mount.querySelector && mount.querySelector('.d3-line')) || document.querySelector('.d3-line');
+      const scriptEl = document.currentScript;
+      let container = null;
+
+      // Prefer the closest previous sibling with class .d3-line (local instance)
+      if (scriptEl) {
+        let el = scriptEl.previousElementSibling;
+        while (el && !(el.classList && el.classList.contains('d3-line'))) {
+          el = el.previousElementSibling;
+        }
+        if (el) container = el;
+      }
+
+      // Fallback: pick the last unmounted .d3-line in the document
+      if (!container) {
+        const candidates = Array.from(document.querySelectorAll('.d3-line'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+
       if (!container) return;
       if (container.dataset) {
         if (container.dataset.mounted === 'true') return;

app/src/env.d.ts

@@ -1 +1,6 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+
+declare module 'astro:assets' {
+  export const Image: any;
+}

app/src/styles/_base.css

@@ -48,10 +48,14 @@ html { font-size: 14px; line-height: 1.6; }
 /* Do not underline heading links inside the article (not the TOC) */
 .content-grid main h2 a,
 .content-grid main h3 a,
-.content-grid main h4 a { color: inherit; border-bottom: none; text-decoration: none; }
+.content-grid main h4 a,
+.content-grid main h5 a,
+.content-grid main h6 a { color: inherit; border-bottom: none; text-decoration: none; }
 .content-grid main h2 a:hover,
 .content-grid main h3 a:hover,
-.content-grid main h4 a:hover { color: inherit; border-bottom: none; text-decoration: none; }
+.content-grid main h4 a:hover,
+.content-grid main h5 a:hover,
+.content-grid main h6 a:hover { color: inherit; border-bottom: none; text-decoration: none; }
 
 .content-grid main ul,
 .content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }