update

app/src/components/Hero.astro

@@ -96,7 +96,7 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 <section class="hero">
   <h1 class="hero-title" set:html={title} />
   <div class="hero-banner">
-    <HtmlEmbed src="banner.html" frameless />
+    <HtmlEmbed src="banner-sequence-alignment-svg.html" frameless />
     {description && <p class="hero-desc">{description}</p>}
   </div>
 </section>

app/src/content/embeds/banner-sequence-alignment-svg.html

@@ -41,45 +41,45 @@
             const height = container.clientHeight || 220;
 
             // Calculate scale based on available width
-            const baseTotalWidth = 180 + 110 + 40 + 90 + 180 + (15 * 4);
+            const baseTotalWidth = 130 + 130 + 50 + 100 + 150 + (20 * 4);
             const scale = Math.min(1, (width - 40) / baseTotalWidth);
 
-            const padding = 15 * scale;
-            const tokenHeight = 35 * scale;
-            const spacing = 15 * scale;
-            const subTokenSmallSize = 24 * scale;
-            const subTokenLargeWidth = 70 * scale;
-            const subTokenLargeHeight = 24 * scale;
+            const padding = 20 * scale;
+            const tokenHeight = 32 * scale;
+            const spacing = 20 * scale;
+            const subTokenSmallSize = 26 * scale;
+            const subTokenLargeWidth = 65 * scale;
+            const subTokenLargeHeight = 26 * scale;
 
             const originalWords = [
                 { text: '<think>', subTokens: [
                     { id: 0, type: 'small' },
                     { id: 1, type: 'small' },
                     { id: 2, type: 'small' }
-                ], width: 180 * scale },
+                ], width: 130 * scale },
                 { text: 'Hugging Face', subTokens: [
                     { id: 3, type: 'large' }
-                ], width: 110 * scale },
+                ], width: 130 * scale },
                 { text: 'is', subTokens: [
                     { id: 4, type: 'small' }
-                ], width: 40 * scale },
+                ], width: 50 * scale },
                 { text: 'awesome!', subTokens: [
                     { id: 5, type: 'large' }
-                ], width: 90 * scale },
+                ], width: 100 * scale },
                 { text: '</think>', subTokens: [
                     { id: 6, type: 'small' },
                     { id: 7, type: 'small' },
                     { id: 8, type: 'small' },
                     { id: 9, type: 'small' }
-                ], width: 180 * scale }
+                ], width: 150 * scale }
             ];
 
             // Store word centers for alignment
             const wordCenters = [];
             let currentX = padding;
-            const originalY = height * 0.18;
-            const subTokenY = height * 0.45;
-            const mergedY = height * 0.72;
+            const originalY = height * 0.20;
+            const subTokenY = height * 0.50;
+            const mergedY = height * 0.78;
 
             // Draw original words and sub-tokens
             originalWords.forEach((word, wordIdx) => {
@@ -89,22 +89,25 @@
                 // Original word (green)
                 draw.rect(word.width, tokenHeight)
                     .move(currentX, originalY - tokenHeight / 2)
-                    .radius(10 * scale)
+                    .radius(12 * scale)
                     .fill(colors.originalToken)
-                    .stroke({ color: colors.line, width: 1.5 * scale });
+                    .stroke({ color: colors.line, width: 2 * scale });
 
-                draw.text(word.text)
-                    .move(currentX + word.width / 2, originalY)
+                const textEl = draw.text(word.text)
                     .font({
                         family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                        size: 11 * scale,
+                        size: 12 * scale,
                         anchor: 'middle',
                         weight: '500'
                     })
                     .fill(colors.text);
+                
+                // Center text in the box
+                textEl.cx(currentX + word.width / 2);
+                textEl.cy(originalY);
 
                 // Sub-tokens (yellow) below - small squares or large rectangles
-                const subTokenGap = 4 * scale;
+                const subTokenGap = 3 * scale;
                 
                 // Calculate total width for centering
                 let subTokensTotalWidth = 0;
@@ -121,26 +124,29 @@
 
                     draw.rect(stWidth, stHeight)
                         .move(subTokenX, subTokenY - stHeight / 2)
-                        .radius(6 * scale)
+                        .radius(7 * scale)
                         .fill(colors.subToken)
-                        .stroke({ color: colors.line, width: 1.5 * scale });
+                        .stroke({ color: colors.line, width: 2 * scale });
 
-                    draw.text(st.id.toString())
-                        .move(subTokenX + stWidth / 2, subTokenY)
+                    const subTextEl = draw.text(st.id.toString())
                         .font({
                             family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                            size: 10 * scale,
+                            size: 11 * scale,
                             anchor: 'middle',
                             weight: '600'
                         })
                         .fill(colors.text);
                     
+                    // Center text in the box
+                    subTextEl.cx(subTokenX + stWidth / 2);
+                    subTextEl.cy(subTokenY);
+                    
                     subTokenX += stWidth + subTokenGap;
                 });
 
                 // Vertical dotted line from word center
