Codex/astro mdx paper memo

.github/workflows/pages.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
 
       - name: Install dependencies

package.json

@@ -8,6 +8,9 @@
     "build": "astro build",
     "preview": "astro preview"
   },
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "dependencies": {
     "@astrojs/mdx": "latest",
     "astro": "latest"

src/components/Glossary.astro

@@ -7,13 +7,19 @@ interface Term {
 
 interface Props {
   terms: Term[];
+  language?: "ja" | "en";
 }
 
-const { terms } = Astro.props;
+const { terms, language = "ja" } = Astro.props;
+
+const placeholder =
+  language === "ja"
+    ? "例: Dice, U-Net, T2 SPACE, Focal Loss"
+    : "Example: Dice, U-Net, T2 SPACE, Focal Loss";
 ---
 
 <div class="glossary-tools">
-  <input class="search" id="termSearch" type="search" placeholder="例: Dice, U-Net, T2 SPACE, Focal Loss" />
+  <input class="search" id="termSearch" type="search" placeholder={placeholder} />
 </div>
 <div class="glossary" id="glossaryList">
   {

src/components/LabelMapping.astro

@@ -6,13 +6,27 @@ interface MappingRow {
 
 interface Props {
   rows: MappingRow[];
+  language?: "ja" | "en";
 }
 
-const { rows } = Astro.props;
+const { rows, language = "ja" } = Astro.props;
+
+const copy = {
+  ja: {
+    title: "SPIDERラベルの統合",
+    note: "ポイントは、解剖学的な個体番号を当てるのではなく、臨床的に見たい構造カテゴリを正確に塗り分けること。",
+  },
+  en: {
+    title: "SPIDER Label Mapping",
+    note: "The key point is that the model predicts clinically useful anatomical categories, not individual anatomical IDs.",
+  },
+} as const;
+
+const t = copy[language];
 ---
 
 <div class="mapping">
-  <h3>SPIDERラベルの統合</h3>
+  <h3>{t.title}</h3>
   {
     rows.map((row) => (
       <div class="map-row">
@@ -21,7 +35,5 @@ const { rows } = Astro.props;
       </div>
     ))
   }
-  <p>
-    ポイントは、解剖学的な個体番号を当てるのではなく、臨床的に見たい構造カテゴリを正確に塗り分けること。
-  </p>
+  <p>{t.note}</p>
 </div>

src/components/ResourceSection.astro

@@ -1,32 +1,56 @@
 ---
+interface Props {
+  language?: "ja" | "en";
+}
+
+const { language = "ja" } = Astro.props;
 const baseUrl = import.meta.env.BASE_URL.replace(/\/?$/, "/");
 const paperPdf = `${baseUrl}papers/paper.pdf`;
 const datasetPdf = `${baseUrl}papers/Dataset_Paper.pdf`;
+
+const copy = {
+  ja: {
+    openPdf: "別タブで開く",
+    sourceNote: "出版社ページで概要、DOI、引用情報を確認する。",
+    mainPdfNote: "このメモの元になっているメイン論文PDF。",
+    datasetNote: "SPIDERデータセットの詳細を確認する補助資料。",
+    linksLabel: "論文資料リンク",
+  },
+  en: {
+    openPdf: "Open in new tab",
+    sourceNote: "Publisher page for the abstract, DOI, and citation details.",
+    mainPdfNote: "Local copy of the main paper used for this memo.",
+    datasetNote: "Supplementary source for the SPIDER dataset details.",
+    linksLabel: "Paper source links",
+  },
+} as const;
+
+const t = copy[language];
 ---
 
 <div class="resource-layout">
   <div class="pdf-panel">
     <div class="pdf-head">
       <span>Main Paper PDF</span>
-      <a class="button" href={paperPdf} target="_blank" rel="noopener noreferrer">別タブで開く</a>
+      <a class="button" href={paperPdf} target="_blank" rel="noopener noreferrer">{t.openPdf}</a>
     </div>
     <iframe class="pdf-frame" title="Ahmed et al. 2025 paper PDF" src={`${paperPdf}#toolbar=1`}></iframe>
   </div>
-  <aside class="resource-panel" aria-label="論文資料リンク">
+  <aside class="resource-panel" aria-label={t.linksLabel}>
     <a class="resource-link" href="https://www.sciencedirect.com/science/article/pii/S2666827025000180" target="_blank" rel="noopener noreferrer">
       <small>ScienceDirect</small>
       <strong>Pioneering Precision in Lumbar Spine MRI Segmentation</strong>
-      <span>出版社ページで概要、DOI、引用情報を確認する。</span>
+      <span>{t.sourceNote}</span>
     </a>
     <a class="resource-link" href={paperPdf} target="_blank" rel="noopener noreferrer">
       <small>Local PDF</small>
       <strong>paper.pdf</strong>
-      <span>このメモの元になっているメイン論文PDF。</span>
+      <span>{t.mainPdfNote}</span>
     </a>
     <a class="resource-link" href={datasetPdf} target="_blank" rel="noopener noreferrer">
       <small>Dataset PDF</small>
       <strong>Dataset_Paper.pdf</strong>
-      <span>SPIDERデータセットの詳細を確認する補助資料。</span>
+      <span>{t.datasetNote}</span>
     </a>
   </aside>
 </div>

src/components/SpineVisual.astro

@@ -1,4 +1,29 @@
-<div class="visual reveal" aria-label="椎体、脊柱管、椎間板のセグメンテーション模式図">
+---
+interface Props {
+  language?: "ja" | "en";
+}
+
+const { language = "ja" } = Astro.props;
+
+const labels = {
+  ja: {
+    vertebrae: "椎体 Vertebrae",
+    canal: "脊柱管 Spinal Canal",
+    discs: "椎間板 IVDs",
+    aria: "椎体、脊柱管、椎間板のセグメンテーション模式図",
+  },
+  en: {
+    vertebrae: "Vertebrae",
+    canal: "Spinal Canal",
+    discs: "Intervertebral Discs",
+    aria: "Segmentation diagram showing vertebrae, spinal canal, and intervertebral discs",
+  },
+} as const;
+
+const t = labels[language];
+---
+
+<div class="visual reveal" aria-label={t.aria}>
   <div class="scan-label">T2 SPACE segmentation map</div>
   <div class="spine-map">
     <div class="vertebrae-stack" aria-hidden="true">
@@ -19,8 +44,8 @@
     </div>
   </div>
   <div class="legend">
-    <span><i class="dot" style="--c: var(--vertebrae)"></i>椎体 Vertebrae</span>
-    <span><i class="dot" style="--c: var(--canal)"></i>脊柱管 Spinal Canal</span>
-    <span><i class="dot" style="--c: var(--disc)"></i>椎間板 IVDs</span>
+    <span><i class="dot" style="--c: var(--vertebrae)"></i>{t.vertebrae}</span>
+    <span><i class="dot" style="--c: var(--canal)"></i>{t.canal}</span>
+    <span><i class="dot" style="--c: var(--disc)"></i>{t.discs}</span>
   </div>
 </div>

src/content/paper-memo-en.mdx

@@ -0,0 +1,151 @@
+---
+title: "Lumbar MRI Segmentation Paper Memo"
+description: "An English presentation page for Ahmed et al. (2025), summarizing the paper, dataset, model, metrics, and project direction."
+---
+
+import Section from "../components/Section.astro";
+import ResourceSection from "../components/ResourceSection.astro";
+import KpiGrid from "../components/KpiGrid.astro";
+import DataFlow from "../components/DataFlow.astro";
+import LabelMapping from "../components/LabelMapping.astro";
+import ModelBoard from "../components/ModelBoard.astro";
+import NoteGrid from "../components/NoteGrid.astro";
+import MetricsTable from "../components/MetricsTable.astro";
+import Glossary from "../components/Glossary.astro";
+import Timeline from "../components/Timeline.astro";
+import Callout from "../components/Callout.astro";
+
+<Section
+  id="resources"
+  title="Paper PDF and Links"
+  summary="This section keeps the main paper, the ScienceDirect page, and the SPIDER dataset paper in one place for presentation preparation."
+>
+  <ResourceSection language="en" />
+</Section>
+
+<Section
+  id="important"
+  title="Key Facts"
+  summary="The paper is important because it turns lumbar MRI segmentation into a cleaner four-class learning problem and reports very high performance on high-resolution T2 SPACE scans."
+>
+  <KpiGrid
+    items={[
+      { label: "Dataset", value: "218", text: "Number of patients in the SPIDER lumbar MRI dataset." },
+      { label: "Series", value: "447", text: "MRI series including T1, T2, and T2 SPACE sequences." },
+      { label: "Classes", value: "4", text: "Background, vertebrae, spinal canal, and intervertebral discs." },
+      { label: "Best Dice", value: "0.97", text: "Best reported performance on T2 SPACE images." },
+    ]}
+  />
+</Section>
+
+<Section
+  id="data"
+  title="Data and Preprocessing"
+  summary="The original SPIDER data is stored as 3D MHA volumes. The paper converts it into 2D slices and merges detailed labels into four clinically useful classes."
+>
+  <div class="split">
+    <DataFlow
+      items={[
+        { title: "Extract 2D slices from 3D MHA volumes", text: "This reduces GPU memory cost and makes the data suitable for a 2D U-Net pipeline." },
+        { title: "Merge detailed labels into four classes", text: "Individual vertebra and disc IDs are converted into broader anatomical categories." },
+        { title: "Filter imbalanced slices", text: "Slices dominated by background or missing key structures are removed to stabilize training." },
+        { title: "Compare T1, T2, and T2 SPACE", text: "T2 SPACE achieves the best result because its higher resolution makes anatomical boundaries clearer." },
+      ]}
+    />
+    <LabelMapping
+      language="en"
+      rows={[
+        { source: "0", target: "Background" },
+        { source: "1-99", target: "Vertebrae" },
+        { source: "100", target: "Spinal Canal" },
+        { source: "200+", target: "Intervertebral Discs" },
+      ]}
+    />
+  </div>
+</Section>
+
+<Section
+  id="model"
+  title="Model and Algorithm"
+  summary="The proposed model is based on U-Net. It compresses image features in the encoder and reconstructs a pixel-level segmentation map in the decoder."
+>
+  <ModelBoard
+    blocks={[
+      { mark: "E", title: "Encoder", text: "Convolution, Batch Normalization, Leaky ReLU, and Max Pooling extract increasingly abstract features." },
+      { mark: "B", title: "Bottleneck", text: "A 512-channel layer captures complex anatomical patterns and boundary information." },
+      { mark: "S", title: "Skip Connection", text: "Fine spatial information is passed from encoder to decoder to preserve boundaries." },
+      { mark: "D", title: "Decoder", text: "Transposed convolution restores resolution and reconstructs class-specific masks." },
+      { mark: "4", title: "Softmax", text: "Each pixel is assigned probabilities over the four output classes." },
+    ]}
+  />
+  <div class="loss-equation">Combined Loss = 0.6 × Focal Loss + 0.4 × Dice Loss</div>
+  <NoteGrid
+    notes={[
+      { title: "Leaky ReLU", text: "Keeps a small gradient for negative inputs and reduces the risk of inactive neurons." },
+      { title: "Glorot Initialization", text: "Stabilizes the starting weight distribution and helps gradients flow through deeper layers." },
+      { title: "Focal + Dice", text: "Balances hard-pixel learning with direct optimization of mask overlap." },
+    ]}
+  />
+</Section>
+
+<Section
+  id="metrics"
+  title="Performance Metrics"
+  summary="Dice is the main metric. A value closer to 1 means stronger overlap between the predicted mask and the ground-truth annotation."
+>
+  <MetricsTable
+    rows={[
+      { structure: "Intervertebral Discs", dice: "0.9688", iou: "0.9476", meaning: "Thin disc structures are segmented with high overlap." },
+      { structure: "Vertebrae", dice: "0.9712", iou: "0.9461", meaning: "Large bony structures are segmented consistently." },
+      { structure: "Spinal Canal", dice: "0.9671", iou: "0.9501", meaning: "The long canal-like structure remains accurate despite its shape." },
+    ]}
+  />
+  <NoteGrid
+    notes={[
+      { title: "Dice", text: "Measures overlap between prediction and ground truth. It is the easiest main metric to explain." },
+      { title: "IoU", text: "Intersection divided by union. It is usually stricter than Dice." },
+      { title: "ASD / NSD", text: "Boundary-distance metrics used to evaluate how far predicted surfaces deviate from the annotation." },
+    ]}
+  />
+  <Callout>
+    <strong>Presentation note:</strong>
+    Dice around 0.97 is very high, but the reported result should be discussed carefully because test-set details and preprocessing choices affect generalization.
+  </Callout>
+</Section>
+
+<Section
+  id="glossary"
+  title="Terminology"
+  summary="Use this section to quickly explain the technical terms during an English presentation."
+>
+  <Glossary
+    language="en"
+    terms={[
+      { key: "segmentation semantic segmentation", title: "Segmentation", text: "A pixel-level classification task. In this project, each pixel is assigned to background, vertebrae, spinal canal, or discs." },
+      { key: "u-net unet encoder decoder", title: "U-Net", text: "A widely used medical image segmentation architecture with an encoder, decoder, and skip connections." },
+      { key: "t2 space high resolution mri", title: "T2 SPACE", text: "A high-resolution 3D T2-weighted MRI sequence. It produces clearer anatomical boundaries." },
+      { key: "dice coefficient", title: "Dice Coefficient", text: "A measure of overlap between prediction and ground truth. Higher is better, with 1 meaning perfect overlap." },
+      { key: "iou intersection over union", title: "IoU", text: "Intersection over Union. It divides the overlapping region by the total combined region." },
+      { key: "focal loss", title: "Focal Loss", text: "A loss function that gives more weight to hard-to-classify pixels." },
+      { key: "dice loss", title: "Dice Loss", text: "A loss function that directly optimizes the overlap between predicted and true masks." },
+      { key: "leaky relu dying relu", title: "Leaky ReLU", text: "An activation function that keeps a small gradient for negative values." },
+      { key: "glorot xavier initialization", title: "Glorot / Xavier Initialization", text: "A weight initialization method designed to keep training stable in deep networks." },
+      { key: "class imbalance", title: "Class Imbalance", text: "A situation where some classes, such as background, dominate the image and can bias learning." },
+    ]}
+  />
+</Section>
+
+<Section
+  id="todo"
+  title="Graduation Project Plan"
+  summary="For the project, the first goal is reproduction. The second goal is improvement through model, loss, augmentation, and error-analysis experiments."
+>
+  <Timeline
+    items={[
+      { stage: "Stage 1", title: "Reproduce the paper", text: "Implement the SPIDER preprocessing pipeline, four-class labels, Modified U-Net, and Combined Loss." },
+      { stage: "Stage 2", title: "Improve the method", text: "Compare Attention U-Net, U-Net++, Boundary Loss, Tversky Loss, and stronger augmentation." },
+      { stage: "Stage 3", title: "Visualize and analyze", text: "Overlay predictions on MRI images and identify which structures or sequences fail most often." },
+      { stage: "Stage 4", title: "Prepare the presentation", text: "Explain the clinical motivation, technical method, reproduction result, limitations, and proposed improvements." },
+    ]}
+  />
+</Section>