Add clearer explanations of visualizations for non-technical users

templates/index.html

@@ -113,12 +113,23 @@
             <div class="col-md-12">
                 <div class="visualization-container">
                     <h3>Layer Contributions to Log Probability</h3>
-                    <p>This chart shows how each layer in GPT-2 contributes to the log probability of the token "{{ prediction.token }}" (as % of total contribution).</p>
+                    <p>This chart shows how each layer in GPT-2 influences the prediction of "{{ prediction.token }}" as your next word. Each bar represents one of GPT-2's 12 layers:</p>
+                    <ul>
+                        <li><strong>Green bars (positive)</strong>: These layers push toward predicting this word</li>
+                        <li><strong>Purple bars (negative)</strong>: These layers push against predicting this word</li>
+                        <li><strong>Taller bars</strong> have stronger influence than shorter bars</li>
+                    </ul>
                     
                     <div id="layer-chart"></div>
                     
                     <h3>Attention Head Contributions</h3>
-                    <p>This visualization shows how each attention head in GPT-2 contributes to the prediction of the token "{{ prediction.token }}" (as % of total contribution).</p>
+                    <p>This heatmap shows how each of GPT-2's 144 individual attention mechanisms (12 heads in each of 12 layers) influences the prediction:</p>
+                    <ul>
+                        <li><strong>Red squares</strong>: These heads strongly support predicting this word</li>
+                        <li><strong>Blue squares</strong>: These heads work against predicting this word</li>
+                        <li><strong>White/neutral squares</strong>: These heads have little influence on this prediction</li>
+                    </ul>
+                    <p><em>Hover over any square to see its exact contribution. Research has shown certain heads specialize in specific tasks like tracking names or completing patterns.</em></p>
                     
                     <div class="legend">
                         <div class="legend-item">