Spaces:

DeepestGaze
/

DeeperGaze

Running

App Files Files Community

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

Commit

38be7c4

1 Parent(s): 71654ae

final run2

Browse files

Files changed (1) hide show

frontend/index.html +281 -139

frontend/index.html CHANGED Viewed

@@ -6,165 +6,111 @@
   <title>DeepGaze</title>
   <link rel="stylesheet" href="static/styles.css" />
   <script src="https://d3js.org/d3.v6.min.js"></script>
 </head>
 <body>
-  <!-- A header spanning the full width -->
   <header>
     <h1>DeepGaze</h1>
   </header>
-  <!-- Main container that splits the page into a left main (75%) and right aside (25%) -->
   <div class="container">
     <main>
       <!-- About Attention Section -->
       <section class="about-section">
         <h2>About Attention</h2>
         <p>
-          Transformer networks are built from multiple layers, and each layer is divided into several attention heads.
-          Each head computes its own attention matrix by combining "queries" and "keys"—the fundamental elements that
-          help the network decide how much focus to give to different parts of the input.
         </p>
         <p>
-          You can think of each query as a question that a token asks, such as "Are there adjectives in front of me?"
-          Meanwhile, each key serves as a potential answer, carrying the token's characteristics. When the model compares
-          queries with keys, it determines the strength of their match and, therefore, how much influence one token should
           have on another.
         </p>
         <p>
-          For example, consider the phrase "fluffy blue monster." One token might generate a query like, "Is the word in
-          front of me an adjective?" In this case, the tokens "fluffy" and "blue"—which are adjectives—provide keys that
-          answer this question strongly, while "monster," being a noun, offers a weaker response. This interplay of
-          questions (queries) and answers (keys) is what creates the attention matrix for each head.
         </p>
         <p>
-          Each attention head focuses on different relationships and patterns within the text, allowing the network to
-          capture a rich and nuanced understanding of the language. Despite the critical role that these attention mechanisms
-          play, it's interesting to note that only about one third of all the weights in a large language model are actually
-          in the attention blocks. So while the famous slogan "attention is all you need" highlights the importance of these
-          connections, in terms of sheer weight, it's only one third of what you really need!
-        </p>
-        <p>
-          In summary, transformer models use multiple layers with several attention heads per layer to build complex
-          relationships between tokens. Each head creates an attention matrix by matching queries (questions) to keys
-          (answers), as seen in our "fluffy blue monster" example. Even though attention is crucial for the model's performance,
-          remember that it only accounts for roughly one third of the model’s overall weights.
         </p>
       </section>
       <!-- Deep Gaze into Attention Heads Section -->
       <section class="deep-gaze-section">
         <h2>A Deep Gaze into Attention Heads</h2>
-        <p>Click on the head that looks interesting gaze deeper into it in the next section</p>
-      <!-- Text Input & Process Button -->
-      <form id="textForm" class="text-form">
-        <textarea
-          id="inputText"
-          rows="2"x
-          cols="50"
-          placeholder="Enter your text here..."
-          autofocus
-        ></textarea>
-        <button type="submit">Process</button>
-      </form>
-      <style>
-        .text-form button {
-          background-color: #800000; /* Bordo red */
-          color: #fff; /* White text */
-          border: none;
-          padding: 8px 12px;
-          font-size: 14px;
-          border-radius: 4px;
-          cursor: pointer;
-        }
-      </style>
-        <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <title>Head & Layer Display</title>
-          <style>
-            .info-container {
-              display: flex;
-              align-items: center;
-              margin: 5px 0;
-              font-size: 0.9rem; /* smaller text */
-            }
-            .info-container .label {
-              margin-right: 5px;
-            }
-            .info-container .number-box {
-              border: 1px solid #800000; /* bordo red */
-              border-radius: 4px;
-              padding: 2px 6px;
-              font-weight: bold;
-              color: #800000;
-              min-width: 20px;
-              text-align: center;
-            }
-          </style>
-        </head>
-        <body>
-          <div id="head" class="info-container">
-            <span class="label">Head:</span>
-            <span class="number-box">3</span>
-          </div>
-          <div id="layer" class="info-container">
-            <span class="label">Layer:</span>
-            <span class="number-box">5</span>
-          </div>
-        </body>
-        </html>
-        <!-- Layer/Head Selection -->
-        <!-- <form id="headSelection" class="selection-form">
-          <label for="layers">Choose a layer:</label>
-          <select name="layers" id="layers">
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="5">5</option>
-            <option value="6">6</option>
-            <option value="7">7</option>
-            <option value="8">8</option>
-            <option value="9">9</option>
-            <option value="10">10</option>
-            <option value="11">11</option>
-            <option value="12">12</option>
-          </select>
-          <label for="heads">Choose a head:</label>
-          <select name="heads" id="heads">
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="5">5</option>
-            <option value="6">6</option>
-            <option value="7">7</option>
-            <option value="8">8</option>
-            <option value="9">9</option>
-            <option value="10">10</option>
-            <option value="11">11</option>
-            <option value="12">12</option>
-          </select>
-        </form> -->
-        <!-- Output Area -->
       </section>
       <section class="model_view">
         <div id="model_view_container">