-                draw.line(wordCenterX, originalY + tokenHeight / 2 + (3 * scale), wordCenterX, mergedY - tokenHeight / 2 - (3 * scale))
-                    .stroke({ color: colors.line, width: 1.5 * scale, dasharray: '4,4' });
+                draw.line(wordCenterX, originalY + tokenHeight / 2 + (5 * scale), wordCenterX, mergedY - tokenHeight / 2 - (5 * scale))
+                    .stroke({ color: colors.line, width: 2 * scale, dasharray: '5,5' });
 
                 currentX += word.width + spacing;
             });
@@ -149,14 +155,14 @@
             // Groups of tokens: some have multiple rectangles side-by-side
             const mergedTokenGroups = [
                 { ids: [0], alignToWord: 0 },        // Single token "0" under <think>
-                { ids: [1, 2], alignToWord: null, x: wordCenters[0] + (wordCenters[1] - wordCenters[0]) * 0.55 },  // Two tokens "1", "2" between words
-                { ids: [3], alignToWord: 1 },        // Single token "3" under Hugging Face
-                { ids: [4], alignToWord: 2 },        // Single token "4" under is
-                { ids: [5], alignToWord: 3 }         // Single token "5" under awesome!
+                { ids: [1, 2], alignToWord: 1 },     // Two tokens "1", "2" under Hugging Face
+                { ids: [3], alignToWord: 2 },        // Single token "3" under is
+                { ids: [4], alignToWord: 3 },        // Single token "4" under awesome!
+                { ids: [5], alignToWord: 4 }         // Single token "5" under </think>
             ];
 
-            const mergedTokenWidth = 55 * scale;
-            const mergedTokenGap = 2 * scale;
+            const mergedTokenWidth = 52 * scale;
+            const mergedTokenGap = 3 * scale;
 
             mergedTokenGroups.forEach((group) => {
                 const groupTotalWidth = group.ids.length * mergedTokenWidth + (group.ids.length - 1) * mergedTokenGap;
@@ -175,19 +181,22 @@
 
                     draw.rect(mergedTokenWidth, tokenHeight)
                         .move(tokenX, mergedY - tokenHeight / 2)
-                        .radius(8 * scale)
+                        .radius(10 * scale)
                         .fill(colors.mergedToken)
-                        .stroke({ color: colors.line, width: 1.5 * scale });
+                        .stroke({ color: colors.line, width: 2 * scale });
 
-                    draw.text(id.toString())
-                        .move(tokenX + mergedTokenWidth / 2, mergedY)
+                    const mergedTextEl = draw.text(id.toString())
                         .font({
                             family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                            size: 11 * scale,
+                            size: 12 * scale,
                             anchor: 'middle',
                             weight: '600'
                         })
                         .fill(colors.text);
+                    
+                    // Center text in the box
+                    mergedTextEl.cx(tokenX + mergedTokenWidth / 2);
+                    mergedTextEl.cy(mergedY);
                 });
             });
         }
@@ -204,135 +213,184 @@
             const height = container.clientHeight || 220;
 
             // Calculate scale based on available width
