thubnail filled and layer head box next to each other

frontend/script.js

@@ -20,6 +20,7 @@ document.getElementById('textForm').addEventListener('submit', async (e) => {
     displayHoverTokens(data, 0, 0);
     // Changed call here to pass the entire data object
     renderModelView(data);
+    createLargeThumbnail(data);
   } catch (error) {
     console.error('Error:', error);
     document.getElementById('output').innerText = 'Error processing text.';
@@ -51,94 +52,88 @@ function renderModelView(data) {
   
   container.appendChild(gridContainer);
 }
-function createFirstThumbnail(data) {
+function createLargeThumbnail(data) {
   const tokens = data.tokens;
   const attention = data.attention;
 
-  const width = 200;  // Increased size
-  const height = 200;
-  const tokenHeight = 15;
-  const paddingTop = 20; // Space for text above graph
-  const paddingBottom = 20; // Space for text below graph
-  const graphHeight = height - (paddingTop + paddingBottom); // Adjust graph size
-
-  const maxLineWidth = 4;
-  const maxOpacity = 0.8;
-  const xRight = width - 10; // Adjust for proper positioning
+  // Dimensions for the thumbnail
+  const width = 300;
+  const height = 300;
+  const textHeight = 30;      // Space for token text (top and bottom)
+  const graphHeight = height - 2 * textHeight; // Remaining space for the graph
 
-  // Create the thumbnail container
-  const thumbnail = d3.select("#thumbnailContainer")
+  // Create the main container and append it to #thumbnailContainer
+  const container = d3.select("#thumbnailContainer")
     .append("div")
-    .attr("id", "firstThumbnail")
-    .style("position", "relative")
-    .style("height", height + "px")
+    .attr("id", "largeThumbnail")
     .style("width", width + "px")
+    .style("height", height + "px")
     .style("border", "2px solid #ddd")
     .style("border-radius", "6px")
-    .style("padding", "5px")
     .style("background", "#fff")
-    .style("cursor", "pointer")
+    .style("padding", "10px")
     .style("display", "flex")
     .style("flex-direction", "column")
-    .style("align-items", "center")
-    .style("justify-content", "space-between");
+    .style("align-items", "center");
 
-  // Top Token Text (Above Graph)
-  thumbnail.append("div")
-    .classed("token-text", true)
+  // Add token text above the graph
+  container.append("div")
+    .classed("thumbnail-token-text", true)
     .style("width", "100%")
     .style("text-align", "center")
-    .style("font-size", "14px")
-    .style("padding-bottom", "5px")
-    .text(tokens.join(" "));  // Display all tokens in a line
+    .style("font-size", "16px")
+    .style("margin-bottom", "5px")
+    .text(tokens.join(" "));
 
-  // SVG Graph Container
-  const svg = thumbnail.append("svg")
+  // Create the SVG container for the graph
+  const svg = container.append("svg")
     .attr("width", width)
     .attr("height", graphHeight)
     .attr("viewBox", `0 0 ${width} ${graphHeight}`)
     .attr("preserveAspectRatio", "none");
 
-  // Header text inside the SVG
+  // Add header text inside the SVG
   svg.append("text")
     .attr("x", width / 2)
-    .attr("y", 15)
+    .attr("y", 20) // adjust as needed
     .attr("text-anchor", "middle")
-    .attr("font-size", "12px")
-    .text(`Layer 1 - Head 1`);
+    .attr("font-size", "14px")
+    .text("Layer 1 - Head 1");
 
-  // Compute dynamic Y positions for graph
-  const yStart = paddingTop;
+  // Calculate spacing for tokens inside the SVG
+  const tokenCount = tokens.length;
+  const tokenSpacing = graphHeight / (tokenCount + 1);
 
-  // Draw attention lines
+  // Draw attention lines for the first layer, first head
+  // (Assuming attention[0][0] is a matrix: tokens x tokens)
   attention[0][0].forEach((sourceWeights, sourceIdx) => {
     const rowMax = Math.max(...sourceWeights) || 1;
     sourceWeights.forEach((weight, targetIdx) => {
       if (weight > 0.01 && sourceIdx !== targetIdx) {
         const normalizedWeight = weight / rowMax;
         svg.append("line")
-          .attr("x1", 10)
-          .attr("y1", yStart + sourceIdx * tokenHeight)
-          .attr("x2", xRight)
-          .attr("y2", yStart + targetIdx * tokenHeight)
+          .attr("x1", 20)                // left margin inside the SVG
+          .attr("y1", tokenSpacing * (sourceIdx + 1))
+          .attr("x2", width - 20)          // right margin inside the SVG
+          .attr("y2", tokenSpacing * (targetIdx + 1))
           .attr("stroke", "#800000")
-          .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
-          .attr("opacity", Math.min(maxOpacity, normalizedWeight * 2))
+          .attr("stroke-width", Math.max(0.5, normalizedWeight * 4))
+          .attr("opacity", Math.min(0.8, normalizedWeight * 2))
           .attr("stroke-linecap", "round");
       }
     });
   });
 
-  // Bottom Token Text (Below Graph)
-  thumbnail.append("div")
-    .classed("token-text", true)
+  // Add token text below the graph
+  container.append("div")
+    .classed("thumbnail-token-text", true)
     .style("width", "100%")
     .style("text-align", "center")
-    .style("font-size", "14px")
-    .style("padding-top", "5px")
-    .text(tokens.join(" "));  // Display all tokens in a line
+    .style("font-size", "16px")
+    .style("margin-top", "5px")
+    .text(tokens.join(" "));
 
-  return thumbnail.node();
+  return container.node();
 }
 
 function createAttentionThumbnail(data, layerIdx, headIdx) {
@@ -147,13 +142,14 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
 
   const width = 80;
   const tokenHeight = 15;
+  const padding = 10; 
   const paddingTop = 10;  //not sur e
   const paddingBottom = 0; //not sur e
   const height = paddingTop + tokens.length * tokenHeight;  // Adjust height calculation
   
   const maxLineWidth = 4;
   const maxOpacity = 0.8;
-  const xRight = width - padding;
+  const xRight = width - 10;
 
   // Create a thumbnail container using D3.
   const thumbnail = d3.select(document.createElement("div"))