-          <p></p>
-        </div>
-        <div id="layer">
-          <p></p>
         </div>
-        <div id="head">
-          <p></p>
         </div>
       </section>
       <section class="hover-visualization">
         <h2>Hover Visualization</h2>
         <p>
@@ -172,15 +118,211 @@
           to see the attention weights for that token across all heads.
         </p>
         <div id="tokenContainer"></div>
       </section>
     </main>
-    <!-- Right side (25%) to be used for footnotes or left empty -->
-    <aside>
-      Test
-    </aside>
   </div>
-  <script src="static/script.js?v=20265"</script></script>
-</html>

   <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;
+    }
+  </style>
 </head>
 <body>
+  <!-- Header -->
   <header>
     <h1>DeepGaze</h1>
   </header>
+  <!-- Main container -->
   <div class="container">
     <main>
       <!-- About Attention Section -->
       <section class="about-section">
         <h2>About Attention</h2>
         <p>
+          Transformer networks are built from multiple layers, and each layer is divided into several attention heads.
+          Each head computes its own attention matrix by combining "queries" and "keys"—the fundamental elements that help
+          the network decide how much focus to give to different parts of the input.
         </p>
         <p>
+          You can think of each query as a question that a token asks, such as "Are there adjectives in front of me?"
+          Meanwhile, each key serves as a potential answer, carrying the token's characteristics. When the model compares
+          queries with keys, it determines the strength of their match and, therefore, how much influence one token should
           have on another.
         </p>
         <p>
+          For example, consider the phrase "fluffy blue monster." One token might generate a query like, "Is the word in front
+          of me an adjective?" In this case, the tokens "fluffy" and "blue"—which are adjectives—provide keys that answer this
+          question strongly, while "monster," being a noun, offers a weaker response. This interplay of questions (queries)
+          and answers (keys) is what creates the attention matrix for each head.
         </p>
         <p>
+          Each attention head focuses on different relationships and patterns within the text, allowing the network to capture
+          a rich and nuanced understanding of the language. Despite the critical role that these attention mechanisms play,
+          it's interesting to note that only about one third of all the weights in a large language model are actually in the
+          attention blocks. So while the famous slogan "attention is all you need" highlights the importance of these connections,
+          in terms of sheer weight, it's only one third of what you really need!
         </p>
       </section>
       <!-- Deep Gaze into Attention Heads Section -->
       <section class="deep-gaze-section">
         <h2>A Deep Gaze into Attention Heads</h2>
+        <p>Click on a head that looks interesting to gaze deeper into it in the next section</p>
+        <!-- Text Input & Process Button -->
+        <form id="textForm" class="text-form">
+          <textarea
+            id="inputText"
+            rows="2"
+            cols="50"
+            placeholder="Enter your text here..."
+            autofocus
+          ></textarea>
+          <button type="submit">Process</button>
+        </form>
       </section>
+      <!-- Model View Section -->
       <section class="model_view">
         <div id="model_view_container">
+          <!-- Thumbnails of attention heads will be rendered here -->
         </div>
+        <!-- Display for selected head and layer -->
+        <div id="display_info">
+          <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>
       </section>
+      <!-- Hover Visualization Section -->
       <section class="hover-visualization">
         <h2>Hover Visualization</h2>
         <p>
           to see the attention weights for that token across all heads.
         </p>
         <div id="tokenContainer"></div>
       </section>
