thubnail filled and layer head box next to each other

frontend/index.html

@@ -83,10 +83,20 @@
         <p>Type in a token sequence (below 50 characters) and hit process. After some loading time, you will be able to see the attention patterns of individual so-called "heads" in the LLM.
           Each head focuses on different aspects of the input text, and by visualizing these patterns, you can gain insights into how the model processes and understands language.
         </p>
-
+        <div id="thumbnailContainer"></div>
         <p>Here is an example view of a head, with tokens on each side. If you see a connection between two tokens, it means that the head is paying attention to the relationship between those tokens. This way you can see attention heads which "pay attention" to the previous token, the first token, or other patterns.
           Click on an attention head to select the respective head in a layer. Afterwards you can hover over tokens to see the attention weights of the selected head for that token. </p>
-        <div id="thumbnailContainer"></div>
+          <section id="display_info">
+            <div id="display_head" class="info-container">
+              <span class="label">Head:</span>
+              <span class="number-box">-</span>
+              <span class="spacer"></span> <!-- Adds space between Head and Layer -->
+              <span class="label">Layer:</span>
+              <span class="number-box">-</span>
+            </div>
+          </section>
+            
+          </section>
         <!-- Text Input & Process Button -->
         <form id="textForm" class="text-form">
           <textarea id="inputText" rows="2" cols="50" maxlength="50" placeholder="Enter your text here..." autofocus></textarea>
@@ -103,14 +113,14 @@
         </div>
         <!-- Display for selected head and layer -->
         <div id="display_info">
-          <div id="display_head" class="info-container">
+          <!-- <div id="display_head" class="info-container">
             <span class="label">Head:</span>
             <span class="number-box">-</span>
           </div>
           <div id="display_layer" class="info-container">
             <span class="label">Layer:</span>
             <span class="number-box">-</span>
-          </div>
+          </div> -->
         </div>
       </section>
       

frontend/script.js

@@ -72,7 +72,7 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
     .style("width", width + "px")
     .style("border", "1px solid #ddd")
     .style("border-radius", "4px")
-    .style("padding", "5px")
+    .style("padding", "0px")
     .style("background", "#fff")
     .style("cursor", "pointer"); // Indicate clickability
 
@@ -81,12 +81,12 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
     .attr("width", width)
     .attr("height", height)
     .attr("viewBox", `0 0 ${width} ${height}`) // not sure 
-    .attr("preserveAspectRatio", "xMidYMid meet"); // not sure 
+    .attr("preserveAspectRatio", "none"); // not sure 
 
   // Add header text for layer and head
   svg.append("text")
     .attr("x", width / 2)
-    .attr("y", 15)
+    .attr("y", 10)
     .attr("text-anchor", "middle")  // not sure 
     .attr("dominant-baseline", "middle")  // not sure 
     .attr("font-size", "10")
@@ -99,9 +99,9 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
       if (weight > 0.01 && sourceIdx !== targetIdx) {
         const normalizedWeight = weight / rowMax;
         svg.append("line")
-          .attr("x1", padding + 10) 
+          .attr("x1", padding ) 
           .attr("y1", padding + sourceIdx * tokenHeight - 5)
-          .attr("x2", xRight - 10) 
+          .attr("x2", xRight ) 
           .attr("y2", padding + targetIdx * tokenHeight - 5)
           .attr("stroke", "#800000") // Bordo red
           .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))