Spaces:

DeepestGaze
/

DeeperGaze

Sleeping

App Files Files Community

Paar, F. (Ferdinand) commited on Feb 8, 2025

Commit

d31e7ee

1 Parent(s): 4e93d08

limit textarea to 200 chars and adjust thumbnail sizing3

Browse files

Files changed (2) hide show

frontend/index.html +1 -70
frontend/script.js +20 -19

frontend/index.html CHANGED Viewed

@@ -85,7 +85,7 @@
             id="inputText"
             rows="2"
             cols="50"
-            maxlength="200"
             placeholder="Enter your text here..."
             autofocus
           ></textarea>
@@ -330,72 +330,3 @@
   </script>
 </body>
 </html>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>DeepGaze</title>
-  <link rel="stylesheet" href="static/styles.css" />
-  <script src="https://d3js.org/d3.v6.min.js"></script>
-  <style>
-    /* Process button styling */
-    .text-form button {
-      background-color: #800000; /* Bordo red */
-      color: #fff;
-      border: none;
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    /* Info container styling for head and layer display */
-    .info-container {
-      display: flex;
-      align-items: center;
-      margin: 5px 0;
-      font-size: 0.9rem;
-    }
-    .info-container .label {
-      margin-right: 5px;
-    }
-    .info-container .number-box {
-      border: 1px solid #800000;
-      border-radius: 4px;
-      padding: 2px 6px;
-      font-weight: bold;
-      color: #800000;
-      min-width: 20px;
-      text-align: center;
-    }
-    .credits-container {
-      background-color: #800000;
-      padding: 10px 15px;
-      border-radius: 8px;
-      text-align: center;
-      font-family: Arial, sans-serif;
-      font-size: 14px;
-      color: #ffffff;
-      margin: 20px auto;
-      width: fit-content;
-      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-    }
-    .credits-container a {
-      color: #ffcccc;
-      text-decoration: none;
-    }
-    .credits-container a:hover {
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-  <!-- Your existing content remains unchanged -->
-  <div class="credits-container">
-    Created by Samu and Ferdi - Credits to <a href="https://github.com/jessevig/bertviz" target="_blank">BertViz</a>
-  </div>
-  <script src="static/script.js?v=2025001fe143433"></script>
-</body>
-</html>

             id="inputText"
             rows="2"
             cols="50"
+            maxlength="50"
             placeholder="Enter your text here..."
             autofocus
           ></textarea>
   </script>
 </body>
 </html>

frontend/script.js CHANGED Viewed

@@ -18,14 +18,19 @@ document.getElementById('textForm').addEventListener('submit', async (e) => {
     // Use data.tokens and data.attention from your POST response
     displayOutput(data);
     displayHoverTokens(data, 0, 0);
-    renderModelView(data.tokens, data.attention);
   } catch (error) {
     console.error('Error:', error);
     document.getElementById('output').innerText = 'Error processing text.';
   }
 });
-function renderModelView(tokens, attention) {
   const container = document.getElementById("model_view_container");
   if (!container) return;
   container.innerHTML = "";
@@ -36,10 +41,10 @@ function renderModelView(tokens, attention) {
   gridContainer.style.gridGap = "10px";
   gridContainer.style.padding = "20px";
-  // Loop over all 12 layers and 12 heads
   for (let layerIdx = 0; layerIdx < 12; layerIdx++) {
     for (let headIdx = 0; headIdx < 12; headIdx++) {
-      const thumbnail = createAttentionThumbnail(tokens, attention, layerIdx, headIdx);
       gridContainer.appendChild(thumbnail);
     }
   }
@@ -47,7 +52,11 @@ function renderModelView(tokens, attention) {
   container.appendChild(gridContainer);
 }
-function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
   const width = 80;
   const tokenHeight = 15;
   const padding = 10;
@@ -82,14 +91,10 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     .attr("font-size", "10")
     .text(`L${layerIdx + 1} H${headIdx + 1}`);
-  // (Removed the drawing of token text on the left and right to keep it clean.)
   // Draw attention lines with per-row normalization.
   attention[layerIdx][headIdx].forEach((sourceWeights, sourceIdx) => {
-    // Compute the maximum weight in this row (or use 1 if all are zero).
     const rowMax = Math.max(...sourceWeights) || 1;
     sourceWeights.forEach((weight, targetIdx) => {
-      // Only draw if the weight exceeds a threshold and is not self-attention.
       if (weight > 0.01 && sourceIdx !== targetIdx) {
         const normalizedWeight = weight / rowMax;
         svg.append("line")
@@ -97,7 +102,7 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
           .attr("y1", padding + sourceIdx * tokenHeight - 5)
           .attr("x2", xRight)
           .attr("y2", padding + targetIdx * tokenHeight - 5)
-          .attr("stroke", "#800000") // Changed color to bordo red.
           .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
           .attr("opacity", Math.min(maxOpacity, normalizedWeight * 2))
           .attr("stroke-linecap", "round");
@@ -105,19 +110,19 @@ function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
     });
   });
-  // Click handler: update UI with head and layer numbers.
   thumbnail.on("click", function() {
-    d3.select("#head").text(`Head: ${headIdx + 1}`);
-    d3.select("#layer").text(`Layer: ${layerIdx + 1}`);
     displayHoverTokens(data, layerIdx, headIdx);
   });
   return thumbnail.node();
 }
 // Function to display the tokens and attention values
 function displayOutput(data) {
   const outputDiv = document.getElementById('output');
-  // Show raw tokens and attention data for debugging or inspection
   outputDiv.innerHTML = `
     <h2>Tokens</h2>
     <pre>${JSON.stringify(data.tokens, null, 2)}</pre>
@@ -168,16 +173,13 @@ function resetTokenSizes() {
 function highlightAttention(index, attentionData, layer_idx, head_idx) {
   const container = document.getElementById('tokenContainer');
-  // Retrieve the attention weights row for the hovered token
   const row = attentionData[layer_idx][head_idx][index];
   if (!row) {
     console.warn(`No attention data for token index ${index}`);
     return;
   }
-  // Consider only the preceding tokens
   const weights = row.slice(0, index);
-  // Normalize using the maximum weight from the current row (or 1 if zero)
   const maxWeight = Math.max(...attentionData[layer_idx][head_idx]) || 1;
   const baseFontSize = 32;
   const maxIncrease = 20;
@@ -185,11 +187,10 @@ function highlightAttention(index, attentionData, layer_idx, head_idx) {
   Array.from(container.children).forEach((span, idx) => {
     if (idx < index) {
       const weight = weights[idx];
-      // Calculate the new font size based on the attention weight
       const newFontSize = baseFontSize + (weight / maxWeight) * maxIncrease;
       span.style.fontSize = newFontSize + "px";
     } else {
       span.style.fontSize = baseFontSize + "px";
     }
   });
-}

     // 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);
   } catch (error) {
     console.error('Error:', error);
     document.getElementById('output').innerText = 'Error processing text.';
   }
 });
+function renderModelView(data) {
+  // Extract tokens and attention from the data object
+  const tokens = data.tokens;
+  const attention = data.attention;
   const container = document.getElementById("model_view_container");
   if (!container) return;
   container.innerHTML = "";
   gridContainer.style.gridGap = "10px";
   gridContainer.style.padding = "20px";
+  // Loop over all 12 layers and 12 heads, passing the complete data object
   for (let layerIdx = 0; layerIdx < 12; layerIdx++) {
     for (let headIdx = 0; headIdx < 12; headIdx++) {
+      const thumbnail = createAttentionThumbnail(data, layerIdx, headIdx);
       gridContainer.appendChild(thumbnail);
     }
   }
   container.appendChild(gridContainer);
 }
+function createAttentionThumbnail(data, layerIdx, headIdx) {
+  // Extract tokens and attention from the data object
+  const tokens = data.tokens;
+  const attention = data.attention;
   const width = 80;
   const tokenHeight = 15;
   const padding = 10;
     .attr("font-size", "10")
     .text(`L${layerIdx + 1} H${headIdx + 1}`);
   // Draw attention lines with per-row normalization.
   attention[layerIdx][headIdx].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("y1", padding + sourceIdx * tokenHeight - 5)
           .attr("x2", xRight)
           .attr("y2", padding + targetIdx * tokenHeight - 5)
+          .attr("stroke", "#800000") // Bordo red
           .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
           .attr("opacity", Math.min(maxOpacity, normalizedWeight * 2))
           .attr("stroke-linecap", "round");
     });
   });
+  // Click handler remains unchanged, using the passed-in data object.
   thumbnail.on("click", function() {
+    d3.select("#display_head .number-box").text(headIdx + 1);
+    d3.select("#display_layer .number-box").text(layerIdx + 1);
     displayHoverTokens(data, layerIdx, headIdx);
   });
   return thumbnail.node();
 }
 // Function to display the tokens and attention values
 function displayOutput(data) {
   const outputDiv = document.getElementById('output');
   outputDiv.innerHTML = `
     <h2>Tokens</h2>
     <pre>${JSON.stringify(data.tokens, null, 2)}</pre>
 function highlightAttention(index, attentionData, layer_idx, head_idx) {
   const container = document.getElementById('tokenContainer');
   const row = attentionData[layer_idx][head_idx][index];
   if (!row) {
     console.warn(`No attention data for token index ${index}`);
     return;
   }
   const weights = row.slice(0, index);
   const maxWeight = Math.max(...attentionData[layer_idx][head_idx]) || 1;
   const baseFontSize = 32;
   const maxIncrease = 20;
   Array.from(container.children).forEach((span, idx) => {
     if (idx < index) {
       const weight = weights[idx];
       const newFontSize = baseFontSize + (weight / maxWeight) * maxIncrease;
       span.style.fontSize = newFontSize + "px";
     } else {
       span.style.fontSize = baseFontSize + "px";
     }
   });
+}