+      <!-- Output area (for debugging) -->
+      <section id="outputSection">
+        <div id="output"></div>
+      </section>
     </main>
+    <!-- (Optional aside can be added here) -->
   </div>
+  <!-- Script -->
+  <script>
+    // Global variable to store fetched data
+    let currentData = null;
+    // Form submit handler
+    document.getElementById('textForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const inputText = document.getElementById('inputText').value;
+      try {
+        const response = await fetch('/process', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text: inputText })
+        });
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        currentData = data; // Store globally for use in click handlers
+        // 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 = "";
+      const gridContainer = document.createElement("div");
+      gridContainer.style.display = "grid";
+      gridContainer.style.gridTemplateColumns = "repeat(12, 120px)";
+      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);
+        }
+      }
+      container.appendChild(gridContainer);
+    }
+    function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
+      const padding = 20;
+      const tokenHeight = 20;
+      const width = 120;
+      // Compute the thumbnail height dynamically based on the number of tokens.
+      const height = padding * 2 + tokens.length * tokenHeight;
+      const maxLineWidth = 4;
+      const maxOpacity = 0.8;
+      // Compute the right-side x-coordinate numerically.
+      const xRight = width - padding;
+      // Create a thumbnail container using D3.
+      const thumbnail = d3.select(document.createElement("div"))
+        .style("position", "relative")
+        .style("height", height + "px")
+        .style("width", width + "px")
+        .style("border", "1px solid #ddd")
+        .style("border-radius", "4px")
+        .style("padding", "5px")
+        .style("background", "#fff");
+      // Append an SVG container with fixed dimensions.
+      const svg = thumbnail.append("svg")
+        .attr("width", width)
+        .attr("height", height);
+      // Add header text (e.g., "L4 H4") to show the layer and head number.
+      svg.append("text")
+        .attr("x", width / 2)
+        .attr("y", 15)
+        .attr("text-anchor", "middle")
+        .attr("font-size", "10")
+        .text(`L${layerIdx + 1} H${headIdx + 1}`);
+      // (Removed drawing token text to keep the view clean.)
+      // 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("x1", padding)
+              .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: update the head and layer display.
+      thumbnail.on("click", function() {
+        d3.select("#display_head .number-box").text(headIdx + 1);
+        d3.select("#display_layer .number-box").text(layerIdx + 1);
+        displayHoverTokens(currentData, layerIdx, headIdx);
+      });
+      return thumbnail.node();
+    }
+    // Function to display raw tokens and attention data for debugging.
+    function displayOutput(data) {
+      const outputDiv = document.getElementById('output');
+      outputDiv.innerHTML = `
+        <h2>Tokens</h2>
+        <pre>${JSON.stringify(data.tokens, null, 2)}</pre>
+        <h2>Attention</h2>
+        <pre>${JSON.stringify(data.attention, null, 2)}</pre>
+      `;
+    }
+    function renderTokens(tokens, attentionData, layer_idx, head_idx) {
+      const container = document.getElementById('tokenContainer');
+      container.innerHTML = "";
+      tokens.forEach((token, index) => {
+        const span = document.createElement('span');
+        span.textContent = token.replace("Ġ", "") + " ";
+        span.style.fontSize = "32px";
+        span.addEventListener('mouseenter', () => {
+          highlightAttention(index, attentionData, layer_idx, head_idx);
+        });
+        span.addEventListener('mouseleave', () => {
+          resetTokenSizes();
+        });
+        container.appendChild(span);
+      });
+    }
+    function displayHoverTokens(data, layer_idx, head_idx) {
+      let tokens, attentionMatrix;
+      if (!data.tokens || !data.attention) {
+        tokens = ['This', 'is', 'a', 'test', '.'];
+        attentionMatrix = Array(12)
+          .fill(null)
+          .map(() => Array(12).fill(null).map(() => Array(tokens.length).fill(0)));
+      } else {
+        tokens = data.tokens;
+        attentionMatrix = data.attention;
+      }
+      renderTokens(tokens, attentionMatrix, layer_idx, head_idx);
+    }
+    function resetTokenSizes() {
+      const container = document.getElementById("tokenContainer");
+      Array.from(container.children).forEach((span) => {
+        span.style.fontSize = "32px";
+      });
+    }
+    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";
+        }
+      });
+    }
+  </script>
+</body>
+</html>