trying to fix attention to first token 2.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.5
+          augue ornare venenatis id nec neque.Ferdi 2.6
         </p>
       </section>
 
@@ -117,6 +117,6 @@
     </aside>
   </div>
 
-  <script src="static/script.js?v=202845533"></script>
+  <script src="static/script.js?v=202845563"></script>
 </body>
 </html>

frontend/script.js

@@ -59,6 +59,9 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   const attentionWeights = attention[layerIdx][headIdx];
   const headMax = Math.max(...attentionWeights.flat()) || 1;
   
+  // Instead of using "90%", compute a numeric right x-coordinate.
+  const xRight = width - padding;
+  
   // Create a thumbnail container using D3
   const thumbnail = d3.select(document.createElement("div"))
     .style("position", "relative")
@@ -69,14 +72,14 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     .style("padding", "5px")
     .style("background", "#fff");
 
-  // Append an SVG container inside the thumbnail
+  // Append an SVG container inside the thumbnail with fixed width and height.
   const svg = thumbnail.append("svg")
-    .attr("width", "100%")
-    .attr("height", "100%");
+    .attr("width", width)
+    .attr("height", height);
 
   // Add header text using template literals
   svg.append("text")
-    .attr("x", "50%")
+    .attr("x", width / 2)
     .attr("y", 15)
     .attr("text-anchor", "middle")
     .attr("font-size", "10")
@@ -95,22 +98,23 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     
     // Right side token
     svg.append("text")
-      .attr("x", "90%")
+      .attr("x", xRight)
       .attr("y", padding + idx * tokenHeight)
       .attr("text-anchor", "end")
       .attr("font-size", "8")
       .text(cleanToken);
   });
   
-  // Draw attention lines with normalized weights
+  // Draw attention lines with normalized weights.
+  // Lower threshold to 0.01 so more connections are visible.
   attentionWeights.forEach((sourceWeights, sourceIdx) => {
     sourceWeights.forEach((weight, targetIdx) => {
-      if (weight > 0.05 && sourceIdx !== targetIdx) {
+      if (weight > 0.01 && sourceIdx !== targetIdx) {
         const normalizedWeight = weight / headMax;
         svg.append("line")
           .attr("x1", padding)
           .attr("y1", padding + sourceIdx * tokenHeight - 5)
-          .attr("x2", "90%")
+          .attr("x2", xRight)
           .attr("y2", padding + targetIdx * tokenHeight - 5)
           .attr("stroke", "#2ecc71")
           .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
@@ -120,7 +124,7 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     });
   });
   
-  // On click, update UI elements (assumes 'data' is globally available)
+  // On click, update UI elements (make sure 'data' is globally available)
   thumbnail.on("click", function() {
     d3.select("#head").text(`Head: ${headIdx + 1}`);
     d3.select("#layer").text(`Layer: ${layerIdx + 1}`);