| <div style="border: 1px solid #e2e8f0; border-radius: 8px; background: white; margin: 1.5rem 0;"> | |
| <div style="padding: 1rem; border-bottom: 1px solid #e2e8f0; background: #f8f9fa;"> | |
| <h4 style="margin: 0 0 0.5rem 0; color: #495057;">🔍 Attention Mask Visualizer</h4> | |
| <p style="margin: 0; font-size: 0.9em; color: #6c757d;"> | |
| Visualize attention patterns in transformer models. This helps debug attention mask issues. | |
| </p> | |
| </div> | |
| <div style="padding: 1rem;"> | |
| <div style="display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1rem;"> | |
| <div> | |
| <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Model:</label> | |
| <select id=model-select style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; background: white;"> | |
| <option value=openai-community/gpt2>openai-community/gpt2</option> | |
| <option value=google/gemma-2-2b>google/gemma-2-2b</option> | |
| <option value=microsoft/DialoGPT-small>microsoft/DialoGPT-small</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Action:</label> | |
| <button id=visualize-btn style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;"> | |
| 🚀 Visualize | |
| </button> | |
| </div> | |
| </div> | |
| <div style="margin-bottom: 1rem;"> | |
| <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Prompt:</label> | |
| <textarea id=prompt-input style="width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; font-family: monospace; font-size: 0.9em;" rows=3 placeholder="You are an assistant. Make sure you print me."></textarea> | |
| </div> | |
| <div id=attention-output style="min-height: 200px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 1rem;"> | |
| <div style="text-align: center; color: #6c757d; font-style: italic;"> | |
| Click "Visualize" to generate attention visualization | |
| </div> | |
| </div> | |
| </div> | |
| <div style="padding: 1rem; border-top: 1px solid #e2e8f0; background: #f8f9fa; font-size: 0.9em; color: #6c757d;"> | |
| <strong>Note:</strong> This is a demonstration. In the original Gradio app, this would use GPU processing with ZeroGPU | |
| to generate real attention visualizations from transformer models. | |
| </div> | |
| </div> | |
| <script>document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("model-select"),t=document.getElementById("prompt-input"),n=document.getElementById("visualize-btn"),i=document.getElementById("attention-output");t.value="You are an assistant. Make sure you print me.",n.addEventListener("click",function(){let o=e.value,r=t.value.trim();if(!r){i.innerHTML='<div style="color: #e53e3e;">Please enter a prompt</div>';return}n.disabled=!0,n.textContent="Processing...",i.innerHTML='<div style="text-align: center; color: #6c757d;"><em>Generating attention visualization...</em></div>',setTimeout(()=>{let e=r.split(" ").slice(0,8),t='<div style="margin-bottom: 1rem;"><strong>Model:</strong> '+o+"</div>";t+='<div style="margin-bottom: 1rem;"><strong>Tokens:</strong> '+e.join(" • ")+'</div><div><strong>Attention Matrix (Layer 0, Head 0):</strong></div><table style="margin-top: 0.5rem; border-collapse: collapse; font-family: monospace; font-size: 0.8em;">';for(let n=0;n<e.length;n++){t+="<tr>";for(let n=0;n<e.length;n++){let e=Math.random(),n=`rgba(59, 130, 246, ${e})`;t+=`<td style="border: 1px solid #ddd; padding: 4px; background: ${n}; text-align: center; min-width: 40px;">${e.toFixed(2)}</td>`}t+="</tr>"}i.innerHTML=t+='</table><div style="margin-top: 1rem; font-size: 0.9em; color: #6c757d;"><em>Darker blue = higher attention weight</em></div>',n.disabled=!1,n.textContent="\uD83D\uDE80 Visualize"},2e3)})})</script> |