update author parts, add input label training embed and data packing embed

app/src/components/Hero.astro

@@ -405,7 +405,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     display: flex;
     flex-direction: column;
     gap: 8px;
-    max-width: 250px;
+    max-width: 400px;
   }
   .meta-container-cell h3 {
     margin: 0;

app/src/content/embeds/aws-bandwidth-bottleneck.html

@@ -62,7 +62,7 @@
   }
 
   .aws-topology-container.fixed-height {
-    height: 800px;
+    height: 850px;
   }
 
   .aws-topology-container svg {
@@ -74,6 +74,12 @@
     transition: opacity 0.2s ease;
   }
 
+  /* Add drop shadow to all links */
+  .aws-topology-container svg g[data-link-type] line,
+  .aws-topology-container svg g[data-link-type] path {
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+  }
+
   .aws-topology-controls {
     position: absolute;
     bottom: 10px;
@@ -115,6 +121,13 @@
     flex-shrink: 0;
   }
 
+  /* Hide controls on mobile */
+  @media (max-width: 768px) {
+    .aws-topology-controls {
+      display: none;
+    }
+  }
+
   .aws-topology-legend {
     position: absolute;
     bottom: 10px;
@@ -1183,12 +1196,15 @@
     // ============================================================================
     // DRAW SINGLE SYSTEM (variable number of ensembles)
     // ============================================================================
-    function drawSystem(renderer, systemIndex, systemCenterX, cpuY, nvswitchY, ensembleCount = 1, drawEfaCrossLinks = false) {
+    function drawSystem(renderer, systemIndex, systemCenterX, cpuY, nvswitchY, ensembleCount = 1, systemCount = 1, drawEfaCrossLinks = false) {
+      // For internode (2 systems), only show 1 ensemble per system for clarity
+      const ensemblesToShow = (systemCount === 2) ? 1 : ensembleCount;
+
       // Calculate ensemble width (4 groups)
       const ensembleWidth = CONFIG.groupCount * CONFIG.gaps.horizontal;
 
-      // Calculate system bounding box
-      const systemWidth = ensembleCount * ensembleWidth + (ensembleCount - 1) * CONFIG.gaps.ensembleGap;
+      // Calculate system bounding box based on actual ensembles shown
+      const systemWidth = ensemblesToShow * ensembleWidth + (ensemblesToShow - 1) * CONFIG.gaps.ensembleGap;
       const systemHeight = CONFIG.sizes.cpu + CONFIG.gaps.cpuToPcie + CONFIG.sizes.pcie.height +
         CONFIG.gaps.pcieToGpu + CONFIG.sizes.gpu.height +
         CONFIG.gaps.gpuToNvswitch + CONFIG.sizes.nvswitch.height;
@@ -1227,11 +1243,11 @@
       }
 
       // Draw each ensemble in the system
-      for (let ensIndex = 0; ensIndex < ensembleCount; ensIndex++) {
+      for (let ensIndex = 0; ensIndex < ensemblesToShow; ensIndex++) {
         const ensembleGlobalIndex = systemIndex * CONFIG.ensembleCount + ensIndex;
 
         // Position ensemble within system
-        const ensembleOffsetX = (ensIndex - (ensembleCount - 1) / 2) * (ensembleWidth + CONFIG.gaps.ensembleGap);
+        const ensembleOffsetX = (ensIndex - (ensemblesToShow - 1) / 2) * (ensembleWidth + CONFIG.gaps.ensembleGap);
         const ensembleCenterX = systemCenterX + ensembleOffsetX;
 
         drawEnsemble(renderer, ensembleGlobalIndex, ensembleCenterX, cpuY, nvswitchY);
@@ -1239,8 +1255,8 @@
 
       // Draw NUMA node borders (one per ensemble) if 2 ensembles
       if (ensembleCount === 2) {
-        for (let ensIndex = 0; ensIndex < ensembleCount; ensIndex++) {
-          const ensembleOffsetX = (ensIndex - (ensembleCount - 1) / 2) * (ensembleWidth + CONFIG.gaps.ensembleGap);
+        for (let ensIndex = 0; ensIndex < ensemblesToShow; ensIndex++) {
+          const ensembleOffsetX = (ensIndex - (ensemblesToShow - 1) / 2) * (ensembleWidth + CONFIG.gaps.ensembleGap);
           const ensembleCenterX = systemCenterX + ensembleOffsetX;
 
           // Calculate NUMA node bounding box (same as system but for single ensemble)
@@ -1285,8 +1301,8 @@
       const offset = getLinkOffset(bw.width);
 
       // Connect all GPUs in the system to all NVSwitches in the system
-      const totalGpusInSystem = ensembleCount * CONFIG.groupCount;
-      const totalNVSwitchesInSystem = ensembleCount * CONFIG.nvswitchCount;
+      const totalGpusInSystem = ensemblesToShow * CONFIG.groupCount;
+      const totalNVSwitchesInSystem = ensemblesToShow * CONFIG.nvswitchCount;
 
       for (let gpuIndex = 0; gpuIndex < totalGpusInSystem; gpuIndex++) {
         const gpuGlobalIndex = systemIndex * CONFIG.ensembleCount * CONFIG.groupCount + gpuIndex;
@@ -1298,8 +1314,8 @@
         }
       }
 
-      // Draw CPU-to-CPU link between ensembles (only if 2 ensembles)
-      if (ensembleCount === 2) {
+      // Draw CPU-to-CPU link between ensembles (only if 2 ensembles visible)
+      if (ensemblesToShow === 2) {
         const cpu0Id = systemIndex * CONFIG.ensembleCount === 0 ? 'cpu' : `cpu-${systemIndex * CONFIG.ensembleCount}`;
         const cpu1Id = `cpu-${systemIndex * CONFIG.ensembleCount + 1}`;
 
@@ -1310,8 +1326,8 @@
 
         renderer.drawLink(cpu0Id, cpu1Id, color, bw.width, 'right', 'left', offset, 0, 1, 0, 1, 'cpu', '16GB/s');
 
-        // Draw EFA-to-EFA link between ensembles (only if explicitly requested)
-        if (drawEfaCrossLinks) {
+        // Draw EFA-to-EFA link between ensembles (only if 2 ensembles visible and explicitly requested)
+        if (ensemblesToShow === 2 && drawEfaCrossLinks) {
           const efaExt0Id = systemIndex * CONFIG.ensembleCount * CONFIG.groupCount === 0 ? 'efa-external' : `efa-external-${systemIndex * CONFIG.ensembleCount * CONFIG.groupCount}`;
           const efaExt1Id = `efa-external-${systemIndex * CONFIG.ensembleCount * CONFIG.groupCount + CONFIG.groupCount}`;
 
@@ -1498,7 +1514,7 @@
 
         // Only draw EFA cross-links for intranode EFA path
         const drawEfaCrossLinks = currentActivePathId === 'gpu-gpu-efa-intranode';
-        drawSystem(renderer, sysIndex, centerX, cpuY, nvswitchY, ensembleCount, drawEfaCrossLinks);
+        drawSystem(renderer, sysIndex, centerX, cpuY, nvswitchY, ensembleCount, systemCount, drawEfaCrossLinks);
       }
 
       // Draw EFA cross-link between systems (for internode)
@@ -1563,10 +1579,35 @@
       currentSystemCount = systemCount;
     }
 
+    // ============================================================================
+    // REAL BANDWIDTH HELPERS
+    // ============================================================================
+    function getRealBandwidthForPath(pathId) {
+      const pathToRealBandwidth = {
+        'cpu-gpu': { value: '14.2', unit: 'GB/s' },
+        'gpu-gpu-cpu': { value: '14.2', unit: 'GB/s' },
+        'gpu-gpu-nvswitch': { value: '786', unit: 'GB/s' },
+        'gpu-gpu-efa-intranode': { value: '480', unit: 'GB/s' },
+        'gpu-gpu-efa-internode': { value: '42', unit: 'GB/s' },
+        'gpu-storage': { value: '26', unit: 'GB/s' },
+        'cpu-storage': { value: '26', unit: 'GB/s' },
+        'gpu-cpu-storage': { value: '14.2', unit: 'GB/s' }
+      };
+
+      const bandwidth = pathToRealBandwidth[pathId];
+      if (bandwidth) {
+        return {
+          value: bandwidth.value,
+          unit: bandwidth.unit
+        };
+      }
+      return null;
+    }
+
     // ============================================================================
     // HIGHLIGHT HELPERS
     // ============================================================================
-    function highlightPath(path, pathLabel = '') {
+    function highlightPath(path, pathLabel = '', pathId = '') {
       const svg = getElement('aws-topology-container').querySelector('svg');
       if (!svg) return;
 
@@ -1587,6 +1628,20 @@
         });
       });
 
+      // Dim all cross-link elements (EFA internode/intranode links)
+      svg.querySelectorAll('g[data-link-type="efa-crosslink"], g[data-link-type="efa-crosslink-internode"]').forEach(el => {
+        el.style.opacity = '0.5';
+        el.querySelectorAll('line, path').forEach(linkElement => {
+          linkElement.style.opacity = '0.2';
+        });
+        el.querySelectorAll('[data-link-circle]').forEach(circle => {
+          circle.style.opacity = '0';
+        });
+        el.querySelectorAll('text').forEach(text => {
+          text.style.opacity = '0.15';
+        });
+      });
+
       // Highlight path nodes
       path.nodes.forEach(nodeId => {
         let nodeEl = svg.querySelector(`g[id="${nodeId}"]`);
@@ -1630,6 +1685,23 @@
         });
       });
 
+      // Highlight cross-link elements if they match the current path
+      const currentPathId = currentActivePathId;
+      if (currentPathId === 'gpu-gpu-efa-intranode' || currentPathId === 'gpu-gpu-efa-internode') {
+        svg.querySelectorAll('g[data-link-type="efa-crosslink"], g[data-link-type="efa-crosslink-internode"]').forEach(linkGroup => {
+          linkGroup.style.opacity = '1';
+          linkGroup.querySelectorAll('line, path').forEach(linkElement => {
+            linkElement.style.opacity = '1';
+          });
+          linkGroup.querySelectorAll('[data-link-circle]').forEach(circle => {
+            circle.style.opacity = '1';
+          });
+          linkGroup.querySelectorAll('text').forEach(text => {
+            text.style.opacity = '1';
+          });
+        });
+      }
+
       // Calculate and show bottleneck (minimum bandwidth in the path)
       let minBandwidth = Infinity;
       let minBandwidthValue = null;
@@ -1678,6 +1750,7 @@
       const bottleneckEl = getElement('aws-topology-bottleneck');
       const bottleneckValueEl = bottleneckEl.querySelector('.bottleneck-value');
       const bottleneckPathEl = bottleneckEl.querySelector('.bottleneck-path');
+      const bottleneckLabelEl = bottleneckEl.querySelector('.bottleneck-label');
       const realBandwidthsEl = bottleneckEl.querySelector('.real-bandwidths');
 
       // Check if real bandwidths are enabled
@@ -1685,11 +1758,28 @@
       const showRealBandwidths = embedConfig.showRealBandwidths;
 
       if (showRealBandwidths) {
-        // When real bandwidths are shown, display contextual real bandwidths
-        displayContextualRealBandwidths(pathId, pathLabel);
-        bottleneckEl.classList.add('visible');
+        // When real bandwidths are shown, display real bandwidth value directly
+        const realBandwidth = getRealBandwidthForPath(pathId);
+        if (realBandwidth) {
+          bottleneckValueEl.textContent = realBandwidth.value;
+          bottleneckPathEl.textContent = `for ${pathLabel}`;
+          bottleneckLabelEl.textContent = 'Real Bandwidth';
+          bottleneckEl.classList.add('visible');
+        } else {
+          // Fallback if no real bandwidth found
+          bottleneckValueEl.textContent = '?';
+          bottleneckPathEl.textContent = `for ${pathLabel}`;
+          bottleneckLabelEl.textContent = 'Real Bandwidth';
+          bottleneckEl.classList.add('visible');
+        }
+        // Hide the detailed real bandwidths list
+        const realBandwidthsEl = bottleneckEl.querySelector('.real-bandwidths');
+        if (realBandwidthsEl) {
+          realBandwidthsEl.style.display = 'none';
+        }
       } else {
         // Normal bottleneck display
+        bottleneckLabelEl.textContent = 'Bandwidth Max';
         if (minBandwidthValue) {
           const value = minBandwidthValue.replace('GB/s', '');
           // For EFA (12.5GB/s), add ×4 to indicate 4 links
@@ -1710,10 +1800,11 @@
       const svg = getElement('aws-topology-container').querySelector('svg');
       if (!svg) return;
 
+      // Reset all node and link elements
       svg.querySelectorAll('g[data-node-type], g[data-link-type]').forEach(el => {
         el.style.opacity = '1';
         // Reset line opacity
-        el.querySelectorAll('line').forEach(line => {
+        el.querySelectorAll('line, path').forEach(line => {
           line.style.opacity = '1';
         });
         // Reset circle opacity
@@ -1726,6 +1817,20 @@
         });
       });
 
+      // Reset all cross-link elements (EFA internode/intranode links)
+      svg.querySelectorAll('g[data-link-type="efa-crosslink"], g[data-link-type="efa-crosslink-internode"]').forEach(el => {
+        el.style.opacity = '1';
+        el.querySelectorAll('line, path').forEach(line => {
+          line.style.opacity = '1';
+        });
+        el.querySelectorAll('[data-link-circle]').forEach(circle => {
+          circle.style.opacity = '1';
+        });
+      });
+
+      // Clear current active path to ensure EFA cross-links are not drawn
+      currentActivePathId = null;
+
       // Reset legend opacity
       const legendContainer = getElement('aws-topology-legend');
       if (legendContainer) {
@@ -1736,17 +1841,21 @@
 
       // Hide bottleneck (unless real bandwidths are enabled)
       const bottleneckEl = getElement('aws-topology-bottleneck');
+      const bottleneckLabelEl = bottleneckEl.querySelector('.bottleneck-label');
       const embedConfig = readEmbedConfig();
       const showRealBandwidths = embedConfig.showRealBandwidths;
 
       if (!showRealBandwidths) {
+        bottleneckLabelEl.textContent = 'Bandwidth Max';
         bottleneckEl.classList.remove('visible');
       } else {
-        // When real bandwidths are enabled, show all bandwidths when no path is active
+        // When real bandwidths are enabled, hide the module when no path is active
+        bottleneckLabelEl.textContent = 'Real Bandwidth';
+        bottleneckEl.classList.remove('visible');
+        // Hide the detailed real bandwidths list
         const realBandwidthsEl = bottleneckEl.querySelector('.real-bandwidths');
         if (realBandwidthsEl) {
-          realBandwidthsEl.style.display = 'block';
-          setupRealBandwidthsDisplay();
+          realBandwidthsEl.style.display = 'none';
         }
       }
     }
@@ -1900,12 +2009,18 @@
       // Setup real bandwidths display if enabled
       if (embedConfig.showRealBandwidths) {
         const bottleneckEl = getElement('aws-topology-bottleneck');
+        const bottleneckLabelEl = bottleneckEl.querySelector('.bottleneck-label');
         const realBandwidthsEl = bottleneckEl.querySelector('.real-bandwidths');
+
+        // Change label to "Real Bandwidth"
+        bottleneckLabelEl.textContent = 'Real Bandwidth';
+
+        // Hide the detailed real bandwidths list initially
         if (realBandwidthsEl) {
-          realBandwidthsEl.style.display = 'block';
-          setupRealBandwidthsDisplay();
+          realBandwidthsEl.style.display = 'none';
         }
-        bottleneckEl.classList.add('visible');
+        // Don't show the module initially - only when a path is selected
+        bottleneckEl.classList.remove('visible');
       }
 
       drawTopology();
@@ -2035,10 +2150,12 @@
 
                 // Wait for fade out to complete, then redraw
                 setTimeout(() => {
+                  // Set active path BEFORE drawing topology so EFA cross-links are created
+                  currentActivePathId = pathId;
                   drawTopology(path.requiredEnsembles, path.requiredSystems);
 
                   // Highlight BEFORE fade in (while still invisible)
-                  highlightPath(path, path.label);
+                  highlightPath(path, path.label, pathId);
 
                   // Then fade in with highlight already applied
                   requestAnimationFrame(() => {
@@ -2046,14 +2163,20 @@
                   });
                 }, 150);  // Wait for CSS transition to complete
               } else {
+                // Set active path for EFA cross-links even without redraw
+                currentActivePathId = pathId;
                 // No redraw needed, just highlight immediately
-                highlightPath(path, path.label);
+                highlightPath(path, path.label, pathId);
               }
             } else {
               // Button was active, now deactivate: reset to default (2 ensembles, 1 system)
               currentActivePathId = null; // Clear active path
 
-              if (currentEnsembleCount !== 2 || currentSystemCount !== 1) {
+              // Always redraw when deactivating EFA paths to remove cross-links
+              const isEfaPath = pathId === 'gpu-gpu-efa-intranode' || pathId === 'gpu-gpu-efa-internode';
+              const needsRedraw = currentEnsembleCount !== 2 || currentSystemCount !== 1 || isEfaPath;
+
+              if (needsRedraw) {
                 const container = getElement('aws-topology-container');
                 container.style.opacity = '0';
 
@@ -2094,7 +2217,7 @@
           }
 
           // Apply highlight immediately (before fade in)
-          highlightPath(path, path.label);
+          highlightPath(path, path.label, initialPathId);
         }
       }
 

app/src/content/embeds/data-packing.html

@@ -3,37 +3,52 @@
     .d3-data-packing {
         font-family: 'Arial', sans-serif;
         margin: 0;
-        padding: 20px;
-        background-color: #f5f5f5;
     }
 
     .d3-data-packing .container {
         max-width: 1000px;
         margin: 0 auto;
-        background: white;
         border-radius: 10px;
-        padding: 30px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .d3-data-packing .sections-container {
+        display: flex;
+        gap: 20px;
+    }
+
+    @media (max-width: 768px) {
+        .d3-data-packing .sections-container {
+            flex-direction: column;
+            gap: 30px;
+        }
     }
 
     .d3-data-packing .section {
-        margin-bottom: 40px;
+        flex: 1;
+        margin-bottom: 0;
     }
 
     .d3-data-packing .section-title {
-        font-size: 24px;
+        font-size: 16px;
         font-weight: bold;
-        margin-bottom: 20px;
+        color: var(--text-color, #333);
+        margin: 0 auto 20px auto;
         text-align: center;
-        color: #333;
+        width: 100%;
+        display: block;
     }
 
     .d3-data-packing .dataset {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
+        gap: 3px;
+    }
+
+    .d3-data-packing .dataset-row {
+        display: flex;
         gap: 3px;
         justify-content: center;
-        margin-bottom: 20px;
+        flex-wrap: wrap;
     }
 
     .d3-data-packing .grid {
@@ -46,7 +61,7 @@
     .d3-data-packing .block {
         width: 30px;
         height: 30px;
-        border: 2px solid #333;
+        border: none;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -54,39 +69,42 @@
         font-size: 10px;
         font-weight: bold;
         color: white;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
     }
 
     .d3-data-packing .red {
-        background-color: #e74c3c;
+        background-color: var(--color-0);
     }
 
     .d3-data-packing .orange {
-        background-color: #f39c12;
+        background-color: var(--color-1);
     }
 
     .d3-data-packing .yellow {
-        background-color: #f1c40f;
+        background-color: var(--color-2);
     }
 
     .d3-data-packing .green {
-        background-color: #2ecc71;
+        background-color: var(--color-3);
+    }
+
+    .d3-data-packing .lightgreen {
+        background-color: var(--color-4);
     }
 
     .d3-data-packing .lightblue {
-        background-color: #3498db;
+        background-color: var(--color-5);
     }
 
     .d3-data-packing .blue {
-        background-color: #2980b9;
+        background-color: var(--color-6);
     }
 
     .d3-data-packing .purple {
-        background-color: #9b59b6;
+        background-color: var(--color-7);
     }
 
     .d3-data-packing .pink {
-        background-color: #e91e63;
+        background-color: var(--color-8);
     }
 
     .d3-data-packing .gray {
@@ -94,36 +112,17 @@
     }
 
     .d3-data-packing .packing-false {
+        display: grid;
         grid-template-columns: repeat(7, 1fr);
+        gap: 3px;
+        max-width: calc(7 * 30px + 6 * 3px);
     }
 
     .d3-data-packing .packing-true {
+        display: grid;
         grid-template-columns: repeat(7, 1fr);
-    }
-
-    .d3-data-packing .description {
-        text-align: center;
-        margin-top: 15px;
-        color: #666;
-        font-size: 14px;
-    }
-
-    .d3-data-packing .efficiency {
-        background: #ecf0f1;
-        padding: 15px;
-        border-radius: 8px;
-        margin-top: 20px;
-        text-align: center;
-    }
-
-    .d3-data-packing .efficiency h3 {
-        margin: 0 0 10px 0;
-        color: #2c3e50;
-    }
-
-    .d3-data-packing .efficiency p {
-        margin: 5px 0;
-        color: #34495e;
+        gap: 3px;
+        max-width: calc(7 * 30px + 6 * 3px);
     }
 </style>
 <script>
@@ -142,79 +141,121 @@
                 container.dataset.mounted = 'true';
             }
 
+            // Apply categorical color palette
+            const applyColorPalette = () => {
+                try {
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        const colors = window.ColorPalettes.getColors('categorical', 9);
+                        colors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    } else {
+                        // Fallback to CSS variables or default colors
+                        const fallbackColors = [
+                            'var(--primary-color, #E889AB)',
+                            '#4EA5B7', '#E38A42', '#CEC0FA', '#9B59B6',
+                            '#16A085', '#1f77b4', '#ff7f0e', '#2ca02c'
+                        ];
+                        fallbackColors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    }
+                } catch (e) {
+                    console.warn('ColorPalettes not available, using fallback colors');
+                }
+            };
+
+            // Apply colors immediately and on theme changes
+            applyColorPalette();
+            if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') {
+                window.ColorPalettes.refresh();
+            }
+
+            // Data structure - only colored blocks, no gray blocks
+            const dataset = [
+                { color: 'red', count: 7, label: 'R' },
+                { color: 'orange', count: 3, label: 'O' },
+                { color: 'yellow', count: 4, label: 'Y' },
+                { color: 'lightgreen', count: 6, label: 'G' },
+                { color: 'lightblue', count: 12, label: 'L' },
+                { color: 'purple', count: 6, label: 'P' },
+                { color: 'pink', count: 4, label: 'K' }
+            ];
+
+            const packingFalse = [
+                { color: 'red', count: 7, label: 'R' },
+                { color: 'orange', count: 3, label: 'O' },
+                { color: 'gray', count: 4, label: '-' },
+                { color: 'yellow', count: 4, label: 'Y' },
+                { color: 'gray', count: 3, label: '-' },
+                { color: 'lightgreen', count: 6, label: 'G' },
+                { color: 'gray', count: 1, label: '-' },
+                { color: 'lightblue', count: 7, label: 'L' },
+                { color: 'lightblue', count: 3, label: 'L' },
+                { color: 'gray', count: 4, label: '-' },
+                { color: 'purple', count: 6, label: 'P' },
+                { color: 'gray', count: 1, label: '-' },
+                { color: 'pink', count: 4, label: 'K' },
+                { color: 'gray', count: 3, label: '-' }
+            ];
+
+            const packingTrue = [
+                // Ligne 1: 7 R
+                { color: 'red', count: 7, label: 'R' },
+                // Ligne 2: 3 O + 4 Y (combinaison optimisée)
+                { color: 'orange', count: 3, label: 'O' },
+                { color: 'yellow', count: 4, label: 'Y' },
+                // Ligne 3: 6 G + 1 gris
+                { color: 'lightgreen', count: 6, label: 'G' },
+                { color: 'gray', count: 1, label: '-' },
+                // Ligne 4: 7 L (rangée complète)
+                { color: 'lightblue', count: 7, label: 'L' },
+                // Ligne 5: 3 L + 4 K (combinaison optimisée)
+                { color: 'lightblue', count: 3, label: 'L' },
+                { color: 'pink', count: 4, label: 'K' },
+                // Ligne 6: 6 P + 1 gris
+                { color: 'purple', count: 6, label: 'P' },
+                { color: 'gray', count: 1, label: '-' }
+            ];
+
+            // Helper function to create blocks
+            const createBlocks = (blocks) => {
+                return blocks.map(block =>
+                    block.count > 0 ? `<div class="block ${block.color}"></div>`.repeat(block.count) : ''
+                ).join('');
+            };
+
+            // Helper function to create dataset rows
+            const createDatasetRows = (dataset) => {
+                return dataset.map(item =>
+                    `<div class="dataset-row">${createBlocks([item])}</div>`
+                ).join('');
+            };
+
             // Create the HTML structure
             container.innerHTML = `
         <div class="container">
-          <div class="section">
-            <h2 class="section-title">Dataset</h2>
-            <div class="dataset">
-              <!-- 7 red blocks -->
-              <div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div>
-              <!-- 3 orange blocks -->
-              <div class="block orange">O</div><div class="block orange">O</div><div class="block orange">O</div>
-              <!-- 4 yellow blocks -->
-              <div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div>
-              <!-- 7 green blocks -->
-              <div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div>
-              <!-- 10 light blue blocks -->
-              <div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div>
-              <!-- 3 blue blocks -->
-              <div class="block blue">B</div><div class="block blue">B</div><div class="block blue">B</div>
-              <!-- 5 purple blocks -->
-              <div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div>
-              <!-- 3 pink blocks -->
-              <div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div>
+          <div class="sections-container">
+            <div class="section">
+              <label class="section-title">Dataset</label>
+              <div class="dataset">
+                ${createDatasetRows(dataset)}
+              </div>
             </div>
-            <div class="description">42 unorganized data blocks</div>
-          </div>
 
-          <div class="section">
-            <h2 class="section-title">packing=False</h2>
-            <div class="grid packing-false">
-              <!-- Row 1: 7 red blocks -->
-              <div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div>
-              <!-- Row 2: 3 orange + 4 gray -->
-              <div class="block orange">O</div><div class="block orange">O</div><div class="block orange">O</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div>
-              <!-- Row 3: 4 yellow + 3 gray -->
-              <div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div>
-              <!-- Row 4: 7 green -->
-              <div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div>
-              <!-- Row 5: 7 light blue -->
-              <div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div>
-              <!-- Row 6: 3 light blue + 4 gray -->
-              <div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div>
-              <!-- Row 7: 3 blue + 4 gray -->
-              <div class="block blue">B</div><div class="block blue">B</div><div class="block blue">B</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div><div class="block gray">-</div>
-              <!-- Row 8: 5 purple + 2 gray -->
-              <div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block gray">-</div><div class="block gray">-</div>
+            <div class="section">
+              <label class="section-title">packing=False</label>
+              <div class="grid packing-false">
+                ${createBlocks(packingFalse)}
+              </div>
             </div>
-            <div class="description">Sequential placement with wasted space (17 empty cells)</div>
-          </div>
 
-          <div class="section">
-            <h2 class="section-title">packing=True</h2>
-            <div class="grid packing-true">
-              <!-- Row 1: 7 light blue -->
-              <div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div><div class="block lightblue">L</div>
-              <!-- Row 2: 7 pink -->
-              <div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div><div class="block pink">K</div>
-              <!-- Row 3: 7 red -->
-              <div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div><div class="block red">R</div>
-              <!-- Row 4: 7 green -->
-              <div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div><div class="block green">G</div>
-              <!-- Row 5: 7 purple -->
-              <div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div><div class="block purple">P</div>
-              <!-- Row 6: 4 yellow + 3 orange -->
-              <div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block yellow">Y</div><div class="block orange">O</div><div class="block orange">O</div><div class="block orange">O</div>
+            <div class="section">
+              <label class="section-title">packing=True</label>
+              <div class="grid packing-true">
+                ${createBlocks(packingTrue)}
+              </div>
             </div>
-            <div class="description">Complete optimization with no wasted space (0 empty cells)</div>
-          </div>
-
-          <div class="efficiency">
-            <h3>Packing Efficiency</h3>
-            <p><strong>packing=False:</strong> 39 blocks used / 56 cells = 69.6% efficiency</p>
-            <p><strong>packing=True:</strong> 42 blocks used / 42 cells = 100% efficiency</p>
-            <p><strong>Gain:</strong> +30.4% efficiency and 14 cells saved</p>
           </div>
         </div>
       `;

app/src/content/embeds/input-labels-training.html

@@ -1,60 +1,66 @@
 <div class="d3-input-labels"></div>
 <style>
     .d3-input-labels {
-        font-family: 'Arial', sans-serif;
         margin: 0;
-        padding: 20px;
-        background-color: #f5f5f5;
+        padding: 10px 0;
     }
 
     .d3-input-labels .container {
-        max-width: 1200px;
+        max-width: 1000px;
         margin: 0 auto;
-        background: white;
         border-radius: 10px;
-        padding: 30px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
-    .d3-input-labels .title {
-        font-size: 28px;
-        font-weight: bold;
-        text-align: center;
-        margin-bottom: 30px;
-        color: #2c3e50;
+    .d3-input-labels .sections-container {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        align-items: center;
     }
 
-    .d3-input-labels .conversation-container {
+    .d3-input-labels .section {
         display: flex;
         flex-direction: column;
-        gap: 20px;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .d3-input-labels .section:first-child {
         margin-bottom: 30px;
     }
 
-    .d3-input-labels .row {
-        display: flex;
-        align-items: center;
-        gap: 20px;
+    @media (max-width: 768px) {
+        .d3-input-labels .sections-container {
+            flex-direction: column;
+            gap: 30px;
+        }
+    }
+
+    .d3-input-labels .section {
+        flex: 1;
+        margin-bottom: 0;
     }
 
-    .d3-input-labels .row-label {
-        font-size: 18px;
+    .d3-input-labels .section-title {
+        font-size: 16px;
         font-weight: bold;
-        min-width: 120px;
-        color: #34495e;
+        color: var(--text-color, #333);
+        text-align: left;
+        margin-bottom: 15px;
     }
 
-    .d3-input-labels .tokens-container {
+    .d3-input-labels .tokens-row {
         display: flex;
-        flex-wrap: wrap;
         gap: 3px;
+        justify-content: flex-start;
+        flex-wrap: wrap;
         flex: 1;
     }
 
     .d3-input-labels .token {
-        width: 35px;
-        height: 35px;
-        border: 2px solid #333;
+        width: 30px;
+        height: 30px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -62,28 +68,28 @@
         font-size: 10px;
         font-weight: bold;
         color: white;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
         position: relative;
     }
 
     .d3-input-labels .user-token {
-        background-color: #e74c3c;
+        background-color: var(--color-0);
     }
 
     .d3-input-labels .assistant-token {
-        background-color: #27ae60;
+        background-color: var(--color-1);
     }
 
     .d3-input-labels .label-token {
-        background-color: #3498db;
+        background-color: var(--color-2);
     }
 
     .d3-input-labels .label-masked {
         background: repeating-linear-gradient(45deg,
-                #3498db,
-                #3498db 3px,
-                #2980b9 3px,
-                #2980b9 6px);
+                var(--color-2),
+                var(--color-2) 3px,
+                transparent 3px,
+                transparent 6px);
+        opacity: 0.6;
     }
 
     .d3-input-labels .turn-label {
@@ -91,68 +97,21 @@
         top: -25px;
         left: 50%;
         transform: translateX(-50%);
-        font-size: 12px;
+        font-size: 10px;
         font-weight: bold;
-        color: #2c3e50;
-        background: white;
-        padding: 2px 6px;
-        border-radius: 3px;
-        border: 1px solid #bdc3c7;
+        color: var(--text-color, #333);
+        background: var(--surface-bg, #fafafa);
+        padding: 2px 4px;
+        white-space: nowrap;
+        border-radius: 2px;
     }
 
     .d3-input-labels .user-label {
-        color: #e74c3c;
+        color: var(--color-0);
     }
 
     .d3-input-labels .assistant-label {
-        color: #27ae60;
-    }
-
-    .d3-input-labels .explanation {
-        background: #ecf0f1;
-        padding: 20px;
-        border-radius: 8px;
-        margin-top: 20px;
-    }
-
-    .d3-input-labels .explanation h3 {
-        margin: 0 0 15px 0;
-        color: #2c3e50;
-    }
-
-    .d3-input-labels .explanation p {
-        margin: 8px 0;
-        color: #34495e;
-        line-height: 1.5;
-    }
-
-    .d3-input-labels .legend {
-        display: flex;
-        justify-content: center;
-        gap: 30px;
-        margin: 20px 0;
-        flex-wrap: wrap;
-    }
-
-    .d3-input-labels .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .d3-input-labels .legend-color {
-        width: 20px;
-        height: 20px;
-        border: 2px solid #333;
-        border-radius: 3px;
-    }
-
-    .d3-input-labels .legend-masked {
-        background: repeating-linear-gradient(45deg,
-                #3498db,
-                #3498db 2px,
-                #2980b9 2px,
-                #2980b9 4px);
+        color: var(--color-1);
     }
 </style>
 <script>
@@ -171,116 +130,94 @@
                 container.dataset.mounted = 'true';
             }
 
+            // Apply categorical color palette
+            const applyColorPalette = () => {
+                try {
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        const colors = window.ColorPalettes.getColors('categorical', 4);
+                        colors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    } else {
+                        // Fallback colors
+                        const fallbackColors = [
+                            '#E889AB', '#4EA5B7', '#E38A42', '#CEC0FA'
+                        ];
+                        fallbackColors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    }
+                } catch (e) {
+                    console.warn('ColorPalettes not available, using fallback colors');
+                }
+            };
+
+            // Apply colors immediately and on theme changes
+            applyColorPalette();
+            if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') {
+                window.ColorPalettes.refresh();
+            }
+
+            // Data structure for input_ids and labels
+            const inputIds = [
+                { type: 'user', count: 5, label: 'U' },
+                { type: 'assistant', count: 4, label: 'A' },
+                { type: 'user', count: 5, label: 'U' },
+                { type: 'assistant', count: 4, label: 'A' }
+            ];
+
+            const labels = [
+                { type: 'masked', count: 5, label: '-100' },
+                { type: 'active', count: 4, label: 'A' },
+                { type: 'masked', count: 5, label: '-100' },
+                { type: 'active', count: 4, label: 'A' }
+            ];
+
+            // Helper function to create tokens
+            const createTokens = (tokens, rowType) => {
+                let tokenIndex = 1;
+                return tokens.map((token, groupIndex) => {
+                    const tokens = [];
+                    for (let i = 0; i < token.count; i++) {
+                        const isFirst = i === 0;
+                        const tokenClass = token.type === 'user' ? 'user-token' :
+                            token.type === 'assistant' ? 'assistant-token' :
+                                token.type === 'active' ? 'label-token' : 'label-masked';
+
+                        const labelClass = token.type === 'user' ? 'user-label' : 'assistant-label';
+                        const labelText = token.type === 'user' ? 'user' : 'assistant';
+
+                        tokens.push(`
+                            <div class="token ${tokenClass}">
+                                ${isFirst && rowType === 'input_ids' ? `<div class="turn-label ${labelClass}">${labelText}</div>` : ''}
+                            </div>
+                        `);
+                        tokenIndex++;
+                    }
+                    return tokens.join('');
+                }).join('');
+            };
+
             // Create the HTML structure
             container.innerHTML = `
-        <div class="container">
-          <h1 class="title">Input IDs and Labels in Conversational Training</h1>
-          
-          <div class="legend">
-            <div class="legend-item">
-              <div class="legend-color user-token"></div>
-              <span>User Tokens</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color assistant-token"></div>
-              <span>Assistant Tokens</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color label-token"></div>
-              <span>Active Labels</span>
-            </div>
-            <div class="legend-item">
-              <div class="legend-color legend-masked"></div>
-              <span>Masked Labels (-100)</span>
-            </div>
-          </div>
-          
-          <div class="conversation-container">
-            <div class="row">
-              <div class="row-label">input_ids</div>
-              <div class="tokens-container">
-                <!-- First user turn: 5 tokens -->
-                <div class="token user-token">
-                  <div class="turn-label user-label">user</div>
-                  U1
-                </div>
-                <div class="token user-token">U2</div>
-                <div class="token user-token">U3</div>
-                <div class="token user-token">U4</div>
-                <div class="token user-token">U5</div>
-                
-                <!-- First assistant turn: 4 tokens -->
-                <div class="token assistant-token">
-                  <div class="turn-label assistant-label">assistant</div>
-                  A1
-                </div>
-                <div class="token assistant-token">A2</div>
-                <div class="token assistant-token">A3</div>
-                <div class="token assistant-token">A4</div>
-                
-                <!-- Second user turn: 5 tokens -->
-                <div class="token user-token">
-                  <div class="turn-label user-label">user</div>
-                  U6
-                </div>
-                <div class="token user-token">U7</div>
-                <div class="token user-token">U8</div>
-                <div class="token user-token">U9</div>
-                <div class="token user-token">U10</div>
-                
-                <!-- Second assistant turn: 4 tokens -->
-                <div class="token assistant-token">
-                  <div class="turn-label assistant-label">assistant</div>
-                  A5
+                <div class="container">
+                    <div class="sections-container">
+                        <div class="section">
+                            <label class="section-title">input_ids</label>
+                            <div class="tokens-row">
+                                ${createTokens(inputIds, 'input_ids')}
+                            </div>
+                        </div>
+
+                        <div class="section">
+                            <label class="section-title">labels</label>
+                            <div class="tokens-row">
+                                ${createTokens(labels, 'labels')}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="token assistant-token">A6</div>
-                <div class="token assistant-token">A7</div>
-                <div class="token assistant-token">A8</div>
-              </div>
-            </div>
-            
-            <div class="row">
-              <div class="row-label">labels</div>
-              <div class="tokens-container">
-                <!-- Masked labels for first user turn (5 tokens) -->
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                
-                <!-- Active labels for first assistant turn (4 tokens) -->
-                <div class="token label-token">A1</div>
-                <div class="token label-token">A2</div>
-                <div class="token label-token">A3</div>
-                <div class="token label-token">A4</div>
-                
-                <!-- Masked labels for second user turn (5 tokens) -->
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                <div class="token label-masked">-100</div>
-                
-                <!-- Active labels for second assistant turn (4 tokens) -->
-                <div class="token label-token">A5</div>
-                <div class="token label-token">A6</div>
-                <div class="token label-token">A7</div>
-                <div class="token label-token">A8</div>
-              </div>
-            </div>
-          </div>
-          
-          <div class="explanation">
-            <h3>How it works:</h3>
-            <p><strong>input_ids:</strong> Complete sequence of input tokens (user + assistant)</p>
-            <p><strong>labels:</strong> Target tokens for training</p>
-            <p><strong>Masked labels (-100):</strong> User tokens are masked because the model should not learn to predict them</p>
-            <p><strong>Active labels:</strong> Only assistant tokens are used to calculate training loss</p>
-            <p><strong>Goal:</strong> The model learns to generate coherent assistant responses based on user context</p>
-          </div>
-        </div>
-      `;
+            `;
         };
 
         if (document.readyState === 'loading') {