each weight is normalized by its row’s max2.6

frontend/index.html

@@ -29,7 +29,7 @@
           Etiam vel dui consequat ante lobortis facilisis. Curabitur facilisis enim sed massa
           consectetur, et mollis magna suscipit. Vestibulum odio ante, laoreet at mauris eu,
           feugiat pretium tortor. Ut condimentum laoreet felis quis rutrum. Proin vel elit a
-          augue ornare venenatis id nec neque.Ferdi 2.6
+          augue ornare venenatis id nec neque.Ferdi 2.7
         </p>
       </section>
 
@@ -117,6 +117,5 @@
     </aside>
   </div>
 
-  <script src="static/script.js?v=202845563"></script>
-</body>
+  <script src="static/script.js?v=2025
 </html>

frontend/script.js

@@ -55,11 +55,10 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   const maxLineWidth = 4;
   const maxOpacity = 0.8;
   
-  // Extract attention weights for this head and compute the normalization factor.
-  const attentionWeights = attention[layerIdx][headIdx];
-  const headMax = Math.max(...attentionWeights.flat()) || 1;
+  // Instead of a head-wide max, we will normalize per source token (per row).
+  // (This avoids a situation where a dominant first token makes all rows look similar.)
   
-  // Instead of using "90%", compute a numeric right x-coordinate.
+  // Compute the right-side x-coordinate numerically instead of using "90%"
   const xRight = width - padding;
   
   // Create a thumbnail container using D3
@@ -72,12 +71,12 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     .style("padding", "5px")
     .style("background", "#fff");
 
-  // Append an SVG container inside the thumbnail with fixed width and height.
+  // Append an SVG container with fixed dimensions
   const svg = thumbnail.append("svg")
     .attr("width", width)
     .attr("height", height);
 
-  // Add header text using template literals
+  // Add header text (e.g., "L4 H4")
   svg.append("text")
     .attr("x", width / 2)
     .attr("y", 15)
@@ -85,18 +84,18 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     .attr("font-size", "10")
     .text(`L${layerIdx + 1} H${headIdx + 1}`);
 
-  // Draw tokens on both sides (vertically aligned)
+  // Draw tokens on both sides (left and right)
   tokens.forEach((token, idx) => {
     const cleanToken = token.replace("Ġ", "");
     
-    // Left side token
+    // Left-side token
     svg.append("text")
       .attr("x", padding)
       .attr("y", padding + idx * tokenHeight)
       .attr("font-size", "8")
       .text(cleanToken);
     
-    // Right side token
+    // Right-side token
     svg.append("text")
       .attr("x", xRight)
       .attr("y", padding + idx * tokenHeight)
@@ -105,12 +104,15 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
       .text(cleanToken);
   });
   
-  // Draw attention lines with normalized weights.
-  // Lower threshold to 0.01 so more connections are visible.
-  attentionWeights.forEach((sourceWeights, sourceIdx) => {
+  // Draw attention lines with per-row normalization.
+  // For each source token, we normalize its weights by the row’s maximum.
+  attention[layerIdx][headIdx].forEach((sourceWeights, sourceIdx) => {
+    // Compute the maximum weight in this row (or use 1 if all are zero)
+    const rowMax = Math.max(...sourceWeights) || 1;
     sourceWeights.forEach((weight, targetIdx) => {
+      // Only draw if the weight exceeds a threshold and is not self-attention
       if (weight > 0.01 && sourceIdx !== targetIdx) {
-        const normalizedWeight = weight / headMax;
+        const normalizedWeight = weight / rowMax;
         svg.append("line")
           .attr("x1", padding)
           .attr("y1", padding + sourceIdx * tokenHeight - 5)
@@ -124,7 +126,7 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     });
   });
   
-  // On click, update UI elements (make sure 'data' is globally available)
+  // Click handler: update UI (make sure 'data' is available globally or pass it in)
   thumbnail.on("click", function() {
     d3.select("#head").text(`Head: ${headIdx + 1}`);
     d3.select("#layer").text(`Layer: ${layerIdx + 1}`);