visualisation normalise for each head and choosing hover animation by clicking on the thumb nail2.2

frontend/index.html

@@ -28,7 +28,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.2
+          augue ornare venenatis id nec neque.Ferdi 2.3
         </p>
       </section>
 
@@ -116,6 +116,6 @@
     </aside>
   </div>
 
-  <script src="static/script.js?v=202 1533"></script>
+  <script src="static/script.js?v=20281533"></script>
 </body>
 </html>

frontend/script.js

@@ -19,7 +19,7 @@ document.getElementById('textForm').addEventListener('submit', async (e) => {
     displayOutput(data);
     displayHoverTokens(data, 0, 0);
     renderModelView(data.tokens, data.attention);
-  } catch (error) {
+  } catch (error) {ß
     console.error('Error:', error);
     document.getElementById('output').innerText = 'Error processing text.';
   }
@@ -64,7 +64,7 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   svg.setAttribute("width", "100%");
   svg.setAttribute("height", "100%");
   
-  // Add header text for layer and head
+  // Add header text for layer and head using template literals
   const header = document.createElementNS("http://www.w3.org/2000/svg", "text");
   header.setAttribute("x", "50%");
   header.setAttribute("y", "15");
@@ -77,11 +77,14 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   const maxLineWidth = 4;
   const maxOpacity = 0.8;
   
+  // Normalize weights per head: Compute maximum weight in this head.
+  const headMax = Math.max(...attentionWeights.flat()) || 1;
+  
   // Draw tokens on both sides (vertically aligned)
   tokens.forEach((token, idx) => {
     const cleanToken = token.replace("Ġ", "");
     
-    // Left side: fix x position to 'padding'
+    // Left side: fixed x position to 'padding'
     const leftText = document.createElementNS("http://www.w3.org/2000/svg", "text");
     leftText.setAttribute("x", padding);
     leftText.setAttribute("y", padding + (idx * 20));
@@ -99,19 +102,22 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     svg.appendChild(rightText);
   });
   
-  // Draw attention lines between tokens
+  // Draw attention lines between tokens with normalized weights
   attentionWeights.forEach((sourceWeights, sourceIdx) => {
     sourceWeights.forEach((weight, targetIdx) => {
       if (weight > 0.05 && sourceIdx !== targetIdx) {
+        // Normalize the weight relative to the maximum weight in this head
+        const normalizedWeight = weight / headMax;
+        
         const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-        // Use the same padding and vertical spacing to align lines with tokens
+        // Align lines with tokens using the same padding and vertical spacing
         line.setAttribute("x1", padding);
         line.setAttribute("y1", padding + (sourceIdx * 20) - 5);
         line.setAttribute("x2", "90%");
         line.setAttribute("y2", padding + (targetIdx * 20) - 5);
         line.setAttribute("stroke", "#2ecc71");
-        line.setAttribute("stroke-width", Math.max(0.5, weight * maxLineWidth));
-        line.setAttribute("opacity", Math.min(maxOpacity, weight * 2));
+        line.setAttribute("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth));
+        line.setAttribute("opacity", Math.min(maxOpacity, normalizedWeight * 2));
         line.setAttribute("stroke-linecap", "round");
         svg.appendChild(line);
       }
@@ -130,7 +136,6 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   
   return thumbnail;
 }
-
 // Function to display the tokens and attention values
 function displayOutput(data) {
   const outputDiv = document.getElementById('output');