-            const baseTotalWidth = 180 + 110 + 35 + 80 + 160 + (15 * 4);
+            // Total: (22+48+22) + 130 + 50 + 100 + (22+22+48+22) = 92 + 130 + 50 + 100 + 114 = 486 base + gaps
+            const baseTotalWidth = 92 + 130 + 50 + 100 + 114 + (20 * 4);
             const scale = Math.min(1, (width - 40) / baseTotalWidth);
 
-            const padding = 15 * scale;
-            const logprobStackHeight = 55 * scale;
-            const logprobRectSize = 14 * scale;
-            const logprobSpacing = 4 * scale;
+            const padding = 20 * scale;
+            const logprobStackHeight = 60 * scale;
+            const logprobRectSize = 13 * scale;
+            const logprobSpacing = 3 * scale;
             const rectsPerStack = 4; // Input stacks have 4 rectangles
-            const stackWidth = (logprobRectSize + logprobSpacing) * rectsPerStack - logprobSpacing;
-            const spacing = 15 * scale;
-
-            const words = [
-                { text: '<think>', stacks: 3, width: 180 * scale },
-                { text: 'Hugging Face', stacks: 1, width: 110 * scale },
-                { text: 'is', stacks: 1, width: 35 * scale },
-                { text: 'awesome!', stacks: 1, width: 80 * scale },
-                { text: '</think>', stacks: 4, width: 160 * scale }
+            const singleStackWidth = logprobRectSize;
+            const spacing = 20 * scale;
+            const labelHeight = 26 * scale;
+
+            // Input groups (top, yellow) - with separate nodes for brackets/slashes
+            const inputGroups = [
+                { text: '<', width: 22 * scale, groupId: 0 },
+                { text: 'think', width: 48 * scale, groupId: 0 },
+                { text: '>', width: 22 * scale, groupId: 0 },
+                { text: 'Hugging Face', width: 130 * scale, groupId: 1 },
+                { text: 'is', width: 50 * scale, groupId: 2 },
+                { text: 'awesome!', width: 100 * scale, groupId: 3 },
+                { text: '<', width: 22 * scale, groupId: 4 },
+                { text: '/', width: 22 * scale, groupId: 4 },
+                { text: 'think', width: 48 * scale, groupId: 4 },
+                { text: '>', width: 22 * scale, groupId: 4 }
             ];
 
-            const wordCenters = [];
+            // Stack configuration per group
+            const groupStacks = {
+                0: 3,  // <think> has 3 stacks
+                1: 1,  // Hugging Face has 1 stack
+                2: 1,  // is has 1 stack
+                3: 1,  // awesome! has 1 stack
+                4: 4   // </think> has 4 stacks
+            };
+
+            // Output groups (bottom, blue) - 6 separate words
+            const outputGroups = [
+                { text: '<think>', alignToInput: 0 },
+                { text: 'Hugging', alignToInput: 1, offset: -40 * scale },
+                { text: 'Face', alignToInput: 1, offset: 40 * scale },
+                { text: 'is', alignToInput: 2 },
+                { text: 'awesome!', alignToInput: 3 },
+                { text: '</think>', alignToInput: 4 }
+            ];
+
+            // Track centers for each unique group (for output alignment)
+            const inputCenters = [null, null, null, null, null]; // 5 groups: 0=<think>, 1=Hugging Face, 2=is, 3=awesome!, 4=</think>
+            const groupXPositions = {}; // Track X positions for each group
+            
             let currentX = padding;
-            const inputY = height * 0.18;
-            const outputY = height * 0.72;
+            const inputY = height * 0.20;
+            const outputY = height * 0.68;
+            const nodeGap = 3 * scale; // Small gap between nodes in same group
 
             // Draw input logprob tensors (yellow stacks)
-            words.forEach((word, wordIdx) => {
-                const wordCenterX = currentX + word.width / 2;
-                wordCenters.push(wordCenterX);
+            const nodePositions = []; // Track each node's position for stacks
+            
+            inputGroups.forEach((group, groupIdx) => {
+                // Track start of each unique group
+                if (!groupXPositions[group.groupId]) {
+                    groupXPositions[group.groupId] = { start: currentX, nodes: [] };
+                }
+                
+                const nodeCenterX = currentX + group.width / 2;
+                groupXPositions[group.groupId].nodes.push({ x: currentX, width: group.width, centerX: nodeCenterX });
+                nodePositions.push({ centerX: nodeCenterX, groupId: group.groupId, text: group.text });
+
+                // Draw stack above this node (4 rectangles stacked vertically)
+                const stackX = nodeCenterX - singleStackWidth / 2;
+                
+                for (let i = 0; i < rectsPerStack; i++) {
+                    const rectY = inputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
 
-                // Draw multiple stacks for words that merge
-                const stackGap = 12 * scale;
-                const totalStacksWidth = word.stacks * stackWidth + (word.stacks - 1) * stackGap;
-                const stacksStartX = wordCenterX - totalStacksWidth / 2;
-
-                for (let s = 0; s < word.stacks; s++) {
-                    const stackX = stacksStartX + s * (stackWidth + stackGap);
-
-                    // Draw stack of rectangles (4 rectangles per stack)
-                    for (let i = 0; i < rectsPerStack; i++) {
-                        const rectY = inputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
-
-                        draw.rect(logprobRectSize, logprobRectSize)
-                            .move(stackX, rectY)
-                            .radius(4 * scale)
-                            .fill(colors.subToken)
-                            .stroke({ color: colors.line, width: 1 * scale });
-                    }
-
-                    // Draw plus signs between stacks (except last)
-                    if (s < word.stacks - 1) {
-                        const plusX = stackX + stackWidth + stackGap / 2;
-                        draw.text('+')
-                            .move(plusX, inputY)
-                            .font({
-                                family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                                size: 18 * scale,
-                                anchor: 'middle',
-                                weight: 'bold'
-                            })
-                            .fill(colors.plus);
-                    }
+                    draw.rect(logprobRectSize, logprobRectSize)
+                        .move(stackX, rectY)
+                        .radius(4 * scale)
+                        .fill(colors.subToken)
+                        .stroke({ color: colors.line, width: 1.5 * scale });
+                }
+
+                // Draw plus sign to the right of stack if not last in group
+                const isLastInGroup = groupIdx === inputGroups.length - 1 || inputGroups[groupIdx + 1].groupId !== group.groupId;
+                if (!isLastInGroup) {
+                    // Calculate next node's center
+                    const nextGroup = inputGroups[groupIdx + 1];
+                    const nextNodeCenterX = currentX + group.width + nodeGap + (nextGroup.width / 2);
+                    // Center the + between this stack and the next stack
+                    const plusX = (nodeCenterX + nextNodeCenterX) / 2;
+                    const plusTextEl = draw.text('+')
+                        .font({
+                            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                            size: 16 * scale,
+                            anchor: 'middle',
+                            weight: 'bold'
+                        })
+                        .fill(colors.plus);
+                    plusTextEl.cx(plusX);
+                    plusTextEl.cy(inputY);
                 }
 
-                // Word label below input stacks
-                const labelHeight = 20 * scale;
-                const labelY = inputY + logprobStackHeight / 2 + (18 * scale);
+                // Word label
+                const labelY = inputY + logprobStackHeight / 2 + (22 * scale);
 
-                draw.rect(word.width, labelHeight)
+                draw.rect(group.width, labelHeight)
                     .move(currentX, labelY - labelHeight / 2)
-                    .radius(5 * scale)
-                    .fill(colors.originalToken)
-                    .stroke({ color: colors.line, width: 1 * scale });
+                    .radius(8 * scale)
+                    .fill(colors.subToken)
+                    .stroke({ color: colors.line, width: 1.5 * scale });
 
-                draw.text(word.text)
-                    .move(currentX + word.width / 2, labelY)
+                const inputTextEl = draw.text(group.text)
                     .font({
                         family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                        size: 10 * scale,
+                        size: 11 * scale,
                         anchor: 'middle',
                         weight: '500'
                     })
                     .fill(colors.text);
+                inputTextEl.cx(nodeCenterX);
+                inputTextEl.cy(labelY);
 
-                // Vertical dotted line from label to output
-                draw.line(wordCenterX, labelY + labelHeight / 2 + (5 * scale), wordCenterX, outputY - logprobStackHeight / 2 - (5 * scale))
-                    .stroke({ color: colors.line, width: 1.5 * scale, dasharray: '4,4' });
+                // Move to next position
+                currentX += group.width + (isLastInGroup ? spacing : nodeGap);
+            });
 
-                currentX += word.width + spacing;
+            // Calculate center for each group (for output alignment)
+            Object.keys(groupXPositions).forEach(groupId => {
+                const group = groupXPositions[groupId];
+                const totalWidth = group.nodes.reduce((sum, node) => sum + node.width, 0) + (group.nodes.length - 1) * nodeGap;
+                const groupCenter = group.start + totalWidth / 2;
+                inputCenters[groupId] = groupCenter;
             });
 
             // Draw output logprob tensors (blue stacks) - 5 rectangles per stack
-            words.forEach((word, wordIdx) => {
-                const wordCenterX = wordCenters[wordIdx];
+            outputGroups.forEach((output) => {
+                // Calculate position based on input alignment
+                const inputCenter = inputCenters[output.alignToInput];
+                const outputCenterX = inputCenter + (output.offset || 0);
 
-                // Single output stack (merged) - 5 rectangles!
+                // Draw vertical dotted line from input to output
+                const inputLabelY = inputY + logprobStackHeight / 2 + (22 * scale);
+                draw.line(outputCenterX, inputLabelY + labelHeight / 2 + (3 * scale), outputCenterX, outputY - logprobStackHeight / 2 - (3 * scale))
+                    .stroke({ color: colors.line, width: 2 * scale, dasharray: '5,5' });
+
+                // Single output stack (merged) - 5 rectangles stacked vertically
                 const outputRectsPerStack = 5;
-                const outputStackWidth = (logprobRectSize + logprobSpacing) * outputRectsPerStack - logprobSpacing;
-                const adjustedStackX = wordCenterX - outputStackWidth / 2;
+                const stackX = outputCenterX - singleStackWidth / 2;
 
                 for (let i = 0; i < outputRectsPerStack; i++) {
                     const rectY = outputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
-                    const rectX = adjustedStackX + i * (logprobRectSize + logprobSpacing);
 
                     draw.rect(logprobRectSize, logprobRectSize)
-                        .move(rectX, rectY)
+                        .move(stackX, rectY)
                         .radius(4 * scale)
                         .fill(colors.mergedToken)
-                        .stroke({ color: colors.line, width: 1 * scale });
+                        .stroke({ color: colors.line, width: 1.5 * scale });
                 }
 
-                // Word label below output stacks
-                const labelHeight = 20 * scale;
-                const labelY = outputY + logprobStackHeight / 2 + (18 * scale);
+                // Word label below output stack
+                const outputLabelY = outputY + logprobStackHeight / 2 + (35 * scale);
+                const labelWidth = output.text.length * 9 * scale + 15 * scale; // Dynamic width based on text
 
-                draw.rect(word.width, labelHeight)
-                    .move(wordCenters[wordIdx] - word.width / 2, labelY - labelHeight / 2)
-                    .radius(5 * scale)
+                draw.rect(labelWidth, labelHeight)
+                    .move(outputCenterX - labelWidth / 2, outputLabelY - labelHeight / 2)
+                    .radius(8 * scale)
                     .fill(colors.mergedToken)
-                    .stroke({ color: colors.line, width: 1 * scale });
+                    .stroke({ color: colors.line, width: 1.5 * scale });
 
-                draw.text(word.text)
-                    .move(wordCenters[wordIdx], labelY)
+                const outputTextEl = draw.text(output.text)
                     .font({
                         family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                        size: 10 * scale,
+                        size: 11 * scale,
                         anchor: 'middle',
                         weight: '500'
                     })
                     .fill(colors.text);
+                outputTextEl.cx(outputCenterX);
+                outputTextEl.cy(outputLabelY);
             });
         }