Add token color if max

frontend/index.html

@@ -4,7 +4,7 @@
   <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" />
+  <link rel="stylesheet" href="styles.css" />
   <!-- Load D3 -->
   <script src="https://d3js.org/d3.v6.min.js"></script>
   <style>
@@ -72,13 +72,15 @@
           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!1
+          in terms of sheer weight, it's only one third of what you really need!
         </p>
+        <p id="credits">Made with <3 by Ferdi & Samu. Credits for model view below to <a href="https://jessevig.com/" target="_blank">BertViz</a>.</p>
       </section>
       
       <!-- Deep Gaze into Attention Heads Section -->
       <section class="deep-gaze-section">
         <h2>A Deep Gaze into Attention Heads</h2>
+        <p>Type in a token sequence (below 50 characters)</p>
         <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">
@@ -113,17 +115,10 @@
         </p>
         <div id="tokenContainer"></div>
       </section>
-      
-      <!-- (Optional debugging output area has been removed) -->
-      
     </main>
   </div>
   
-  <div class="credits-container">
-    Created by ferdi & samu - Credits to <a href="https://jessevig.com/" target="_blank">BertViz</a>
-  </div>
-  
   <!-- External JavaScript (all event listeners and functions are defined here) -->
-  <script src="static/script.js?v=202845563"></script>
+  <script src="script.js?v=202845563"></script>
 </body>
 </html>

frontend/script.js

@@ -187,6 +187,9 @@ function highlightAttention(index, attentionData, layer_idx, head_idx) {
   Array.from(container.children).forEach((span, idx) => {
     if (idx < index) {
       const weight = weights[idx];
+      if (weight == maxWeight){
+        span.style.color = "#800000"; // Bordo red
+      }
       const newFontSize = baseFontSize + (weight / maxWeight) * maxIncrease;
       span.style.fontSize = newFontSize + "px";
     } else {

frontend/styles.css

@@ -188,4 +188,11 @@ button:hover {
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
+}
+
+#credits {
+  font-size: 0.8rem;
+  color: #888;
+  margin-top: 1rem;
+  font-style: italic;
 }