thubnail filled and layer head box next to each other

frontend/script.js

@@ -13,36 +13,15 @@ document.getElementById('textForm').addEventListener('submit', async (e) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
-
     const data = await response.json();
 
-    console.log("Received Data:", data); // ✅ Debugging output
-
-    // Check if tokens and attention exist
-    if (!data.tokens || !data.attention) {
-      console.error("Error: Missing tokens or attention data.");
-      document.getElementById('output').innerText = 'Error: Missing tokens or attention data.';
-      return;
-    }
-
-    // Ensure the thumbnail container is available
-    const container = document.getElementById("thumbnailContainer");
-    if (!container) {
-      console.error("Error: #thumbnailContainer not found in DOM.");
-      return;
-    }
-    
-    container.innerHTML = "";
-
+    // Use data.tokens and data.attention from your POST response
+    // displayOutput(data);
     displayHoverTokens(data, 0, 0);
+    // Changed call here to pass the entire data object
     renderModelView(data);
-
-    setTimeout(() => {
-      createFirstThumbnail(data); 
-    }, 100); // Short delay to prevent conflicts
-
   } catch (error) {
-    console.error("Error:", error);
+    console.error('Error:', error);
     document.getElementById('output').innerText = 'Error processing text.';
   }
 });
@@ -174,7 +153,7 @@ function createAttentionThumbnail(data, layerIdx, headIdx) {
   
   const maxLineWidth = 4;
   const maxOpacity = 0.8;
-  const xRight = width - 10;
+  const xRight = width - padding;
 
   // Create a thumbnail container using D3.
   const thumbnail = d3.select(document.createElement("div"))